From 7cf1c5a948b7bb6ac74669a19b5fc0dacb1df76f Mon Sep 17 00:00:00 2001 From: pankajg123 Date: Mon, 24 Jun 2024 20:39:45 +0530 Subject: [PATCH] endoc-268-Web quick start fix --- .../project-implementation/web.mdx | 74 +++++++++---------- .../get-started-sdk/project-setup/web.mdx | 6 ++ .../get-started-sdk/project-test/web.mdx | 9 ++- 3 files changed, 46 insertions(+), 43 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 406863784..77dad3c92 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`: +Copy the following code into `agoraLogic.js`. Make sure to replace `appID`and `token` with [your own App ID and temporary Token](#prerequisites).:
@@ -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();`}
@@ -542,7 +524,7 @@ let options = { ### 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 `createClient` and set `mode` to `rtc` or `live` according to your scenario. Add the following code to `agoraLogic.js`: ```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,30 +641,38 @@ document.getElementById("join").onclick = async function () { -When the remote user successfully publishes the audio and video track, the 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 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(); } }); @@ -690,18 +680,21 @@ rtc.client.on("user-published", async (user, mediaType) => { ### 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`. + To receive notification from the , add the following callbacks: @@ -768,7 +761,6 @@ document.getElementById("leave").onclick = async function () { await rtc.client.leave(); } ``` - \ No newline at end of file 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 cfada9550..78c8dab37 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,6 +44,12 @@ 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: ``` 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 bf66ce4da..6383e88db 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,6 +37,11 @@ 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: @@ -53,7 +58,7 @@ Take the following steps to run and test the sample code: 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. 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: 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.