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

前提条件

在实现基本功能前,请您确保下载最新SDK,请参见SDK下载
说明 本文中的实现方法为主要功能方法,仅供参考,您可以根据您的业务需求进行实际开发。

操作步骤

  1. 初始化SDK。
    var aliWebrtc = new AliRtcEngine();    // 不支持多实例   
    1. 本地预览。在创建完AliRtcEngine实例后,您可以通过video标签播放。
      aliWebrtc.startPreview(
          video    // html中的video元素
      ).then(()=>{
      }).catch((error) => {
          // 预览失败
      });
  2. 加入频道。
    aliWebrtc.joinChannel({
        userid,         // 用户ID,只能由数字、字母、下划线组成
        channel,        // 频道
        appid,          // 应用ID
        nonce,          // 随机码
        timestamp,      // 时间戳
        gslb,           // gslb服务地址
        token,          //令牌
    },displayName).then(()=>{
        // 入会成功
    } ,(error)=>{
        // 入会失败,打印错误内容,可以看到失败原因
        console.log(error.message);
    });
    说明 加入频道需要传递两个参数。第一个是频道鉴权令牌信息,需要您搭建AppServer调用音视频通信的API去获取,第二个参数是频道里显示的用户名。
  3. 发布或取消发布本地流。
    • 发布本地流。如果需要让远程订阅本地的流,您需要调用publish接口,发布本地流,然后远程会接收到onPublisher回调。
      aliWebrtc.publish().then(()=>{
      } ,(error)=>{
          console.log(error.message);
      });
    • 取消发布本地流。当您取消发布本地流时,远程会收到onUnPublisher回调。
      aliWebrtc.unPublish().then(()=>{
      } ,(error)=>{
          console.log(error.message);
      });
  4. 订阅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回调只有加入频道以后才会触发。
  5. 订阅或取消订阅远程流。
    说明 1.10及以上版本不支持onMediaStream事件。
    1. 订阅和显示远程流。通过subscribe方法订阅远程流,订阅成功后在调用setDisplayRemoteVideo显示远程流。
      aliWebrtc.subscribe(userId).then((userId)=>{
          aliWebrtc.setDisplayRemoteVideo(
              userId,       // userId是用户ID
              video,        // html中用于显示stream对象的video元素
              1             // 1表示摄像头流(大流和小流)和音频流,2表示屏幕分享流
          )
      },(error)=>{
          console.log(error.message);
      });
    2. 取消订阅。通过unSubscribe可以取消订阅远程流。
      aliWebrtc.unSubscribe(userId).then(() => {
      //userId是用户ID
      },(error)=>{
          console.log(error.message);
      });
  6. 离开频道。
    aliWebrtc.leaveChannel().then(()=>{
    } ,(error)=>{
        console.log(error.message);
    });

操作样例

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