@zoom/meetingsdk 3.11.0 → 3.11.2-zfg

package/README.md

@@ -1,18 +1,16 @@
 # Zoom Meeting SDK for Web
 
-## Zoom Meeting SDK 3.6.0 support Zoom 6.0 UI
+### Breaking change
 
-## React Breaking Change
-## Zoom Meeting SDK 3.5.1 has been updated to support [React 18+](https://react.dev/blog/2022/03/08/react-18-upgrade-guide), which is not compatible with React 16. To continue using React 16, you may use a Meeting SDK version below 3.5.1
-
-
-> Client view:
->
-> `import { ZoomMtg } from "@zoom/meetingsdk"`
->
-> Component view:
->
-> `import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded"`
+Change [@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk) to [@zoom/meetingsdk](https://www.npmjs.com/package/@zoom/meetingsdk)
+### Client view
+```javascript
+	import { ZoomMtg } from "@zoom/meetingsdk";
+```
+### Component view
+```javascript
+	import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded";
+```
 
 Use of this SDK is subject to our [Terms of Use](https://zoom.us/docs/en-us/zoom_api_license_and_tou.html)
 
@@ -34,14 +32,12 @@ There are two views to choose from, [Component View](#usage-component-view), and
 
 > The Component View provides the option to display the Meeting SDK in components on your page. This allows for a more flexible design.
 
-In the component file where you want to use the Meeting SDK, import `ZoomMtgEmbedded`, create the client, and define the HTML element where you want to render the Meeting SDK.
+In the component file where you want to use the Meeting SDK, import `ZoomMtgEmbedded` and create the client.
 
 ```js
 import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded"
 
 const client = ZoomMtgEmbedded.createClient()
-
-let meetingSDKElement = document.getElementById('meetingSDKElement')
 ```
 
 In the HTML file, set an id attribute on the HTML element where you want to render the Meeting SDK. It will be hidden until you start or join a meeting or webinar.
@@ -52,6 +48,14 @@ In the HTML file, set an id attribute on the HTML element where you want to rend
 </div>
 ```
 
+Back in the component file, init the Meeting SDK with the HTML element above:
+
+```js
+let meetingSDKElement = document.getElementById('meetingSDKElement')
+
+client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US' })
+```
+
 Now we will start or join the meeting or webinar. Here are the required properties for the `client.join()` function. You can get the Meeting or Webinar number and passcode from the [Zoom APIs](https://developers.zoom.us/docs/meeting-sdk/web/component-view/).
 
 | Key  | 	Value Description  |
@@ -65,27 +69,15 @@ Now we will start or join the meeting or webinar. Here are the required properti
 | `tk`  | Required if your Meeting or Webinar requires [registration](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). The registrant's token. |
 | `zak`  | Required if you are starting a Meeting or Webinar. The host's [Zoom Access Key (ZAK)](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token).  |
 
-Then, init, and start or join the meeting or webinar.
+Then, start or join the meeting or webinar.
 
 ```js
-client.init({
-  zoomAppRoot: meetingSDKElement,
-  language: 'en-US',
-  patchJsMedia: true
-}).then(() => {
-  client.join({
-    sdkKey: sdkKey,
-    signature: signature,
-    meetingNumber: meetingNumber,
-    password: password,
-    userName: userName
-  }).then(() => {
-    console.log('joined successfully')
-  }).catch((error) => {
-    console.log(error)
-  })
-}).catch((error) => {
-  console.log(error)
+client.join({
+   sdkKey: sdkKey,
+   signature: signature,
+   meetingNumber: meetingNumber,
+   password: password,
+   userName: userName
 })
 ```
 
@@ -97,17 +89,32 @@ For the full list of features and event listeners, as well as additional guides,
 
 > The Client View provides the option to display the Meeting SDK as a full page. This allows for a familiar Zoom Meeting experience because the Client View is the same as the [Zoom Web Client](https://support.zoom.us/hc/en-us/articles/214629443-Zoom-Web-Client), except it lives inside your own web page.
 
-In the component file where you want to use the Meeting SDK, import `ZoomMtg` and call the `preLoadWasm()`, and `prepareWebSDK()` functions.
+In the component file where you want to use the Meeting SDK, import `ZoomMtg` and call the `preLoadWasm()`, `prepareWebSDK()`, and `setZoomJSLib()` functions.
 
 ```js
 import { ZoomMtg } from '@zoom/meetingsdk'
 
 ZoomMtg.preLoadWasm()
 ZoomMtg.prepareWebSDK()
+
+// loads language files, also passes any error messages to the ui
+ZoomMtg.i18n.load('en-US')
 ```
 
 > When imported, the Meeting SDK adds new elements to the DOM to handle client overlays and accessibility elements. To manage or manipulate this DOM element within your app [see this guide](https://developers.zoom.us/docs/meeting-sdk/web/client-view/import/#appended-dom-elements).
 
+Add the following styles to the HTML page you want the Meeting SDK to live on, or `index.html` if you are using a single page app framework.
+
+```html
+<head>
+  <!-- For Client View -->
+  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/{VERSION_NUMBER}/css/bootstrap.css" />
+  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/{VERSION_NUMBER}/css/react-select.css" />
+</head>
+```
+
+> Replace `{VERSION_NUMBER}` in the code above with the [latest version number](https://developers.zoom.us/changelog/meeting-sdk/web/).
+
 Back in the component file we will init and start or join the meeting or webinar. Here are the required properties for the `ZoomMtg.init()` function.
 
 | Key  | 	Value Description  |
@@ -132,9 +139,9 @@ Then, init, and start or join the meeting or webinar.
 ```js
 ZoomMtg.init({
   leaveUrl: leaveUrl,
-  patchJsMedia: true,
   success: (success) => {
     console.log(success)
+
     ZoomMtg.join({
       signature: signature,
       meetingNumber: meetingNumber,
@@ -149,6 +156,7 @@ ZoomMtg.init({
         console.log(error)
       }
     })
+
   },
   error: (error) => {
     console.log(error)
@@ -168,30 +176,6 @@ For the full list of features and event listeners, as well as additional guides,
 - [Meeting SDK Auth Sample (Node.js)](https://github.com/zoom/meetingsdk-sample-signature-node.js)
 - [Webhook Sample (Node.js)](https://github.com/zoom/webhook-sample-node.js)
 
-## Use ZFG(Zoom For Government). You need apply new sdk key for [ZFG](https://marketplace.zoomgov.com/).
-### option1 change package.json and use zfg specific version
-```
-"@zoom/meetingsdk": "3.7.0-zfg"
-```
-
-### option2 change webEndpoint use ZFG [Client View](https://marketplacefront.zoom.us/sdk/meeting/web/functions/ZoomMtg.init.html) [Component View](https://marketplacefront.zoom.us/sdk/meeting/web/components/interfaces/InitOptions.html#webEndpoint) 
-```
-#Client view
-ZoomMtg.setZoomJSLib("https://source.zoomgov.com/{VERSION}/lib", "/av");
-ZoomMtg.init({
-   webEndpoint: "www.zoomgov.com",
-});
-
-#Component view
-const client = ZoomMtgEmbedded.createClient();
-client.init({
- assetPath: 'https://source.zoomgov.com/{VERSION}/lib/av',
- webEndpoint: "www.zoomgov.com"});
-
-```
-
 ## Need help?
 
-If you're looking for help, try [Developer Support](https://devsupport.zoom.us) or our [Developer Forum](https://devforum.zoom.us). Priority support is also available with [Premier Developer Support](https://zoom.us/docs/en-us/developer-support-plans.html) plans.
-
-[Open Source Software attribution](https://github.com/zoom/meetingsdk-web/blob/master/oss_attribution.txt)
+If you're looking for help, try [Developer Support](https://devsupport.zoom.us) or our [Developer Forum](https://devforum.zoom.us). Priority support is also available with [Premier Developer Support](https://zoom.us/docs/en-us/developer-support-plans.html) plans.