diff --git a/.styles/Vocab/Base/accept.txt b/.styles/Vocab/Base/accept.txt index 98c343f1c6..f09128f696 100644 --- a/.styles/Vocab/Base/accept.txt +++ b/.styles/Vocab/Base/accept.txt @@ -92,3 +92,4 @@ proxied enum everytime telemedicine +realtime diff --git a/packages/client/docusaurus/docs/javascript/01-basics/02-installation.mdx b/packages/client/docusaurus/docs/javascript/01-basics/02-installation.mdx index 3bdfa44800..3486faa68d 100644 --- a/packages/client/docusaurus/docs/javascript/01-basics/02-installation.mdx +++ b/packages/client/docusaurus/docs/javascript/01-basics/02-installation.mdx @@ -1,9 +1,9 @@ --- -title: Installation -description: Install the client for video calling +title: Installation & Size +description: Installation instructions and bundle size impact for the Plain-JS Video SDK --- -The installation of the packages for the Stream Video JavaScript Client can be either done with `yarn` or `npm`. +The installation of the packages for the Stream Video Plain-JS SDK can be either done with `yarn`, `npm` or any other package manager. For `yarn`: @@ -16,3 +16,10 @@ For `npm`: ```bash npm install @stream-io/video-client ``` + +## SDK Size + +The SDK size after minification is below 370KB. This size includes all the functionalities provided by the SDK. +After g-zipping, the SDK size can be compressed down to ~100KB. + +For most up-to-date information on the SDK size, please check the [package size](https://bundlephobia.com/result?p=@stream-io/video-client) on Bundlephobia. diff --git a/packages/client/docusaurus/docs/javascript/01-basics/04-supported-platforms.mdx b/packages/client/docusaurus/docs/javascript/01-basics/04-supported-platforms.mdx new file mode 100644 index 0000000000..8039276193 --- /dev/null +++ b/packages/client/docusaurus/docs/javascript/01-basics/04-supported-platforms.mdx @@ -0,0 +1,15 @@ +--- +title: Supported Platforms and Size +description: A list of supported platforms and SDK size information +--- + +Our Plain-JS Video SDK can run on all modern browsers and platforms. Here is a list of supported platforms: + +- Chrome 91+ +- Firefox 89+ +- Edge 91+ +- Safari and Mobile Safari 15+ + +## WebView + +Our SDK can run in Web View on Android and iOS. However, we recommend using the SDK in a browser for the best experience. diff --git a/packages/client/docusaurus/docs/javascript/02-guides/09-reactions-and-custom-events.mdx b/packages/client/docusaurus/docs/javascript/02-guides/09-reactions.mdx similarity index 69% rename from packages/client/docusaurus/docs/javascript/02-guides/09-reactions-and-custom-events.mdx rename to packages/client/docusaurus/docs/javascript/02-guides/09-reactions.mdx index 20c6c958c9..332f639b1c 100644 --- a/packages/client/docusaurus/docs/javascript/02-guides/09-reactions-and-custom-events.mdx +++ b/packages/client/docusaurus/docs/javascript/02-guides/09-reactions.mdx @@ -1,6 +1,6 @@ --- -title: Reactions & Custom Events -description: How reactions and custom events work +title: Reactions +description: How reactions work --- Reactions allow call participants to send emojis in real-time. @@ -50,6 +50,8 @@ const { participants } = call.state; const reactions = participants.map((p) => p.reaction); ``` +You can also subscribe to the `call.reaction_new` WebSocket event to receive reactions. For more information, check out our [Events guide](../../advanced/events). + ### Clearing reactions If you're using the [participant state](../../guides/call-and-participant-state/#observe-participant-state) for receiving reactions, you can also clear the latest reaction using the `resetReaction` method: @@ -62,39 +64,3 @@ call.resetReaction(participants[0].sessionId); ``` This is a local action, it won't send any WebSocket messages. It's helpful if you only want to display reactions for a set period of time. - -## Custom events - -### Sending custom events - -You can use the `sendCustomEvent` method of the `Call` instance to send custom events: - -```typescript -const call: Call; - -await call.sendCustomEvent({ - type: 'draw', - x: 10, - y: 30, -}); -``` - -The `custom` property can contain any data. - -### Receiving custom events - -Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). - -To receive custom events, you need to subscribe to the `custom` WebSocket event: - -```typescript -const call: Call; - -call.on('custom', (event: StreamCallEvent) => { - if (event.type === 'custom') { - console.log(`Custom event: ${event.custom.type}`); - } -}); -``` - -For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/client/docusaurus/docs/javascript/02-guides/10-custom-events.mdx b/packages/client/docusaurus/docs/javascript/02-guides/10-custom-events.mdx new file mode 100644 index 0000000000..99d6354c14 --- /dev/null +++ b/packages/client/docusaurus/docs/javascript/02-guides/10-custom-events.mdx @@ -0,0 +1,41 @@ +--- +title: Custom Events +description: How custom events work +--- + +You can use custom events to send data among the participants in the call. +This is a realtime layer that you can use to broadcast your own events to. + +## Sending custom events + +For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code: + +```typescript +await call.sendCustomEvent({ + type: 'draw', + x: 10, + y: 30, +}); +``` + +Please note that the total payload for these events is limited to 5KB in size. + +## Receiving custom events + +Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). + +To receive custom events, you need to subscribe to the `custom` event on the call instance: + +```typescript +const unsubscribe = call.on('custom', (event: CustomVideoEvent) => { + const payload = event.custom; + if (payload.type === 'draw') { + console.log(`Received draw event: x=${payload.x}, y=${payload.y}`); + } +}); + +// Unsubscribe when you no longer need to listen to custom events +unsubscribe(); +``` + +For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx b/packages/client/docusaurus/docs/javascript/10-advanced/04-screensharing.mdx similarity index 91% rename from packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx rename to packages/client/docusaurus/docs/javascript/10-advanced/04-screensharing.mdx index 68343e5e8b..a0eef95340 100644 --- a/packages/client/docusaurus/docs/javascript/02-guides/04-screensharing.mdx +++ b/packages/client/docusaurus/docs/javascript/10-advanced/04-screensharing.mdx @@ -11,6 +11,11 @@ If you want to see the device management API in action, you can check out [the s Our Video SDK provides an easy ways to enable screensharing in your application. In the following examples, we would learn to control and configure screen sharing. +:::note +Screen Sharing is supported only on Desktop browsers. For more details, +please refer to the [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility) section. +::: + For a user to be able to share their screen, they must have the `screenshare` capability (provided through the `Screenshare` permission) configured for the call they are in. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions.mdx similarity index 71% rename from packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx rename to packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions.mdx index deb0b09f1c..7980b30c1e 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions.mdx @@ -1,6 +1,6 @@ --- -title: Reactions & Custom Events -description: How reactions and custom events work +title: Reactions +description: How reactions work --- Reactions allow call participants to send emojis in real-time. @@ -20,7 +20,7 @@ You can send a reaction using the `sendReaction` method of a `Call` instance. ```typescript const call: Call; -call.sendReaction({ type: 'raised-hand' }); +await call.sendReaction({ type: 'raised-hand' }); ``` The value of the `type` attribute can be any string. @@ -30,7 +30,7 @@ It's also possible to provide additional data for the reaction: ```typescript const call: Call; -call.sendReaction({ +await call.sendReaction({ type: 'raised-hand', emoji_code: ':raise-hand:', custom: { clearAfterTimeout: true }, @@ -69,42 +69,3 @@ call.resetReaction(participants[0].sessionId); ``` This is a local action, it won't send any WebSocket messages. It's helpful if you only want to display reactions for a set period of time. - -## Custom events - -### Sending custom events - -You can use the `sendEvent` method of the `Call` instance to send custom events: - -```typescript -const call: Call; - -call.sendEvent({ - type: 'custom', - custom: { - type: 'draw', - x: 10, - y: 30, - }, -}); -``` - -The `custom` property can contain any data. - -### Receiving custom events - -Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). - -To receive custom events, you need to subscribe to the `custom` WebSocket event: - -```typescript -const call: Call; - -call.on('custom', (event: StreamCallEvent) => { - if (event.type === 'custom') { - console.log(`Custom event: ${event.custom.type}`); - } -}); -``` - -For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-custom-events.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-custom-events.mdx new file mode 100644 index 0000000000..99d6354c14 --- /dev/null +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/11-custom-events.mdx @@ -0,0 +1,41 @@ +--- +title: Custom Events +description: How custom events work +--- + +You can use custom events to send data among the participants in the call. +This is a realtime layer that you can use to broadcast your own events to. + +## Sending custom events + +For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code: + +```typescript +await call.sendCustomEvent({ + type: 'draw', + x: 10, + y: 30, +}); +``` + +Please note that the total payload for these events is limited to 5KB in size. + +## Receiving custom events + +Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). + +To receive custom events, you need to subscribe to the `custom` event on the call instance: + +```typescript +const unsubscribe = call.on('custom', (event: CustomVideoEvent) => { + const payload = event.custom; + if (payload.type === 'draw') { + console.log(`Received draw event: x=${payload.x}, y=${payload.y}`); + } +}); + +// Unsubscribe when you no longer need to listen to custom events +unsubscribe(); +``` + +For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/react-sdk/docusaurus/docs/React/01-basics/02-installation.mdx b/packages/react-sdk/docusaurus/docs/React/01-basics/02-installation.mdx index c246e28e7d..2914e07fd2 100644 --- a/packages/react-sdk/docusaurus/docs/React/01-basics/02-installation.mdx +++ b/packages/react-sdk/docusaurus/docs/React/01-basics/02-installation.mdx @@ -1,9 +1,9 @@ --- -title: Installation -description: Install the React Video SDK +title: Installation & Size +description: Installation instructions and bundle size impact for the React Video SDK --- -The installation of the packages for the Stream Video React SDK can be either done with `yarn` or `npm`. +The installation of the packages for the Stream Video React SDK can be either done with `yarn`, `npm` or any other package manager. For `yarn`: @@ -16,3 +16,13 @@ For `npm`: ```bash npm install @stream-io/video-react-sdk ``` + +## SDK Size + +Our SDK follows the industry standards and is optimized for tree-shaking. +Modern bundlers like Webpack and Rollup can remove the unused code from the SDK, which helps in reducing the bundle size. + +The SDK size after minification is below 600KB. This size includes all the components and utilities provided by the SDK. +After g-zipping, the SDK can be compressed down to ~165KB. The actual size of the SDK in your application will depend on the components you use. + +For most up-to-date information on the SDK size, please check the [package size](https://bundlephobia.com/result?p=@stream-io/video-react-sdk) on Bundlephobia. diff --git a/packages/react-sdk/docusaurus/docs/React/01-basics/04-supported-platforms.mdx b/packages/react-sdk/docusaurus/docs/React/01-basics/04-supported-platforms.mdx new file mode 100644 index 0000000000..4151872ebe --- /dev/null +++ b/packages/react-sdk/docusaurus/docs/React/01-basics/04-supported-platforms.mdx @@ -0,0 +1,15 @@ +--- +title: Supported Platforms +description: A list of supported platforms and SDK size information +--- + +Our React Video SDK can run on all modern browsers and platforms. Here is a list of supported platforms: + +- Chrome 91+ +- Firefox 89+ +- Edge 91+ +- Safari and Mobile Safari 15+ + +## WebView + +Our SDK can run in Web View on Android and iOS. However, we recommend using the SDK in a browser for the best experience. diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions-and-custom-events.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions.mdx similarity index 73% rename from packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions-and-custom-events.mdx rename to packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions.mdx index 5ad0ddc797..8f7ce94233 100644 --- a/packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions-and-custom-events.mdx +++ b/packages/react-sdk/docusaurus/docs/React/02-guides/09-reactions.mdx @@ -1,6 +1,6 @@ --- -title: Reactions & Custom Events -description: How reactions and custom events work +title: Reactions +description: How reactions work --- Reactions allow call participants to send emojis in real-time. @@ -71,39 +71,3 @@ call.resetReaction(participants[0].sessionId); ``` This is a local action, it won't send any WebSocket messages. It's helpful if you only want to display reactions for a set period of time. - -## Custom events - -### Sending custom events - -You can use the `sendCustomEvent` method of the `Call` instance to send custom events: - -```typescript -const call: Call; - -await call.sendCustomEvent({ - type: 'draw', - x: 10, - y: 30, -}); -``` - -The `custom` property can contain any data. - -### Receiving custom events - -Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). - -To receive custom events, you need to subscribe to the `custom` WebSocket event: - -```typescript -const call: Call; - -call.on('custom', (event: StreamCallEvent) => { - if (event.type === 'custom') { - console.log(`Custom event: ${event.custom.type}`); - } -}); -``` - -For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/10-custom-events.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/10-custom-events.mdx new file mode 100644 index 0000000000..99d6354c14 --- /dev/null +++ b/packages/react-sdk/docusaurus/docs/React/02-guides/10-custom-events.mdx @@ -0,0 +1,41 @@ +--- +title: Custom Events +description: How custom events work +--- + +You can use custom events to send data among the participants in the call. +This is a realtime layer that you can use to broadcast your own events to. + +## Sending custom events + +For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code: + +```typescript +await call.sendCustomEvent({ + type: 'draw', + x: 10, + y: 30, +}); +``` + +Please note that the total payload for these events is limited to 5KB in size. + +## Receiving custom events + +Custom events are only delivered to clients that are [watching the call](../../advanced/events/#call-events). + +To receive custom events, you need to subscribe to the `custom` event on the call instance: + +```typescript +const unsubscribe = call.on('custom', (event: CustomVideoEvent) => { + const payload = event.custom; + if (payload.type === 'draw') { + console.log(`Received draw event: x=${payload.x}, y=${payload.y}`); + } +}); + +// Unsubscribe when you no longer need to listen to custom events +unsubscribe(); +``` + +For more information, check out our [Events guide](../../advanced/events). diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/11-call-preview-thumbnail.mdx b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/11-call-preview-thumbnail.mdx similarity index 100% rename from packages/react-sdk/docusaurus/docs/React/02-guides/11-call-preview-thumbnail.mdx rename to packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/11-call-preview-thumbnail.mdx diff --git a/packages/react-sdk/docusaurus/docs/React/10-advanced/10-fullscreen-mode.mdx b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-fullscreen-mode.mdx similarity index 100% rename from packages/react-sdk/docusaurus/docs/React/10-advanced/10-fullscreen-mode.mdx rename to packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-fullscreen-mode.mdx diff --git a/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-runtime-layout-switching.mdx b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-runtime-layout-switching.mdx index 84a247af6f..68f9efa432 100644 --- a/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-runtime-layout-switching.mdx +++ b/packages/react-sdk/docusaurus/docs/React/06-ui-cookbook/14-runtime-layout-switching.mdx @@ -34,8 +34,8 @@ const LayoutMap = { export const Stage = () => { const [selectedLayout, setSelectedLayout] = useState('PaginatedGrid'); - const { useHasOngoingScreenshare } = useCallStateHooks(); - const hasOngoingScreenshare = useHasOngoingScreenshare(); + const { useHasOngoingScreenShare } = useCallStateHooks(); + const hasOngoingScreenshare = useHasOngoingScreenShare(); const LayoutComponent = LayoutMap[selectedLayout].component; const componentProps = LayoutMap[selectedLayout].props; diff --git a/packages/react-sdk/docusaurus/docs/React/10-advanced/04-i18n.mdx b/packages/react-sdk/docusaurus/docs/React/10-advanced/04-i18n.mdx index 0f14ed7ae2..9d53ca9ba7 100644 --- a/packages/react-sdk/docusaurus/docs/React/10-advanced/04-i18n.mdx +++ b/packages/react-sdk/docusaurus/docs/React/10-advanced/04-i18n.mdx @@ -1,6 +1,6 @@ --- id: i18n -title: Internationalization +title: Localization --- The SDK comes with a built-in translation service powered internally by the [`i18next`](https://www.i18next.com/) library. The main focus of the service is to provide support for: diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/04-screensharing.mdx b/packages/react-sdk/docusaurus/docs/React/10-advanced/04-screensharing.mdx similarity index 92% rename from packages/react-sdk/docusaurus/docs/React/02-guides/04-screensharing.mdx rename to packages/react-sdk/docusaurus/docs/React/10-advanced/04-screensharing.mdx index 6ca3dff349..ed9dfc08f5 100644 --- a/packages/react-sdk/docusaurus/docs/React/02-guides/04-screensharing.mdx +++ b/packages/react-sdk/docusaurus/docs/React/10-advanced/04-screensharing.mdx @@ -8,6 +8,10 @@ description: Managing Screen Sharing Our Video SDK provides an easy ways to enable screensharing in your application. In the following examples, we would learn to control and configure screen sharing. +:::note +Screen Sharing is supported only on Desktop browsers. For more details, +please refer to the [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#browser_compatibility) section. +::: For a user to be able to share their screen, they must have the `screenshare` capability (provided through the `Screenshare` permission) configured for the call they are in. diff --git a/packages/react-sdk/docusaurus/docs/React/10-advanced/05-join-from-link.mdx b/packages/react-sdk/docusaurus/docs/React/10-advanced/05-join-from-link.mdx index 6c4790f73b..6f237d9880 100644 --- a/packages/react-sdk/docusaurus/docs/React/10-advanced/05-join-from-link.mdx +++ b/packages/react-sdk/docusaurus/docs/React/10-advanced/05-join-from-link.mdx @@ -1,5 +1,5 @@ --- -title: Joining a call from a link +title: Joining a call from a link (Deeplinking) description: Learn how you can add a flow where users can join from a link. --- diff --git a/packages/react-sdk/docusaurus/docs/React/10-advanced/06-apply-video-filters.mdx b/packages/react-sdk/docusaurus/docs/React/10-advanced/06-apply-video-filters.mdx index f4aac54b28..6ca6547b14 100644 --- a/packages/react-sdk/docusaurus/docs/React/10-advanced/06-apply-video-filters.mdx +++ b/packages/react-sdk/docusaurus/docs/React/10-advanced/06-apply-video-filters.mdx @@ -133,6 +133,4 @@ const call = useCall(); ## Audio Filters -An example is coming soon... - -In the meantime, you can use the [`microphone.registerFilter()`](../02-guides/04-camera-and-microphone.mdx#camera-and-microphone-filters) API to register custom audio filters. +Check the [`microphone.registerFilter()`](../02-guides/04-camera-and-microphone.mdx#camera-and-microphone-filters) API to register custom audio filters.