@xcall/sdk 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -0
- package/dist/xcall.min.js.map +1 -1
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# @xcall/sdk
|
|
2
|
+
|
|
3
|
+
Embed video calls in any website with a single JavaScript class.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xcall/sdk
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## How it works
|
|
12
|
+
|
|
13
|
+
1. Your backend generates a JWT token using the xCall API
|
|
14
|
+
2. You pass that token to the SDK
|
|
15
|
+
3. The SDK mounts a secure video call inside any HTML element
|
|
16
|
+
|
|
17
|
+
The token carries all configuration: room, user, branding, permissions. Your secret keys never reach the frontend.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
### React
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { useEffect, useRef } from 'react'
|
|
27
|
+
import { XCall } from '@xcall/sdk'
|
|
28
|
+
|
|
29
|
+
export function VideoCall({ token }: { token: string }) {
|
|
30
|
+
const containerRef = useRef<HTMLDivElement>(null)
|
|
31
|
+
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (!containerRef.current) return
|
|
34
|
+
|
|
35
|
+
const call = new XCall({
|
|
36
|
+
container: containerRef.current,
|
|
37
|
+
token,
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
call.on('joined', ({ roomId }) => console.log('joined', roomId))
|
|
41
|
+
call.on('left', ({ roomId }) => console.log('left', roomId))
|
|
42
|
+
call.on('error', ({ message }) => console.error(message))
|
|
43
|
+
|
|
44
|
+
return () => call.destroy()
|
|
45
|
+
}, [token])
|
|
46
|
+
|
|
47
|
+
return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
### Vue
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<template>
|
|
57
|
+
<div ref="callContainer" style="width:100%;height:600px" />
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script setup>
|
|
61
|
+
import { XCall } from '@xcall/sdk'
|
|
62
|
+
import { ref, onMounted, onUnmounted } from 'vue'
|
|
63
|
+
|
|
64
|
+
const props = defineProps(['token'])
|
|
65
|
+
const callContainer = ref(null)
|
|
66
|
+
let call
|
|
67
|
+
|
|
68
|
+
onMounted(() => {
|
|
69
|
+
call = new XCall({ container: callContainer.value, token: props.token })
|
|
70
|
+
call.on('left', () => console.log('left'))
|
|
71
|
+
})
|
|
72
|
+
|
|
73
|
+
onUnmounted(() => call?.destroy())
|
|
74
|
+
</script>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
### Angular
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
import { Component, ElementRef, ViewChild, Input, OnDestroy, AfterViewInit } from '@angular/core'
|
|
83
|
+
import { XCall } from '@xcall/sdk'
|
|
84
|
+
|
|
85
|
+
@Component({
|
|
86
|
+
selector: 'app-call',
|
|
87
|
+
template: '<div #container style="width:100%;height:600px"></div>',
|
|
88
|
+
})
|
|
89
|
+
export class CallComponent implements AfterViewInit, OnDestroy {
|
|
90
|
+
@ViewChild('container') container!: ElementRef
|
|
91
|
+
@Input() token!: string
|
|
92
|
+
private call!: XCall
|
|
93
|
+
|
|
94
|
+
ngAfterViewInit() {
|
|
95
|
+
this.call = new XCall({ container: this.container.nativeElement, token: this.token })
|
|
96
|
+
this.call.on('left', () => console.log('left'))
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
ngOnDestroy() {
|
|
100
|
+
this.call?.destroy()
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
### HTML / CDN
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<div id="call" style="width:100%;height:600px"></div>
|
|
111
|
+
|
|
112
|
+
<script src="https://cdn.jsdelivr.net/npm/@xcall/sdk/dist/xcall.min.js"></script>
|
|
113
|
+
<script>
|
|
114
|
+
const call = new XCallSDK.XCall({
|
|
115
|
+
container: '#call',
|
|
116
|
+
token: 'YOUR_TOKEN_HERE',
|
|
117
|
+
})
|
|
118
|
+
|
|
119
|
+
call.on('left', () => console.log('left'))
|
|
120
|
+
</script>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## API
|
|
126
|
+
|
|
127
|
+
### `new XCall(options)`
|
|
128
|
+
|
|
129
|
+
| Option | Type | Required | Description |
|
|
130
|
+
|---|---|---|---|
|
|
131
|
+
| `container` | `HTMLElement \| string` | ✅ | Element or CSS selector where the call will mount |
|
|
132
|
+
| `token` | `string` | ✅ | JWT token generated by your backend |
|
|
133
|
+
| `roomUrl` | `string` | — | Custom xCall-room URL (default: `https://room.xcall.com.br`) |
|
|
134
|
+
| `iframeStyle` | `object` | — | Extra CSS styles applied to the iframe |
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
### Events
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
call.on('ready', () => void)
|
|
142
|
+
call.on('joined', ({ roomId, userId }) => void)
|
|
143
|
+
call.on('left', ({ roomId, reason? }) => void)
|
|
144
|
+
call.on('participant_joined',({ userId, displayName? }) => void)
|
|
145
|
+
call.on('participant_left', ({ userId }) => void)
|
|
146
|
+
call.on('error', ({ code, message }) => void)
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### Methods
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
call.muteAudio(true) // mute / unmute microphone
|
|
155
|
+
call.muteVideo(false) // mute / unmute camera
|
|
156
|
+
call.leave() // end the call programmatically
|
|
157
|
+
call.destroy() // remove iframe and listeners (use on component unmount)
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Token generation
|
|
163
|
+
|
|
164
|
+
Tokens must be generated server-side. Never expose your API secret on the frontend.
|
|
165
|
+
|
|
166
|
+
```ts
|
|
167
|
+
// Example: Node.js backend
|
|
168
|
+
const res = await fetch('https://api.xcall.com.br/session', {
|
|
169
|
+
method: 'POST',
|
|
170
|
+
headers: { 'x-api-key': process.env.XCALL_SECRET },
|
|
171
|
+
body: JSON.stringify({ room: 'my-room', user: { display_name: 'John' } }),
|
|
172
|
+
})
|
|
173
|
+
const { token } = await res.json()
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## License
|
|
179
|
+
|
|
180
|
+
MIT
|
package/dist/xcall.min.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type {\n XCallOptions,\n XCallEventName,\n XCallEventCallback,\n XCallEventMap,\n XCallCommand,\n XCallIncomingMessage,\n} from './types'\n\nexport * from './types'\n\nconst DEFAULT_ROOM_URL = 'https://room.xcall.com.br'\n\nexport class XCall {\n private iframe: HTMLIFrameElement\n private origin: string\n private listeners: Partial<{\n [K in XCallEventName]: Set<XCallEventCallback<K>>\n }> = {}\n private messageHandler: (e: MessageEvent) => void\n\n constructor(options: XCallOptions) {\n const container =\n typeof options.container === 'string'\n ? (document.querySelector(options.container) as HTMLElement | null)\n : options.container\n\n if (!container) throw new Error('[xCall] container not found')\n\n const base = options.roomUrl ?? DEFAULT_ROOM_URL\n // Remove trailing slash para evitar URL duplo\n this.origin = new URL(base).origin\n\n this.iframe = this._createIframe(base, options)\n this._applyStyles(this.iframe, options.iframeStyle)\n\n container.appendChild(this.iframe)\n\n // ── Listener global de mensagens ──────────────────────────────────────\n this.messageHandler = (e: MessageEvent) => {\n if (e.origin !== this.origin) return\n this._handleMessage(e.data as XCallIncomingMessage, options.token)\n }\n window.addEventListener('message', this.messageHandler)\n }\n\n // ── Criar iframe limpo (sem token na URL) ─────────────────────────────────\n private _createIframe(\n base: string,\n options: XCallOptions\n ): HTMLIFrameElement {\n const el = document.createElement('iframe')\n // Sem ?token= na URL — o token é enviado via postMessage após xcall:ready\n el.src = base.replace(/\\/$/, '')\n el.allow =\n 'camera; microphone; display-capture; autoplay; clipboard-write; fullscreen'\n el.style.border = 'none'\n el.style.width = '100%'\n el.style.height = '100%'\n return el\n }\n\n private _applyStyles(\n iframe: HTMLIFrameElement,\n style?: Partial<CSSStyleDeclaration>\n ) {\n if (!style) return\n for (const [key, value] of Object.entries(style)) {\n ;(iframe.style as unknown as Record<string, string>)[key] = value as string\n }\n }\n\n // ── Roteador de mensagens recebidas ──────────────────────────────────────\n private _handleMessage(msg: XCallIncomingMessage, token: string) {\n switch (msg.type) {\n case 'xcall:ready':\n // Envia o token de forma segura via postMessage\n this._send({ type: 'xcall:token', token })\n this._emit('ready', undefined as void)\n break\n case 'xcall:joined':\n this._emit('joined', { roomId: msg.roomId, userId: msg.userId })\n break\n case 'xcall:left':\n this._emit('left', { roomId: msg.roomId, reason: msg.reason })\n break\n case 'xcall:participant_joined':\n this._emit('participant_joined', {\n userId: msg.userId,\n displayName: msg.displayName,\n })\n break\n case 'xcall:participant_left':\n this._emit('participant_left', { userId: msg.userId })\n break\n case 'xcall:error':\n this._emit('error', { code: msg.code, message: msg.message })\n break\n }\n }\n\n // ── API pública ──────────────────────────────────────────────────────────\n\n on<K extends XCallEventName>(event: K, cb: XCallEventCallback<K>): this {\n if (!this.listeners[event]) {\n this.listeners[event] = new Set() as never\n }\n ;(this.listeners[event] as Set<XCallEventCallback<K>>).add(cb)\n return this\n }\n\n off<K extends XCallEventName>(event: K, cb: XCallEventCallback<K>): this {\n ;(this.listeners[event] as Set<XCallEventCallback<K>> | undefined)?.delete(cb)\n return this\n }\n\n muteAudio(muted: boolean) {\n this._send({ type: 'xcall:mute_audio', muted })\n }\n\n muteVideo(muted: boolean) {\n this._send({ type: 'xcall:mute_video', muted })\n }\n\n leave() {\n this._send({ type: 'xcall:leave' })\n }\n\n /** Remove o iframe e os listeners. Chame quando destruir o componente. */\n destroy() {\n window.removeEventListener('message', this.messageHandler)\n this.iframe.remove()\n }\n\n // ── Helpers privados ─────────────────────────────────────────────────────\n\n private _send(cmd: XCallCommand) {\n this.iframe.contentWindow?.postMessage(cmd, this.origin)\n }\n\n private _emit<K extends XCallEventName>(event: K, data: XCallEventMap[K]) {\n const handlers = this.listeners[event] as\n | Set<XCallEventCallback<K>>\n | undefined\n handlers?.forEach((cb) => cb(data))\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type {\n XCallOptions,\n XCallEventName,\n XCallEventCallback,\n XCallEventMap,\n XCallCommand,\n XCallIncomingMessage,\n} from './types'\n\nexport * from './types'\n\nconst DEFAULT_ROOM_URL = 'https://room.xcall.com.br'\n\nexport class XCall {\n private iframe: HTMLIFrameElement\n private origin: string\n private listeners: Partial<{\n [K in XCallEventName]: Set<XCallEventCallback<K>>\n }> = {}\n private messageHandler: (e: MessageEvent) => void\n\n constructor(options: XCallOptions) {\n const container =\n typeof options.container === 'string'\n ? (document.querySelector(options.container) as HTMLElement | null)\n : options.container\n\n if (!container) throw new Error('[xCall] container not found')\n\n const base = options.roomUrl ?? DEFAULT_ROOM_URL\n // Remove trailing slash para evitar URL duplo\n this.origin = new URL(base).origin\n\n this.iframe = this._createIframe(base, options)\n this._applyStyles(this.iframe, options.iframeStyle)\n\n container.appendChild(this.iframe)\n\n // ── Listener global de mensagens ──────────────────────────────────────\n this.messageHandler = (e: MessageEvent) => {\n if (e.origin !== this.origin) return\n this._handleMessage(e.data as XCallIncomingMessage, options.token)\n }\n window.addEventListener('message', this.messageHandler)\n }\n\n // ── Criar iframe limpo (sem token na URL) ─────────────────────────────────\n private _createIframe(\n base: string,\n options: XCallOptions\n ): HTMLIFrameElement {\n const el = document.createElement('iframe')\n // Sem ?token= na URL — o token é enviado via postMessage após xcall:ready\n el.src = base.replace(/\\/$/, '')\n el.allow =\n 'camera; microphone; display-capture; autoplay; clipboard-write; fullscreen'\n el.style.border = 'none'\n el.style.width = '100%'\n el.style.height = '100%'\n return el\n }\n\n private _applyStyles(\n iframe: HTMLIFrameElement,\n style?: Partial<CSSStyleDeclaration>\n ) {\n if (!style) return\n for (const [key, value] of Object.entries(style)) {\n ;(iframe.style as unknown as Record<string, string>)[key] = value as string\n }\n }\n\n // ── Roteador de mensagens recebidas ──────────────────────────────────────\n private _handleMessage(msg: XCallIncomingMessage, token: string) {\n switch (msg.type) {\n case 'xcall:ready':\n // Envia o token de forma segura via postMessage\n this._send({ type: 'xcall:token', token })\n this._emit('ready', undefined as void)\n break\n case 'xcall:joined':\n this._emit('joined', { roomId: msg.roomId, userId: msg.userId })\n break\n case 'xcall:left':\n this._emit('left', { roomId: msg.roomId, reason: msg.reason })\n break\n case 'xcall:participant_joined':\n this._emit('participant_joined', {\n userId: msg.userId,\n displayName: msg.displayName,\n })\n break\n case 'xcall:participant_left':\n this._emit('participant_left', { userId: msg.userId })\n break\n case 'xcall:error':\n this._emit('error', { code: msg.code, message: msg.message })\n break\n }\n }\n\n // ── API pública ──────────────────────────────────────────────────────────\n\n on<K extends XCallEventName>(event: K, cb: XCallEventCallback<K>): this {\n if (!this.listeners[event]) {\n this.listeners[event] = new Set() as never\n }\n ;(this.listeners[event] as Set<XCallEventCallback<K>>).add(cb)\n return this\n }\n\n off<K extends XCallEventName>(event: K, cb: XCallEventCallback<K>): this {\n ;(this.listeners[event] as Set<XCallEventCallback<K>> | undefined)?.delete(cb)\n return this\n }\n\n muteAudio(muted: boolean) {\n this._send({ type: 'xcall:mute_audio', muted })\n }\n\n muteVideo(muted: boolean) {\n this._send({ type: 'xcall:mute_video', muted })\n }\n\n leave() {\n this._send({ type: 'xcall:leave' })\n }\n\n /** Remove o iframe e os listeners. Chame quando destruir o componente. */\n destroy() {\n window.removeEventListener('message', this.messageHandler)\n this.iframe.remove()\n }\n\n // ── Helpers privados ─────────────────────────────────────────────────────\n\n private _send(cmd: XCallCommand) {\n this.iframe.contentWindow?.postMessage(cmd, this.origin)\n }\n\n private _emit<K extends XCallEventName>(event: K, data: XCallEventMap[K]) {\n const handlers = this.listeners[event] as\n | Set<XCallEventCallback<K>>\n | undefined\n handlers?.forEach((cb) => cb(data))\n }\n}\n"],"mappings":"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","names":["src_exports","__export","XCall","__toCommonJS","DEFAULT_ROOM_URL","options","_a","container","base","e","el","iframe","style","key","value","msg","token","event","cb","muted","cmd","data","handlers"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xcall/sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "xCall SDK — embed video calls in any website",
|
|
5
|
-
"main": "dist/
|
|
6
|
-
"module": "dist/
|
|
7
|
-
"types": "dist/
|
|
5
|
+
"main": "dist/xcall.min.js",
|
|
6
|
+
"module": "dist/xcall.min.esm.js",
|
|
7
|
+
"types": "dist/xcall.min.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|