updated for 2.0.1 and added Component View example

tommygaessler · tommygaessler · commit 1bbe5acd2baf · 2021-10-25T10:48:39.000-06:00
diff --git a/README.md b/README.md
@@ -22,7 +22,9 @@ To get started, clone the repo:
 
 1. Open the `meetingsdk-sample-react` directory in your code editor.
 
-1. Open the `src/app.js` file, and enter values for the variables:
+1. Open the `src/App.js` file, and enter values for the variables:
+
+   **NEW:** To use the [Component View](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view), replace `App.js` with `App-New.js`. (The `leaveUrl` is not needed).
 
    | Variable                   | Description |
    | -----------------------|-------------|
@@ -45,10 +47,10 @@ To get started, clone the repo:
    leaveUrl = 'http://localhost:3000'
    userName = 'React'
    userEmail = ''
-   password = ''
+   passWord = ''
    ```
 
-1. Save `app.js`.
+1. Save `App.js`.
 
 1. Run the app:
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "meetingsdk-sample-react",
-  "version": "1.9.9",
+  "version": "2.0.1",
   "author": "Tommy Gaessler",
   "homepage": "",
   "private": true,
diff --git a/public/index.html b/public/index.html
@@ -26,26 +26,27 @@
     -->
     <title>Zoom Meeting SDK Sample React</title>
 
-    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/bootstrap.css" />
-    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.9.9/css/react-select.css" />
+    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.0.1/css/bootstrap.css" />
+    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.0.1/css/react-select.css" />
 
     <!-- Origin Trials to improve SDK performance on Chrome -->
     <!-- More Info: https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation -->
     <!-- SharedArrayBuffers in non-isolated pages on Desktop platforms -->
     <meta http-equiv="origin-trial" content="">
-    <!-- WebAssembly SIMD -->
-    <meta http-equiv="origin-trial" content="">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 
-    <script src="https://source.zoom.us/1.9.9/lib/vendor/react.min.js"></script>
-    <script src="https://source.zoom.us/1.9.9/lib/vendor/react-dom.min.js"></script>
-    <script src="https://source.zoom.us/1.9.9/lib/vendor/redux.min.js"></script>
-    <script src="https://source.zoom.us/1.9.9/lib/vendor/redux-thunk.min.js"></script>
-    <script src="https://source.zoom.us/1.9.9/lib/vendor/lodash.min.js"></script>
-    <script src="https://source.zoom.us/zoom-meeting-1.9.9.min.js"></script>
+    <script src="https://source.zoom.us/2.0.1/lib/vendor/react.min.js"></script>
+    <script src="https://source.zoom.us/2.0.1/lib/vendor/react-dom.min.js"></script>
+    <script src="https://source.zoom.us/2.0.1/lib/vendor/redux.min.js"></script>
+    <script src="https://source.zoom.us/2.0.1/lib/vendor/redux-thunk.min.js"></script>
+    <script src="https://source.zoom.us/2.0.1/lib/vendor/lodash.min.js"></script>
+    <script src="https://source.zoom.us/zoom-meeting-2.0.1.min.js"></script>
+
+    <!-- For Component View -->
+    <script src="https://source.zoom.us/2.0.1/zoom-meeting-embedded-2.0.1.min.js"></script>
 
     <!--
       This HTML file is a template.
diff --git a/src/App-New.js b/src/App-New.js
@@ -0,0 +1,88 @@
+import React from 'react';
+
+import './App.css';
+
+declare var ZoomMtgEmbedded
+
+function App() {
+
+  const client = ZoomMtgEmbedded.createClient();
+
+  // setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
+  var signatureEndpoint = ''
+  var apiKey = ''
+  var meetingNumber = '123456789'
+  var role = 0
+  var userName = 'React'
+  var userEmail = ''
+  var passWord = ''
+
+  function getSignature(e) {
+    e.preventDefault();
+
+    fetch(signatureEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        meetingNumber: meetingNumber,
+        role: role
+      })
+    }).then(res => res.json())
+    .then(response => {
+      startMeeting(response.signature)
+    }).catch(error => {
+      console.error(error)
+    })
+  }
+
+  function startMeeting(signature) {
+
+    let meetingSDKElement = document.getElementById('meetingSDKElement');
+
+    client.init({
+      debug: true,
+      zoomAppRoot: meetingSDKElement,
+      language: 'en-US',
+      customize: {
+        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
+        toolbar: {
+          buttons: [
+            {
+              text: 'Custom Button',
+              className: 'CustomButton',
+              onClick: () => {
+                console.log('custom button');
+              }
+            }
+          ]
+        }
+      }
+    });
+
+    client.join({
+    	apiKey: apiKey,
+    	signature: signature,
+    	meetingNumber: meetingNumber,
+    	password: passWord,
+    	userName: userName,
+      userEmail: userEmail
+    })
+  }
+
+  return (
+    <div className="App">
+      <main>
+        <h1>Zoom Meeting SDK Sample React</h1>
+
+        {/* For Component View */}
+        <div id="meetingSDKElement">
+          {/* Zoom Meeting SDK Component View Rendered Here */}
+        </div>
+
+        <button onClick={getSignature}>Join Meeting</button>
+      </main>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,7 @@ import './App.css';
 
 declare var ZoomMtg
 
-ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.9/lib', '/av');
+ZoomMtg.setZoomJSLib('https://source.zoom.us/2.0.1/lib', '/av');
 
 ZoomMtg.preLoadWasm();
 ZoomMtg.prepareWebSDK();

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "meetingsdk-sample-react",`
`3`		`- "version": "1.9.9",`
	`3`	`+ "version": "2.0.1",`
`4`	`4`	`"author": "Tommy Gaessler",`
`5`	`5`	`"homepage": "",`
`6`	`6`	`"private": true,`