Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

endoc-268-Web quick start fix #1562

Merged
merged 2 commits into from
Jul 7, 2024
Merged

endoc-268-Web quick start fix #1562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7cf1c5a
endoc-268-Web quick start fix
Pankajg123 Jun 24, 2024
257d6bc
review updates
saudsami Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
}

Expand Down Expand Up @@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -477,6 +477,7 @@ async function startBasicLiveStreaming() {
};
};
}

startBasicLiveStreaming();`}
</CodeBlock>
</details>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -768,7 +780,6 @@ document.getElementById("leave").onclick = async function () {
await rtc.client.leave();
}
```

</ProductWrapper>

</PlatformWrapper>
8 changes: 4 additions & 4 deletions shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
9 changes: 7 additions & 2 deletions shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Loading