endoc-268-Web quick start fix (#1562)

* endoc-268-Web quick start fix * review updates --------- Co-authored-by: saudsami <[email protected]>
AgoraIO · Jul 7, 2024 · cb20fa7 · cb20fa7
1 parent fbd459a
commit cb20fa7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git a/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
@@ -40,7 +40,7 @@ let options = {
     appId: "Your app ID",
     // Set the channel name.
     channel: "test",
-    // Pass your temp token here.
+    // Use a temp token
     token: "Your temp token",
     // Set the user ID.
     uid: 123456,
@@ -62,15 +62,15 @@ async function startBasicCall() {
             const remoteVideoTrack = user.videoTrack;
             // Dynamically create a container in the form of a DIV element for playing the remote video track.
             const remotePlayerContainer = document.createElement("div");
-            // Specify the ID of the DIV container. You can use the UID of the remote user.
+            // Specify the ID of the DIV container. You can use the uid of the remote user.
             remotePlayerContainer.id = user.uid.toString();
             remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
             remotePlayerContainer.style.width = "640px";
             remotePlayerContainer.style.height = "480px";
             document.body.append(remotePlayerContainer);
 
             // Play the remote video track.
-            // Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
+            // Pass a DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
             remoteVideoTrack.play(remotePlayerContainer);
         }
 
@@ -103,7 +103,7 @@ async function startBasicCall() {
             await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
             // Dynamically create a container in the form of a DIV element for playing the local video track.
             const localPlayerContainer = document.createElement("div");
-            // Specify the ID of the DIV container. You can use the UID of the local user.
+            // Specify the ID of the DIV container. You can use the uid of the local user.
             localPlayerContainer.id = options.uid;
             localPlayerContainer.textContent = "Local user " + options.uid;
             localPlayerContainer.style.width = "640px";
@@ -127,7 +127,7 @@ async function startBasicCall() {
                 localPlayerContainer.remove();
             }
 
-            // Traverse all remote users to remove remote containers
+            // Traverse all remote users.
             rtc.client.remoteUsers.forEach(user => {
                 // Destroy the dynamically created DIV containers.
                 const playerContainer = document.getElementById(user.uid);
@@ -158,11 +158,11 @@ let rtc = {
 };
 
 let options = {
-    // Pass your App ID here.
-    appId: "Your App ID",
+    // Pass your app ID here.
+    appId: "Your app ID",
     // Set the channel name.
     channel: "test",
-    // Pass your temp token here.
+    // Use a temp token
     token: "Your temp token",
     // Set the user ID.
     uid: 123456,
@@ -267,7 +267,7 @@ async function startBasicLiveStreaming() {
             rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
             // Publish the local audio and video tracks to the channel.
             await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
-            // Dynamically create a container in the form of a DIV element for playing the remote video track.
+            // Dynamically create a container in the form of a DIV element for playing the local video track.
             const localPlayerContainer = document.createElement("div");
             // Specify the ID of the DIV container. You can use the uid of the local user.
             localPlayerContainer.id = options.uid;
@@ -397,7 +397,7 @@ async function startBasicLiveStreaming() {
             rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
             // Publish the local audio and video tracks to the channel.
             await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
-            // Dynamically create a container in the form of a DIV element for playing the remote video track.
+            // Dynamically create a container in the form of a DIV element for playing the local video track.
             const localPlayerContainer = document.createElement("div");
             // Specify the ID of the DIV container. You can use the uid of the local user.
             localPlayerContainer.id = options.uid;
@@ -465,7 +465,7 @@ async function startBasicLiveStreaming() {
                 localPlayerContainer.remove();
             }
 
-            // Traverse all remote users to remove remote containers
+            // Traverse all remote users.
             rtc.client.remoteUsers.forEach(user => {
                 // Destroy the dynamically created DIV containers.
                 const playerContainer = document.getElementById(user.uid);
@@ -477,6 +477,7 @@ async function startBasicLiveStreaming() {
         };
     };
 }
+
 startBasicLiveStreaming();`}
 </CodeBlock>
 </details> 
@@ -542,7 +543,7 @@ let options = {
 </ProductWrapper>
 
 ### Initialize an instance of `AgoraRTCClient`
-To create an `AgoraRTCClient` object, call `createClient` and set `mode` to `rtc` or `live` according to your scenario. Add the following code to `agoraLogic.js`:
+To create an `AgoraRTCClient` object, call <Link target="_blank" to="{{global.API_REF_WEB_ROOT}}/interfaces/iagorartc.html#createclient">`createClient`</Link> and set `mode` to `rtc` or `live` according to your scenario. Add the following code to `agoraLogic.js`:
 
 <ProductWrapper product="voice-calling, video-calling">
 ```typescript
@@ -587,7 +588,7 @@ document.getElementById("host-join").onclick = async function () {
     rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
     // Publish the local audio and video tracks to the channel.
     await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
-    // Dynamically create a container in the form of a DIV element for playing the remote video track.
+    // Dynamically create a container in the form of a DIV element for playing the local video track.
     const localPlayerContainer = document.createElement("div");
     // Specify the ID of the DIV container. You can use the uid of the local user.
     localPlayerContainer.id = options.uid;
@@ -622,7 +623,7 @@ To join a channel, call the `join` method. Pass the channel name and a temporary
     await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
     // Dynamically create a container in the form of a DIV element for playing the local video track.
     const localPlayerContainer = document.createElement("div");
-    // Specify the ID of the DIV container. You can use the UID of the local user.
+    // Specify the ID of the DIV container. You can use the uid of the local user.
     localPlayerContainer.id = options.uid;
     localPlayerContainer.textContent = "Local user " + options.uid;
     localPlayerContainer.style.width = "640px";
@@ -659,49 +660,60 @@ document.getElementById("join").onclick = async function () {
 
 <ProductWrapper notAllowed="voice-calling">
 
-When the remote user successfully publishes the audio and video track, the <Vg k="VSDK"/> triggers the `user-published` event. This event carries two parameters: the remote user object (`user`) and the media type published by the remote end (`mediaType`). You call `AgoraRTCClient.subscribe` to subscribe to and play the tracks. To implement this logic, add the following code in your script file:
+When a remote user successfully publishes audio and video tracks in the channel, <Vg k="VSDK"/> triggers the `user-published` event. In this event callback, you get the `AgoraRTCRemoteUser` object of the remote user. This event carries two parameters: the remote user object (`user`) and the media type published by the remote user (`mediaType`). Call the `AgoraRTCClient.subscribe` method to subscribe to the remote user's audio and video tracks and use the `play` method to play the remote user's audio and video streams. To implement this logic, add the following code to your script file:
 
 ```typescript
-// Listen for the "user-published" event
+// Listen for the "user-published" event, from which you can get an AgoraRTCRemoteUser object.
 rtc.client.on("user-published", async (user, mediaType) => {
     // Subscribe to the remote user when the SDK triggers the "user-published" event
     await rtc.client.subscribe(user, mediaType);
     console.log("subscribe success");
 
-    // Handle remote video track
+    // If the remote user publishes a video track.
     if (mediaType === "video") {
+        // Get the RemoteVideoTrack object in the AgoraRTCRemoteUser object.
         const remoteVideoTrack = user.videoTrack;
+        // Dynamically create a container in the form of a DIV element for playing the remote video track.
         const remotePlayerContainer = document.createElement("div");
+        // Specify the ID of the DIV container. You can use the uid of the remote user.
         remotePlayerContainer.id = user.uid.toString();
         remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
         remotePlayerContainer.style.width = "640px";
         remotePlayerContainer.style.height = "480px";
         document.body.append(remotePlayerContainer);
+
+        // Play the remote video track.
+        // Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
         remoteVideoTrack.play(remotePlayerContainer);
     }
 
-    // Handle remote audio track
+    // If the remote user publishes an audio track.
     if (mediaType === "audio") {
+        // Get the RemoteAudioTrack object in the AgoraRTCRemoteUser object.
         const remoteAudioTrack = user.audioTrack;
+        // Play the remote audio track. No need to pass any DOM element.
         remoteAudioTrack.play();
     }
 });
 ```
 ### Unsubscribe to remote user's media tracks
 
 When a user unpublishes media tracks, the `user-unpublished` is triggered. You use this callback to unsubscribe to the user's media tracks. To implement this, add the following code in your script file:
-```
+
+```typescript
 // Listen for the "user-unpublished" event
 rtc.client.on("user-unpublished", user => {
-    await rtc.client.unsubscribe(user);
+    // Get the dynamically created DIV container.
     const remotePlayerContainer = document.getElementById(user.uid);
-    remotePlayerContainer && remotePlayerContainer.remove();
+    // Destroy the container.
+    remotePlayerContainer.remove();
 });
 ```
 - After successfully unsubscribing, the SDK will release the corresponding `RemoteTrack` object. Once the remote track object is released, the SDK will automatically remove the video playback element and audio playback will stop.
 - If the remote user actively cancels publishing, the local will receive `user-unpublished` a callback. When receiving the callback, the SDK will automatically release the corresponding `RemoteTrack` object, and you do not need to call it again unsubscribe.
 - This method is an asynchronous method and needs to be used with `Promise` or `async/await`.
 </ProductWrapper>
+
 <ProductWrapper product="voice-calling">
 
 To receive notification from the <Vpd k="SDK"/>, add the following callbacks:
@@ -768,7 +780,6 @@ document.getElementById("leave").onclick = async function () {
     await rtc.client.leave();
 }
 ```
-
 </ProductWrapper>
 
 </PlatformWrapper>
diff --git a/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
@@ -103,8 +103,8 @@ Create a file `index.html` in the project folder and copy the following code to
     <h2 class="left-align">Web SDK Voice Quickstart</h2>
         <div class="row">
             <div>
-                <button type="button" id="join">JOIN</button>
-                <button type="button" id="leave">LEAVE</button>
+                <button type="button" id="join">Join</button>
+                <button type="button" id="leave">Leave</button>
             </div>
         </div>
 </body>
@@ -131,8 +131,8 @@ Create a file `index.html` in the project folder and copy the following code to
         <h2 class="left-align">Web SDK Video Quickstart</h2>
         <div class="row">
             <div>
-                <button type="button" id="join">JOIN</button>
-                <button type="button" id="leave">LEAVE</button>
+                <button type="button" id="join">Join</button>
+                <button type="button" id="leave">Leave</button>
             </div>
         </div>
     </body>

diff --git a/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx
@@ -53,7 +53,7 @@ Take the following steps to run and test the sample code:
 
     <ProductWrapper product="[video-calling, voice-calling]">
     1. Click **Join** to join the channel. 
-    1. Invite a friend to clone this sample project. 
+    1. Invite a friend to clone this [sample project on Github](https://github.com/AgoraIO/API-Examples-Web). 
     1. Enter the same app ID, channel name, and temporary token.
     <ProductWrapper product="voice-calling">
         Once your friend joins the channel, you can hear each other.
@@ -65,10 +65,15 @@ Take the following steps to run and test the sample code:
 
     <ProductWrapper product='interactive-live-streaming, broadcast-streaming'>
     1. Click **Join as host** to join the channel as a host. 
-    1. Invite a friend to clone this sample project. 
+    1. Invite a friend to clone this [sample project on Github](https://github.com/AgoraIO/API-Examples-Web). 
     1. Enter the same app ID, channel name, and temporary token.
 
         If your friend joins the channel as a host, you can see each other and hear each other. If your friend joins as audience, they can see your video and hear your audio.
     </ProductWrapper>
 
+<Admonition type="info" title="Information">
+ - Run the web app on a local server (localhost) for testing purposes only. When deploying to a production environment, use the HTTPS protocol.
+ - Due to browser security policies that restrict HTTP addresses to 127.0.0.1, the Agora Web SDK only supports HTTPS protocol and `http://localhost` (`http://127.0.0.1`). Please do not use the HTTP protocol to access your project, except for `http://localhost` (`http://127.0.0.1`).
+</Admonition>
+
 </PlatformWrapper>