Skip to content

Commit

Permalink
Merge branch 'milestone-64-en-docs-to-cn-source' of github.com:/Agora…
Browse files Browse the repository at this point in the history 
…IO/Doc-Source-Private into milestone-64-en-docs-to-cn-source
  • Loading branch information
@saudsami
saudsami committed Mar 29, 2024
2 parents 1cd9a82 + 8cb9463 commit 8925da9
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 95 deletions.
93 changes: 64 additions & 29 deletions shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,26 @@ import CodeBlock from '@theme/CodeBlock';

<ProductWrapper product="video-calling">
The following figure illustrates the essential steps:

![](/images/video-sdk/quick-start-sequence-web.svg)
</ProductWrapper>

<ProductWrapper product="voice-calling">
The following figure illustrates the essential steps:
![](/images/video-sdk/quick-start-sequence-voice-web.svg)
</ProductWrapper>

<ProductWrapper product="broadcast-streaming, interactive-live-streaming">
The following figure illustrates the essential steps:
![](/images/video-sdk/ils-quick-start-sequence-web.svg)
</ProductWrapper>

### Complete sample code

To implement the voice calling logic in your app, copy the following code into `agoraVideoCall.js`:
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`:

<ProductWrapper product="video-calling">
<details>
<summary>Complete sample code for real-time <Vpd k="PRODUCT"/></summary>
<CodeBlock language="js" showLineNumbers>
Expand Down Expand Up @@ -106,7 +121,13 @@ async function startBasicCall() {
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// Traverse all remote users.
// 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
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
Expand All @@ -125,11 +146,6 @@ startBasicCall();`}
</ProductWrapper>

<ProductWrapper product="voice-calling">
The following figure illustrates the essential steps:

![](/images/video-sdk/quick-start-sequence-voice-web.svg)

To implement the voice calling logic in your app, copy the following code into `agoraVideoCall.js` :

<details>
<summary>Complete sample code for <Vpd k="PRODUCT"/></summary>
Expand Down Expand Up @@ -207,15 +223,12 @@ startBasicCall();`}
</ProductWrapper>

<ProductWrapper product='broadcast-streaming'>
The following figure illustrates the essential steps:
![](/images/video-sdk/ils-quick-start-sequence-web.svg)

To implement these steps in your project, add the following code to `basicEngagement.js`:

<details>
<summary>Complete sample code for <Vpd k="NAME" />></summary>
<summary>Complete sample code for <Vpd k="NAME" /></summary>
<CodeBlock language="js" showLineNumbers>
{`import AgoraRTC from "agora-rtc-sdk-ng";
import { AudienceLatencyLevelType } from "agora-rtc-sdk-ng";
let rtc = {
// For the local audio and video tracks.
Expand Down Expand Up @@ -315,7 +328,14 @@ async function startBasicLiveStreaming() {
// Close all the local tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// Traverse all remote users.
// 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
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
Expand All @@ -333,15 +353,12 @@ startBasicLiveStreaming();`}
</ProductWrapper>

<ProductWrapper product='interactive-live-streaming'>
The following figure illustrates the essential steps:
![](/images/video-sdk/ils-quick-start-sequence-web.svg)

To implement these steps in your project, add the following code to `basicEngagement.js`:

<details>
<summary>Complete sample code for <Vpd k="NAME" />></summary>
<summary>Complete sample code for <Vpd k="NAME" /></summary>
<CodeBlock language="js" showLineNumbers>
{`import AgoraRTC from "agora-rtc-sdk-ng";
import { AudienceLatencyLevelType } from "agora-rtc-sdk-ng";
let rtc = {
// For the local audio and video tracks.
Expand Down Expand Up @@ -441,7 +458,14 @@ async function startBasicLiveStreaming() {
// Close all the local tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// Traverse all remote users.
// 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
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
Expand All @@ -458,10 +482,21 @@ startBasicLiveStreaming();`}
</details>
</ProductWrapper>

The following sections explains the <Vpd k="PRODUCT"/> logic step-by-step:
Refer to the steps in the [Test the sample code](#test-the-sample-code) section to run the project.

Review the following implementation steps to understand the core API calls.

### Import the `AgoraRTC` module

Add the following code to `agoraLogic.js`:

```js
import AgoraRTC from "agora-rtc-sdk-ng";
```

### Define the required variables
Add the following variables to `agoraVideoCall.js`:

Add the following variables to `agoraLogic.js`:
<ProductWrapper product="voice-calling">

```typescript
Expand Down Expand Up @@ -507,7 +542,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 `agoraVideoCall.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`:

<ProductWrapper product="voice-calling, video-calling">
```typescript
Expand Down Expand Up @@ -542,7 +577,7 @@ To receive notification from the <Vg k="VSDK"/>, add the following callbacks:
* `user-published`: Triggered when a user publishes media tracks in the channel.
* `user-unpublished`: Triggered when a user unpublishes media tracks in the channel.

You use these callbacks to play remote user audio and video tracks. To implement these callbacks, add the following code to `agoraVideoCall.js`:
You use these callbacks to play remote user audio and video tracks. To implement these callbacks, add the following code to `agoraLogic.js`:

```typescript
// Listen for the "user-published" event
Expand Down Expand Up @@ -583,7 +618,7 @@ To receive notification from the <Vg k="VSDK"/>, add the following callbacks:
* `user-published`: Triggered when a user publishes audio tracks in the channel.
* `user-unpublished`: Triggered when a user unpublishes audio tracks in the channel.

You use these callbacks to play remote user audio tracks. To implement these callbacks, add the following code to `agoraVideoCall.js`:
You use these callbacks to play remote user audio tracks. To implement these callbacks, add the following code to `agoraLogic.js`:

```typescript
// Listen for the "user-published" event, from which you can get an AgoraRTCRemoteUser object.
Expand All @@ -610,7 +645,7 @@ rtc.client.on("user-unpublished", async (user) => {
<ProductWrapper notAllowed="voice-calling">

### Join the channel and view the local video
To join a channel, call the `join` method. Pass the channel name and a temporary token for authentication. Once in the channel, use the `publish` method to share your local audio and video tracks with others. Finally, create a `div` element to display your local video. To implement this logic, add the following code to `agoraVideoCall.js`:
To join a channel, call the `join` method. Pass the channel name and a temporary token for authentication. Once in the channel, use the `publish` method to share your local audio and video tracks with others. Finally, create a `div` element to display your local video. To implement this logic, add the following code to `agoraLogic.js`:

```typescript
document.getElementById("join").onclick = async function () {
Expand Down Expand Up @@ -641,7 +676,7 @@ To join a channel, call the `join` method. Pass the channel name and a temporary
<ProductWrapper product="voice-calling">

### Join the channel
To join a channel, use the `join` method. Pass the channel name and a temporary token for authentication. To implement this logic, add the following code to `agoraVideoCall.js`:
To join a channel, use the `join` method. Pass the channel name and a temporary token for authentication. To implement this logic, add the following code to `agoraLogic.js`:

```typescript
// Join the channel
Expand All @@ -653,7 +688,7 @@ async function joinChannel() {

### Leave the channel
<ProductWrapper notAllowed="voice-calling">
Close the media tracks and `leave` the channel. To implement this logic, add the following code to `agoraVideoCall.js`:
Close the media tracks and `leave` the channel. To implement this logic, add the following code to `agoraLogic.js`:

```typescript
document.getElementById("leave").onclick = async function () {
Expand All @@ -671,7 +706,7 @@ document.getElementById("leave").onclick = async function () {
</ProductWrapper>

<ProductWrapper product="voice-calling">
To exit the channel, call `leave`. To implement this logic, add the following code to `agoraVideoCall.js`:
To exit the channel, call `leave`. To implement this logic, add the following code to `agoraLogic.js`:

``` typescript
// Leave the channel
Expand Down
64 changes: 35 additions & 29 deletions shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,57 @@ import CodeBlock from '@theme/CodeBlock';

### Create a project

To set up your web project, create a folder named `agora_web_quickstart`. In the new project folder, add the following files:
1. To set up a new web project, create a folder named `agora_web_quickstart`.

* `index.html`
: Specifies the user interfaces for web applications.
* `agoraVideoCall.js`: Contains `AgoraRTCClient` code that implements specific application logic.
* `package.json`: Used to install and manage project dependencies. Create the file using the command line by going into the `agora_web_quickstart` folder and running the following command:
1. To initialize a Node.js project, run the following command in the new project folder:

```bash
npm init package.json
```shell
npm init -y
```

You see a `package.json` file created in the folder that you use to manage and install project dependencies.

### Integrate the <Vg k="COMPANY"/> <Vg k="VSDK"/>

Take the following steps to integrate the <Vg k="COMPANY" /> <Vpd k="SDK"/> into your project:

1. Add the following configuration to `package.json`:
1. To add project dependencies, the required development tools, and necessary build scripts to your project, open `package.json` and replace the contents with the following:

```json
{
"name": "agora_web_quickstart",
"version": "1.0.0",
"description": "",
"main": "agoraVideoCall.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"agora-rtc-sdk-ng": "latest"
},
"author": "",
"license": "ISC"
"name": "agora_web_quickstart",
"version": "1.0.0",
"description": "",
"main": "agoraLogic.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start:dev": "webpack serve --open --config webpack.config.js"
},
"dependencies": {
"agora-rtc-sdk-ng": "latest"
},
"devDependencies": {
"webpack": "5.91.0",
"webpack-dev-server": "5.0.4",
"webpack-cli": "5.1.4"
},
"author": "",
"license": "ISC"
}
```

2. To import the `AgoraRTC` module into your project, add the following code to `agoraVideoCall.js`:
1. To download and install the <Vg k="COMPANY" /> <Vpd k="SDK" /> and `webpack` dependencies, run the the following command in the project folder:

```js
import AgoraRTC from "agora-rtc-sdk-ng";
```
npm install
```

### Create a user interface​

Copy the following code to `index.html` to implement a basic client user interface:
Create a file `index.html` in the project folder and copy the following code to to implement a basic client user interface:

<ProductWrapper product='video-calling'>
<ProductWrapper product='interactive-live-streaming, broadcast-streaming'>
<details>
<summary>Sample code to create the user interface</summary>

Expand All @@ -59,7 +65,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
<meta charset="UTF-8" />
<title>Web SDK Video Quickstart</title>
<!--
This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
This line imports the bundle.js file generated by webpack, which contains the compiled JavaScript code.
-->
<script src="./dist/bundle.js"></script>
</head>
Expand Down Expand Up @@ -89,7 +95,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
<meta charset="UTF-8">
<title>Web SDK Voice Quickstart</title>
<!--
This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
This line imports the bundle.js file generated by webpack, which contains the compiled JavaScript code.
-->
<script src="./dist/bundle.js"></script>
</head>
Expand All @@ -107,7 +113,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
</details>
</ProductWrapper>

<ProductWrapper product='interactive-live-streaming, broadcast-streaming'>
<ProductWrapper product='video-calling'>
<details>
<summary>Sample code to create the user interface</summary>
<CodeBlock language="html" showLineNumbers>
Expand All @@ -117,7 +123,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
<meta charset="UTF-8" />
<title>Web SDK Video Quickstart</title>
<!--
This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
This line imports the bundle.js file generated by webpack, which contains the compiled JavaScript code.
-->
<script src="./dist/bundle.js"></script>
</head>
Expand Down
Loading

0 comments on commit 8925da9

Please sign in to comment.