endoc-268-Web quick start fix

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`:
+Copy the following code into `agoraLogic.js`. Make sure to replace `appID`and `token` with [your own App ID and temporary Token](#prerequisites).:
 
 <ProductWrapper product="video-calling">
 <details> 
@@ -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,7 +62,7 @@ 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";
@@ -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";
@@ -121,13 +121,7 @@ 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 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 +152,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 +261,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;
@@ -379,13 +373,7 @@ let options = {
 };
 
 async function startBasicLiveStreaming() {
-    rtc.client = AgoraRTC.createClient({
-        mode: "live",
-        codec: "vp8",
-        clientRoleOptions: {
-            level: AudienceLatencyLevelType.AUDIENCE_LEVEL_ULTRA_LOW_LATENCY
-        }
-    });
+    rtc.client = AgoraRTC.createClient({mode: "live", codec: "vp8"});
 
     window.onload = function () {
         document.getElementById("host-join").onclick = async function () {
@@ -397,7 +385,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;
@@ -458,14 +446,7 @@ 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 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 +458,7 @@ async function startBasicLiveStreaming() {
         };
     };
 }
+
 startBasicLiveStreaming();`}
 </CodeBlock>
 </details> 
@@ -542,7 +524,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
@@ -622,7 +604,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 +641,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 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:
 
 ```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 +761,6 @@ document.getElementById("leave").onclick = async function () {
     await rtc.client.leave();
 }
 ```
-
 </ProductWrapper>
 
 </PlatformWrapper>

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

@@ -44,6 +44,12 @@ 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:
 
     ```

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

@@ -37,6 +37,11 @@ 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'>
@@ -53,7 +58,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,7 +70,7 @@ 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.