Update video-calling-javascript.md

chriswhilar · web-flow · commit bdb7847ee2e5 · 2022-05-06T20:02:01.000-04:00
diff --git a/articles/communication-services/quickstarts/voice-video-calling/includes/video-calling/video-calling-javascript.md b/articles/communication-services/quickstarts/voice-video-calling/includes/video-calling/video-calling-javascript.md
@@ -39,15 +39,17 @@ This quickstart uses webpack to bundle the application assets. Run the following
 ```console
 npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev
 ```
-Create an `index.html` file in the root directory of your project. We'll use this file to configure a basic layout that will allow the user to place a 1:1 video call.
 
 Here's the code:
+
+Create an `index.html` file in the root directory of your project. We'll use this file to configure a basic layout that will allow the user to place a 1:1 video call.
 ```html
 <!-- index.html -->
 <!DOCTYPE html>
 <html>
     <head>
         <title>Azure Communication Services - Calling Web SDK</title>
+        <link rel="stylesheet" type="text/css" href="styles.css"/>
     </head>
     <body>
         <h4>Azure Communication Services - Calling Web SDK</h4>
@@ -71,7 +73,7 @@ Here's the code:
         <br>
         <div id="connectedLabel" style="color: #13bb13;" hidden>Call is connected!</div>
         <br>
-        <div id="remoteVideoContainer" style="width: 40%;" hidden>Remote participants' video streams:</div>
+        <div id="remoteVideosGallery" style="width: 40%;" hidden>Remote participants' video streams:</div>
         <br>
         <div id="localVideoContainer" style="width: 30%;" hidden>Local video stream:</div>
         <!-- points to the bundle generated from client.js -->
@@ -80,8 +82,6 @@ Here's the code:
 </html>
 ```
 
-## Azure Communication Services Calling Web SDK Object model
-
 The following classes and interfaces handle some of the major features of the Azure Communication Services Calling SDK:
 
 | Name                                | Description                                                                                                                              |
@@ -97,6 +97,13 @@ The following classes and interfaces handle some of the major features of the Az
 
 Create a file in the root directory of your project called `client.js` to contain the application logic for this quickstart. Add the following code to client.js:
 ```JavaScript
+/*************************************
+ * Example code - client.js          *
+ * Convert this script into a        *
+ * bundle.js that your html index    *
+ * page can use.                     *
+ *************************************/
+
 // Make sure to install the necessary dependencies
 const { CallClient, VideoStreamRenderer, LocalVideoStream } = require('@azure/communication-calling');
 const { AzureCommunicationTokenCredential } = require('@azure/communication-common');
@@ -125,7 +132,7 @@ let acceptCallButton = document.getElementById('accept-call-button');
 let startVideoButton = document.getElementById('start-video-button');
 let stopVideoButton = document.getElementById('stop-video-button');
 let connectedLabel = document.getElementById('connectedLabel');
-let remoteVideoContainer = document.getElementById('remoteVideoContainer');
+let remoteVideosGallery = document.getElementById('remoteVideosGallery');
 let localVideoContainer = document.getElementById('localVideoContainer');
 
 /**
@@ -197,8 +204,10 @@ acceptCallButton.onclick = async () => {
     }
 }
 
-// Subscribe to a call obj.
-// Listen for property changes and collection updates.
+/**
+ * Subscribe to a call obj.
+ * Listen for property changes and collection updates.
+ */
 subscribeToCall = (call) => {
     try {
         // Inspect the initial call.id value.
@@ -220,6 +229,7 @@ subscribeToCall = (call) => {
                 hangUpCallButton.disabled = false;
                 startVideoButton.disabled = false;
                 stopVideoButton.disabled = false;
+                remoteVideosGallery.hidden = false;
             } else if (call.state === 'Disconnected') {
                 connectedLabel.hidden = true;
                 startCallButton.disabled = false;
@@ -265,8 +275,10 @@ subscribeToCall = (call) => {
     }
 }
 
-// Subscribe to a remote participant obj.
-// Listen for property changes and collection udpates.
+/**
+ * Subscribe to a remote participant obj.
+ * Listen for property changes and collection udpates.
+ */
 subscribeToRemoteParticipant = (remoteParticipant) => {
     try {
         // Inspect the initial remoteParticipant.state value.
@@ -304,43 +316,68 @@ subscribeToRemoteParticipant = (remoteParticipant) => {
  * you can choose to destroy the whole 'Renderer', a specific 'RendererView' or keep them, but this will result in displaying blank video frame.
  */
 subscribeToRemoteVideoStream = async (remoteVideoStream) => {
-    // Create a video stream renderer for the remote video stream.
-    let videoStreamRenderer = new VideoStreamRenderer(remoteVideoStream);
+    let renderer = new VideoStreamRenderer(remoteVideoStream);
     let view;
-    const renderVideo = async () => {
+    let remoteVideoContainer = document.createElement('div');
+    remoteVideoContainer.className = 'remote-video-container';
+
+    /**
+     * isReceiving API is currently an @alpha feature. Do not use in production.
+     */
+    let loadingSpinner = document.createElement('div');
+    loadingSpinner.className = 'loading-spinner';
+    remoteVideoStream.on('isReceivingChanged', () => {
         try {
-            // Create a renderer view for the remote video stream.
-            view = await videoStreamRenderer.createView();
-            // Attach the renderer view to the UI.
-            remoteVideoContainer.hidden = false;
-            remoteVideoContainer.appendChild(view.target);
+            if (remoteVideoStream.isAvailable) {
+                const isReceiving = remoteVideoStream.isReceiving;
+                const isLoadingSpinnerActive = remoteVideoContainer.contains(loadingSpinner);
+                if (!isReceiving && !isLoadingSpinnerActive) {
+                    remoteVideoContainer.appendChild(loadingSpinner);
+                } else if (isReceiving && isLoadingSpinnerActive) {
+                    remoteVideoContainer.removeChild(loadingSpinner);
+                }
+            }
         } catch (e) {
-            console.warn(`Failed to createView, reason=${e.message}, code=${e.code}`);
-        }	
+            console.error(e);
+        }
+    });
+
+    const createView = async () => {
+        // Create a renderer view for the remote video stream.
+        view = await renderer.createView();
+        // Attach the renderer view to the UI.
+        remoteVideoContainer.appendChild(view.target);
+        remoteVideosGallery.appendChild(remoteVideoContainer);
     }
-    
-    remoteVideoStream.on('isAvailableChanged', async () => {
-        // Participant has switched video on.
-        if (remoteVideoStream.isAvailable) {
-            await renderVideo();
 
-        // Participant has switched video off.
-        } else {
-            if (view) {
+    // Remote participant has switched video on/off
+    remoteVideoStream.on('isAvailableChanged', async () => {
+        try {
+            if (remoteVideoStream.isAvailable) {
+                await createView();
+            } else {
                 view.dispose();
-                view = undefined;
+                remoteVideosGallery.removeChild(remoteVideoContainer);
             }
+        } catch (e) {
+            console.error(e);
         }
     });
 
-    // Participant has video on initially.
+    // Remote participant has video on initially.
     if (remoteVideoStream.isAvailable) {
-        await renderVideo();
+        try {
+            await createView();
+        } catch (e) {
+            console.error(e);
+        }
     }
 }
 
-// Start your local video stream.
-// This will send your local video stream to remote participants so they can view it.
+/**
+ * Start your local video stream.
+ * This will send your local video stream to remote participants so they can view it.
+ */
 startVideoButton.onclick = async () => {
     try {
         const localVideoStream = await createLocalVideoStream();
@@ -350,8 +387,10 @@ startVideoButton.onclick = async () => {
     }
 }
 
-// Stop your local video stream.
-// This will stop your local video stream from being sent to remote participants.
+/**
+ * Stop your local video stream.
+ * This will stop your local video stream from being sent to remote participants.
+ */
 stopVideoButton.onclick = async () => {
     try {
         await call.stopVideo(localVideoStream);
@@ -365,7 +404,6 @@ stopVideoButton.onclick = async () => {
  * create a new VideoStreamRendererView instance using the asynchronous createView() method.
  * You may then attach view.target to any UI element. 
  */
-// Create a local video stream for your camera device
 createLocalVideoStream = async () => {
     const camera = (await deviceManager.getCameras())[0];
     if (camera) {
@@ -374,7 +412,10 @@ createLocalVideoStream = async () => {
         console.error(`No camera device found on the system`);
     }
 }
-// Display your local video stream preview in your UI
+
+/**
+ * Display your local video stream preview in your UI
+ */
 displayLocalVideoStream = async () => {
     try {
         localVideoStreamRenderer = new VideoStreamRenderer(localVideoStream);
@@ -385,7 +426,10 @@ displayLocalVideoStream = async () => {
         console.error(error);
     } 
 }
-// Remove your local video stream preview from your UI
+
+/**
+ * Remove your local video stream preview from your UI
+ */
 removeLocalVideoStream = async() => {
     try {
         localVideoStreamRenderer.dispose();
@@ -395,13 +439,50 @@ removeLocalVideoStream = async() => {
     } 
 }
 
-// End the current call
+/**
+ * End current call
+ */
 hangUpCallButton.addEventListener("click", async () => {
     // end the current call
     await call.hangUp();
 });
 ```                                                          
 
+Create a file in the root directory of your project called `styles.css` to contain the application styling for this quickstart. Add the following code to styles.css:
+```css
+/**
+ * CSS for styling the loading spinner over the remote video stream
+ */
+.remote-video-container {
+    position: relative;
+}
+.loading-spinner {
+    border: 12px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 12px solid #ca5010;
+    width: 100px;
+    height: 100px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translate(-50%, -50%);
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* Safari */
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+```
+
 ## Run the code
 Use the `webpack-dev-server` to build and run your app. Run the following command to bundle the application host in a local webserver:
 
