review updates

shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx

@@ -21,7 +21,7 @@ The following figure illustrates the essential steps:
 
 To implement the <Vpd k="NAME" /> logic in your app, create a file named `agoraLogic.js` in the project folder. This file contains `AgoraRTCClient` code that implements specific application logic.
 
-Copy the following code into `agoraLogic.js`. Make sure to replace `appID`and `token` with [your own App ID and temporary Token](#prerequisites).:
+Copy the following code into `agoraLogic.js`:
 
 <ProductWrapper product="video-calling">
 <details> 
@@ -70,7 +70,7 @@ async function startBasicCall() {
             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);
         }
 
@@ -121,6 +121,12 @@ async function startBasicCall() {
             rtc.localAudioTrack.close();
             rtc.localVideoTrack.close();
 
+            // Remove the container for the local video track.
+            const localPlayerContainer = document.getElementById(options.uid);
+            if (localPlayerContainer) {
+                localPlayerContainer.remove();
+            }
+
             // Traverse all remote users.
             rtc.client.remoteUsers.forEach(user => {
                 // Destroy the dynamically created DIV containers.
@@ -373,7 +379,13 @@ let options = {
 };
 
 async function startBasicLiveStreaming() {
-    rtc.client = AgoraRTC.createClient({mode: "live", codec: "vp8"});
+    rtc.client = AgoraRTC.createClient({
+        mode: "live",
+        codec: "vp8",
+        clientRoleOptions: {
+            level: AudienceLatencyLevelType.AUDIENCE_LEVEL_ULTRA_LOW_LATENCY
+        }
+    });
 
     window.onload = function () {
         document.getElementById("host-join").onclick = async function () {
@@ -446,6 +458,13 @@ async function startBasicLiveStreaming() {
             // Close all the local tracks.
             rtc.localAudioTrack.close();
             rtc.localVideoTrack.close();
+
+            // Remove the container for the local video track.
+            const localPlayerContainer = document.getElementById(options.uid);
+            if (localPlayerContainer) {
+                localPlayerContainer.remove();
+            }
+
             // Traverse all remote users.
             rtc.client.remoteUsers.forEach(user => {
                 // Destroy the dynamically created DIV containers.
@@ -569,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;
@@ -641,7 +660,7 @@ document.getElementById("join").onclick = async function () {
 
 <ProductWrapper notAllowed="voice-calling">
 
-When the remote user successfully publishes the audio and video media tracks in the channel, the <Vg k="VSDK"/> triggers the `user-published` event. In this event callback function, 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 end (`mediaType`). Then you 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 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, from which you can get an AgoraRTCRemoteUser object.

shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx

@@ -44,12 +44,6 @@ Take the following steps to integrate the <Vg k="COMPANY" /> <Vpd k="SDK"/> into
     }
     ```
 
-1. Copy the following code into the `agoraLogic.js` file and import the `AgoraRTC` module into your project:
-
-    ```js
-    import AgoraRTC from "agora-rtc-sdk-ng";
-    ```
-
 1. To download and install the <Vg k="COMPANY" /> <Vpd k="SDK" /> and `webpack` dependencies, run the the following command in the project folder:
 
     ```
@@ -109,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>
@@ -137,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>

shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx

@@ -37,11 +37,6 @@ Take the following steps to run and test the sample code:
     npm run start:dev
     ```
 
-<Admonition type="info" title="Information">
- <ul><li>Running the web app on a local server (localhost) is for testing purposes only. When deploying to a production environment, ensure to use HTTPS protocol.</li><li>Due to browser security policies, Agora Web SDK supports only HTTPS protocol or `http://localhost` (http://127.0.0.1) for addresses other than 127.0.0.1. Do not use HTTP protocol to access your project outside of `http://localhost` (http://127.0.0.1).</li></ul>
-</Admonition>
-
-## Expected Results
     Your browser automatically opens the following page:
 
     <ProductWrapper product='video-calling'>
@@ -76,4 +71,9 @@ Take the following steps to run and test the sample code:
         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>