Run the web demo-Real-Time Communication(RTC)-阿里云帮助中心

This topic explains how to run the web demo.

Prerequisites

You have obtained the authentication information from the console. For more information, see Console Operation Guide.

Note

The token from the console is for development and testing only. Using this token in a production environment poses a security threat. You must build your own server to generate tokens and use the HTTPS protocol. For more information, see Generate a token on the server-side.

Procedure

Download and unzip the software development kit (SDK) and sample code from GitHub or Gitee.

In the root directory of the project, run the following commands in the console:

cd Web/vueVersion // or cd Web/reactVersion
npm install
npm install vite -g
npm install typescript -g
npm run start

Configure the parameters to join a channel, such as the token. There are two ways to do this:
1. Generate a token in the Alibaba Cloud Management Console. Set the corresponding parameters in `src/config.json`. The token and other information must match exactly. In this mode, you can leave the `appKey` field empty.
2. Obtain the `appKey` from the Alibaba Cloud Management Console. Configure the `appKey` and the corresponding `appId` in `src/config.json`. All other parameters are optional. If you leave them blank, random values are generated by default. In this mode, the demo uses its built-in Node.js server to generate a token to join the channel. The corresponding code is in `server/server.js`. To debug in production mode, modify `APP_SERVER_DOMAIN` in `src/utils/request.ts` to your own application server address. Then, adjust the logic in `getAppToken` accordingly.
Run the demo.
1. After the demo runs successfully, the preparation page appears with a two-column layout. The left column shows a preview from your camera and microphone. You can use the buttons at the bottom to enable, disable, or switch devices. This preview creates audio and video tracks in real time. These tracks are automatically published after you join a channel. In the right column, enter the Channel ID, User ID, User Name, and App ID. Then, click the Join button to join the channel.
2. After you successfully join the channel, a toast message confirms that you have joined. You will then see the in-channel interface.
3. By default, the audio and video tracks from your microphone and camera are published automatically when you join the channel. You can click the arrow next to the device icon at the bottom to switch devices or go to the settings page to adjust the encoding. You can adjust the video encoding only when the video is not in a published state.
4. The small window at the top displays your local preview, the video previews of remote users, device statuses, and other information. A list of action buttons appears in the bottom-right corner of the small window. These buttons include actions such as taking a screenshot of the camera or shared stream and switching between high-quality and low-quality streams. These buttons appear only when the small window displays the track that you want to operate on. The list of action buttons collapses automatically after one operation. No message is displayed for a successful operation, but a message is displayed if an operation fails.
5. When another user joins the same channel, their video is automatically subscribed. You can use the stream quality button to switch the subscribed video's resolution. You can also click the Unsubscribe button to stop subscribing to that user's video track.
6. Click the Leave button in the bottom-right corner to leave the channel immediately. When a channel has no more online users, the system revokes and releases it.