Web_实现基本功能_快速入门_音视频通信-阿里云

阿里云RTC的基本功能包含创建实例、加入频道、本地发布、订阅远端和离开频道等。当您成功创建实例，您可以进行本地预览视频功能，进行简单的预览和测试。

前提条件

在实现基本功能前，请您确保下载最新SDK，请参见SDK下载。

获得加入频道必须的频道鉴权令牌（Token）：

您可以在控制台生成临时Token校验加入频道是否成功，详情请参见控制台生成Token。
在安全要求更高的场景下，建议您在服务端生成Token，详情请参见服务端生成Token。

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

操作步骤

初始化SDK。

var aliWebrtc = new AliRtcEngine();    // 不支持多实例

本地预览。在创建完AliRtcEngine实例后，您可以通过video标签播放。

aliWebrtc.startPreview(
    video    // html中的video元素
).then(()=>{
}).catch((error) => {
    // 预览失败
});

加入频道。

aliWebrtc.joinChannel({
    userid,         // 用户ID，只能由数字、字母、下划线组成
    channel,        // 频道
    appid,          // 应用ID
    nonce,          // 随机码
    timestamp,      // 时间戳
    gslb,           // gslb服务地址
    token,          //令牌
},displayName).then(()=>{
    // 入会成功
} ,(error)=>{
    // 入会失败，打印错误内容，可以看到失败原因
    console.log(error.message);
});


参数	描述
AppID	应用ID，在控制台应用管理页面创建和查看。
ChannelId	频道ID。1~64位，支持大小写字母、数字、下划线（_）、中划线（-）。
UserId	用户ID。1~64位，支持大小写字母、数字、下划线（_）、中划线（-）。说明同一个用户ID在其他端登录，先入会的端会被后入会的端踢出频道。
Nonce	随机码。需要加上前缀AK-，由字母[a-zA-Z]和数字[0-9]组成，不包含特殊字符，最大64字节。例如：AK-2b9be4b25c2d38c409c376ffd2372be1。
TimeStamp	频道过期时间戳。代表令牌有效时间为当前时间+所选择小时数。
Token	频道鉴权令牌，计算方法：`token = sha256(appId + appKey + channelId + userId + nonce + timestamp)`。
GSLB	服务地址，该参数是数组类型，当前请使用：`["https://rgslb.rtc.aliyuncs.com"]`，请您通过业务服务器下发到客户端SDK，不建议您将该地址固化在客户端代码。

说明加入频道需要传递两个参数。第一个是AliRtcAuthInfo，第二个参数是频道里显示的用户名。

发布或取消发布本地流。
- 发布本地流。如果需要让远程订阅本地的流，您需要调用publish接口，发布本地流，远程会接收到onPublisher回调。
```
aliWebrtc.publish().then(()=>{
} ,(error)=>{
    console.log(error.message);
});
```
- 取消发布本地流。当您取消发布本地流时，远程会收到onUnPublisher回调。
```
aliWebrtc.unPublish().then(()=>{
} ,(error)=>{
    console.log(error.message);
});
```

订阅onPublisher回调或onUnPublisher回调。

订阅onPublisher回调。当远程用户推流时，在SDK里会触发onPublisher回调，通过订阅这个回调，能够得到频道里已经推流的用户。

aliWebrtc.on('onPublisher',(publisher) =>{
    //远程发布者userId
    console.log(publisher.userId);
    //远程发布名字
    console.log(publisher.displayName);
    //远程流内容，streamConfigs是数组格式
    console.log(publisher.streamConfigs);
  });

订阅onUnPublisher回调。当远程用户结束推流时，会触发这个回调。

aliWebrtc.on('onUnPublisher',(publisher) =>{
    //远程发布者userId
    console.log(publisher.userId);
    //远程发布名字
    console.log(publisher.displayName);
});

说明 onPublisher、onUnPublisher回调只有加入频道以后才会触发。

订阅或取消订阅远程流。

说明 1.10及以上版本不支持onMediaStream事件。

订阅和显示远程流。通过subscribe方法订阅远程流，订阅成功后在调用setDisplayRemoteVideo显示远程流。

aliWebrtc.subscribe(userId).then((userId)=>{
    aliWebrtc.setDisplayRemoteVideo(
        userId,       // 用户ID
        video,        // html中用于显示stream对象的video元素
        1             // 1表示摄像头流（大流和小流）和音频流，2表示屏幕分享流
    )
},(error)=>{
    console.log(error.message);
});

取消订阅。通过unSubscribe方法可以取消订阅远程流。

aliWebrtc.unSubscribe(userId).then(() => {
},(error)=>{
    console.log(error.message);
});

离开频道。
```
aliWebrtc.leaveChannel().then(()=>{
} ,(error)=>{
    console.log(error.message);
});
```
您可以下载示例代码，快速跑通Demo，实现频道内和其他人进行实时音视频通话，详情请参见Web Demo。
接口方法详情请参见AliRtcEngine接口。