Web_音视频通信(RTC)-阿里云帮助中心

DingRTC的基本功能包含初始化SDK、加入频道、本地发布、订阅远端和离开频道等。通过阅读本文，您可以了解DingRTC的基本功能。

前提条件

您已下载并集成最新版本的SDK。具体操作，请参见如何在Web端集成音视频通信SDK。
您已获取加入频道必需的频道鉴权令牌（Token）。具体操作，请参见使用Token鉴权。

基本概念

您在接入DingRTC Web SDK时，会接触到以下基础概念：

DingRTCClient类，它的实例代表本地客户端，其方法提供加入、离开房间，发布、订阅音视频流等功能；
LocalTrack类和RemoteTrack类，它们的实例以及以它们作为基类的其他类的实例代表一个音视频对象，主要提供对音视频流的播放、暂停等控制操作。

基本逻辑

调用createClient()方法创建一个客户端实例；
调用join()进入一个RTC频道；
发布本地音视频轨道：

通过createCameraVideoTrack()创建一个摄像头轨道或createMicrophoneAudioTrack()创建一个麦克风轨道；

在加入频道后把这些音视频轨道对象作为参数来调用publish()来发布到频道中；

订阅远端音视频轨道：

在加入频道前监听"user-published"事件，可获取到所有远端用户的推流事件，其回调参数包含发布人的信息与音视频轨道的类型；

从客户端实例上的remoteUsers属性上，可获取所有在会中的远端用户，可用来订阅在加入频道前已在频道中发布的音视频轨道；

调用subscribe()来订阅远端用户，并在订阅成功后从接口返回或者远端用户对象RemoteUser属性上获取远端音频对象和视频对象；

调用play()来实现远端音视频轨道的播放；

操作步骤

说明

本文中的实现方法仅供参考，您可以根据实际业务需求进行开发。

创建Client对象。

import DingRTC from 'dingrtc';

const client = DingRTC.createClient();

加入频道。

await client.join({
 	appId: joinInfo.appId,
 	token: joinInfo.appId,
 	uid: joinInfo.uid,
 	channel: joinInfo.channel,
 	userName: joinInfo.userName,
});

加入频道所需信息:

属性	类型	描述
appId	string	您在 DingRTC 项目的 AppId，仅支持大小写字母、数字和下划线。
channel	string	频道 Id，字符内容只允许[A-Za-z0-9_-]，长度不超过64个字符。
token	string	频道鉴权令牌
uid	string	标识用户的 Id，字符内容只允许[A-Za-z0-9_-]，长度不超过64个字符。说明同一个用户Id在其他端登录，先入会的端会被后入会的端踢出频道。
userName	string	用户名称，长度不超过UTF-8编码64个字节。

发布或取消发布本地音视频轨道。

创建本地音频轨道和视频轨道

// 摄像头轨道
const cameraTrack = await DingRTC.createCameraVideoTrack({
  frameRate: 15,
  dimension: 'VD_1280x720',
});
// 麦克风轨道
const micTrack = await DingRTC.createMicrophoneAudioTrack();

说明

创建完成后可通过play方法进行本地预览,例如：

cameraTrack.play('#local');
micTrack.play();

发布本地音频轨道和视频轨道

client.publish([cameraTrack, micTrack]);

取消发布本地音频轨道和视频轨道
```
client.unpublish([cameraTrack, micTrack]);
```

订阅或取消订阅远程流。
- 订阅远端音视频
  请在加入房间前在Client对象上监听"user-published"事件，以确保不会错过远端用户发布音视频轨道的通知，在此事件对应的回调中可通过subscribe()来订阅远端用户的音视频轨道；
```
client.on('user-published', (user, mediaType, auxiliary) => {
  client.subscribe(user.userId, mediaType, auxiliary).then((track) => {
    track.play(`#uid${user.userId}`);
  });
});
```
  或者从客户端实例上的remoteUsers属性上，订阅指定远端用户发布的音视频轨道；
```
for (const user of client.remoteUsers) {
  if (user.hasVideo) {
    client.subscribe(user.userId, 'video').then((track) => {
      track.play(`#uid${user.userId}`);
    });
  }
}
```
  说明
  当前还未支持指定到个人的音频订阅，请需要订阅音频时将userId 置为字符串'mcu'，代表订阅的是频道内远端用户合流后的音频。指定到个人的音频订阅将在近期支持。
- 取消订阅远端音视频
```
client.unsubscribe(user.userId, 'video'); // 取消订阅用户的视频轨道
client.unsubscribe(user.userId, 'audio'); // 取消订阅用户的音频轨道
```
  说明
  当前还未支持指定到个人的音频订阅，请需要取消订阅音频时将userId 置为字符串'mcu'，代表取消订阅的是频道内远端用户合流后的音频。指定到个人的音频的取消订阅将在近期支持。
- 订阅不同规格视频流
  当前订阅视频规格有high和low两种，默认为high，如果您需要修改指定用户的订阅视频轨道为流畅模式，请调用以下接口：
```
client.setRemoteVideoStreamType(user.userId, 'low');
```
  或者修改全局默认订阅视频规格：
```
client.setRemoteDefaultVideoStreamType('low');
```
  说明
  此接口作用于后续入会的远端用户，对于调用此接口之前已经入会的远端用户，此接口不会产生影响。
离开频道。
```
client.leave();
```

此接口作用于后续入会的远端用户，对于调用此接口之前已经入会的远端用户，此接口不会产生影响。

后续步骤

您可以下载示例代码，快速运行Demo，实现频道内和其他人进行实时音视频通话，详情请参见运行 Web Demo。