diff --git a/@zoom/videosdk-ui-toolkit/README.md b/@zoom/videosdk-ui-toolkit/README.md index 2c01b2c..86c086b 100644 --- a/@zoom/videosdk-ui-toolkit/README.md +++ b/@zoom/videosdk-ui-toolkit/README.md @@ -1,10 +1,10 @@ -# Zoom Video SDK UI toolkit for web +# Zoom Video SDK UI toolkit Use of this SDK is subject to our [Terms of Use](https://explore.zoom.us/en/video-sdk-terms/). The [Zoom Video SDK UI toolkit](https://developers.zoom.us/docs/video-sdk/web/ui-toolkit/) is a prebuilt video chat user interface powered by the Zoom Video SDK. - + ## Installation @@ -17,7 +17,7 @@ $ npm install @zoom/videosdk-ui-toolkit --save Or, for Vanilla JS applications, download the package and add it to your project. Then, add the following script and CSS style to the HTML page you want the UI toolkit to live on: ```html - + ``` @@ -26,8 +26,8 @@ Or, for Vanilla JS applications, download the package and add it to your project For webpack / single page applications like Angular, Vue, React, etc, import the UI toolkit, package and styles: ```js -import uitoolkit from '@zoom/videosdk-ui-toolkit' -import '@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css' +import uitoolkit from "@zoom/videosdk-ui-toolkit"; +import "@zoom/videosdk-ui-toolkit/dist/videosdk-ui-toolkit.css"; ``` In Angular, CSS can't be imported directly into the component, instead, add the styles to your `angular.json` file in the styles array: @@ -41,7 +41,7 @@ In Angular, CSS can't be imported directly into the component, instead, add the Or, for Vanilla JS applications, import the JS file directly: ```js -import uitoolkit from './@zoom/videosdk-ui-toolkit/index.js' +import uitoolkit from "./@zoom/videosdk-ui-toolkit/index.js"; ``` > [JS imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html) work if your script tag has the `type="module"` attribute. @@ -55,48 +55,29 @@ import uitoolkit from './@zoom/videosdk-ui-toolkit/index.js' To join a Video SDK session, create an HTML container that it will be rendered in: ```html -
+ ``` Create your Video SDK session config object, with your [Video SDK JWT](https://developers.zoom.us/docs/video-sdk/auth/), and [Video SDK session info](https://developers.zoom.us/docs/video-sdk/web/sessions/#prerequisites), the features you want to render, and any options you want to specify. ```js var config = { - videoSDKJWT: '', - sessionName: 'SessionA', - userName: 'UserA', - sessionPasscode: 'abc123', - streamUrl: 'rtmp://a.rtmp.siteofyourchoice.com', - streamKey: 'xxxx-xxxx-xxxx-xxxx', - broadcastUrl: 'https://studio.siteofyourchoice.com/livestreaming', - crDisclaimer: 'Cloud recording disclaimer for the UIToolkit to prompt', - lttDisclaimer: 'Live Transscription and Translation disclaimer for the UIToolkit to prompt', - livestreamDisclaimer: 'Live streaming disclaimer for the UIToolkit to prompt', - disableCaptionsOnJoin: true, - features: ['preview', 'video', 'audio', 'share', 'chat', 'users', 'livestream', 'pstn', 'ltt', 'recording', 'settings', 'feedback'], - options: { init: {}, audio: {}, video: {}, share: {}}, + videoSDKJWT: "", + sessionName: "SessionA", + userName: "UserA", + sessionPasscode: "abc123", + features: ["preview", "video", "audio", "share", "chat", "users", "settings"], + options: { init: {}, audio: {}, video: {}, share: {} }, virtualBackground: { allowVirtualBackground: true, allowVirtualBackgroundUpload: true, - virtualBackgrounds: ['https://images.unsplash.com/photo-1715490187538-30a365fa05bd?q=80&w=1945&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'] - } -} + virtualBackgrounds: [ + "https://images.unsplash.com/photo-1715490187538-30a365fa05bd?q=80&w=1945&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + ], + }, +}; ``` -If you pass a string to the config object disclaimers(cr, ltt, and livestream), you are telling the UIToolkit that it will handle prompting the disclaimers passed when the corresponding event triggers. If you leave the fields empty, the developer is responsible for the disclaimer UI and the prompting these disclaimers when the event is triggered. You can listen for these events and pass in a callback via the code below: - -```js -const client = ZoomVideo.createClient(); - -client.on('recording-change', () => {}); -client.on('caption-status', () => {}); -client.on('live-stream-status', () => {}); -``` - -Because the VideoClient follows the singleton pattern, you can call createClient() to retrieve the same client object the UIToolKit uses to control the underlying Zoom Video SDK. You can then utilize any functions offered by the base Zoom Video SDK. Please note, that certain components in the UIToolKit depend on state stored and passed within its underlying components so calling certain functions outside of the UIToolKit can introduce unexpected behavior in the UI. - - - Currently, we support the following features: | `features[]` | Description | @@ -106,40 +87,34 @@ Currently, we support the following features: | `audio` | Show the audio button on the toolbar, and to send and receive audio. | | `share` | Show the screen share button on the toolbar, and to send and receive screen share content. | | `chat` | Show the chat button on the toolbar, and to send and receive session chats. | -| `livestream` | Show the livestream button on the toolbar to start or end a livestream. | | `users` | Show the users button on the toolbar, and to see the list of users in the session. | -| `pstn` | Show the invite by phone feature in the users interface. | -| `crc` | Show the invite by SIP feature in the users interface. | -| `ltt` | Show the Live Transcription button on the toolbar. The user can start transcription and hide or show the captions. | -| `recording` | Show the Cloud Recording button on the toolbar. | | `settings` | Show the settings button on the toolbar, and to configure virtual background, camera, microphone, and speaker devices, and see session quality statistics. | -| `feedback` | Show the feedback flow after the session is left or ended. The user can rate the session (1-5 stars) and report feedback to Zoom. | We also support setting specific properties for the Video SDK [init](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/InitOptions.html), [audio](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/AudioOption.html), [video](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/CaptureVideoOption.html), and [share](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/ScreenShareOption.html) options. -| `options{}` | Properties | Default | Description | -| ----------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------- | ----------- | -| `init` | `enforceMultipleVideos`