From 257d6bcb03632f614e89824922e6ef6d3b1d4472 Mon Sep 17 00:00:00 2001 From: saudsami Date: Sun, 7 Jul 2024 21:59:08 +0500 Subject: [PATCH] review updates --- .../project-implementation/web.mdx | 29 +++++++++++++++---- .../get-started-sdk/project-setup/web.mdx | 14 +++------ .../get-started-sdk/project-test/web.mdx | 10 +++---- 3 files changed, 33 insertions(+), 20 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 index 77dad3c92..0998a9cd7 100644 --- 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 @@ -21,7 +21,7 @@ The following figure illustrates the essential steps: To implement the 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`:
@@ -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 () { -When the remote user successfully publishes the audio and video media tracks in the channel, the 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, 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. 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 index 78c8dab37..ab04950dd 100644 --- 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 @@ -44,12 +44,6 @@ Take the following steps to integrate the 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 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

Web SDK Voice Quickstart

- - + +
@@ -137,8 +131,8 @@ Create a file `index.html` in the project folder and copy the following code to

Web SDK Video Quickstart

- - + +
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 index 6383e88db..6656be3e3 100644 --- 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 @@ -37,11 +37,6 @@ Take the following steps to run and test the sample code: npm run start:dev ``` - -
  • 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.
  • 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).
- - -## Expected Results Your browser automatically opens the following page: @@ -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. + + - 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`). + + \ No newline at end of file