@xcall/sdk 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,180 @@
+# @xcall/sdk
+
+Embed video calls in any website with a single JavaScript class.
+
+## Installation
+
+```bash
+npm install @xcall/sdk
+```
+
+## How it works
+
+1. Your backend generates a JWT token using the xCall API
+2. You pass that token to the SDK
+3. The SDK mounts a secure video call inside any HTML element
+
+The token carries all configuration: room, user, branding, permissions. Your secret keys never reach the frontend.
+
+---
+
+## Usage
+
+### React
+
+```tsx
+import { useEffect, useRef } from 'react'
+import { XCall } from '@xcall/sdk'
+
+export function VideoCall({ token }: { token: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const call = new XCall({
+      container: containerRef.current,
+      token,
+    })
+
+    call.on('joined', ({ roomId }) => console.log('joined', roomId))
+    call.on('left',   ({ roomId }) => console.log('left',   roomId))
+    call.on('error',  ({ message }) => console.error(message))
+
+    return () => call.destroy()
+  }, [token])
+
+  return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
+}
+```
+
+---
+
+### Vue
+
+```vue
+<template>
+  <div ref="callContainer" style="width:100%;height:600px" />
+</template>
+
+<script setup>
+import { XCall } from '@xcall/sdk'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps(['token'])
+const callContainer = ref(null)
+let call
+
+onMounted(() => {
+  call = new XCall({ container: callContainer.value, token: props.token })
+  call.on('left', () => console.log('left'))
+})
+
+onUnmounted(() => call?.destroy())
+</script>
+```
+
+---
+
+### Angular
+
+```typescript
+import { Component, ElementRef, ViewChild, Input, OnDestroy, AfterViewInit } from '@angular/core'
+import { XCall } from '@xcall/sdk'
+
+@Component({
+  selector: 'app-call',
+  template: '<div #container style="width:100%;height:600px"></div>',
+})
+export class CallComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('container') container!: ElementRef
+  @Input() token!: string
+  private call!: XCall
+
+  ngAfterViewInit() {
+    this.call = new XCall({ container: this.container.nativeElement, token: this.token })
+    this.call.on('left', () => console.log('left'))
+  }
+
+  ngOnDestroy() {
+    this.call?.destroy()
+  }
+}
+```
+
+---
+
+### HTML / CDN
+
+```html
+<div id="call" style="width:100%;height:600px"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@xcall/sdk/dist/xcall.min.js"></script>
+<script>
+  const call = new XCallSDK.XCall({
+    container: '#call',
+    token: 'YOUR_TOKEN_HERE',
+  })
+
+  call.on('left', () => console.log('left'))
+</script>
+```
+
+---
+
+## API
+
+### `new XCall(options)`
+
+| Option | Type | Required | Description |
+|---|---|---|---|
+| `container` | `HTMLElement \| string` | ✅ | Element or CSS selector where the call will mount |
+| `token` | `string` | ✅ | JWT token generated by your backend |
+| `roomUrl` | `string` | — | Custom xCall-room URL (default: `https://room.xcall.com.br`) |
+| `iframeStyle` | `object` | — | Extra CSS styles applied to the iframe |
+
+---
+
+### Events
+
+```ts
+call.on('ready',             ()                                    => void)
+call.on('joined',            ({ roomId, userId })                  => void)
+call.on('left',              ({ roomId, reason? })                 => void)
+call.on('participant_joined',({ userId, displayName? })            => void)
+call.on('participant_left',  ({ userId })                          => void)
+call.on('error',             ({ code, message })                   => void)
+```
+
+---
+
+### Methods
+
+```ts
+call.muteAudio(true)   // mute / unmute microphone
+call.muteVideo(false)  // mute / unmute camera
+call.leave()           // end the call programmatically
+call.destroy()         // remove iframe and listeners (use on component unmount)
+```
+
+---
+
+## Token generation
+
+Tokens must be generated server-side. Never expose your API secret on the frontend.
+
+```ts
+// Example: Node.js backend
+const res = await fetch('https://api.xcall.com.br/session', {
+  method: 'POST',
+  headers: { 'x-api-key': process.env.XCALL_SECRET },
+  body: JSON.stringify({ room: 'my-room', user: { display_name: 'John' } }),
+})
+const { token } = await res.json()
+```
+
+---
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcall/sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "xCall SDK — embed video calls in any website",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",