快速集成 SDK

CloudHub JSSDK 的导入，选择如下任意一种方法获取 CloudHub JSSDK。

准备

下载 SDK 后直接引入

例如：

<script src="./sdk/cloudhubrtcjssdk.js" type="text/javascript"></script>

Note： 使用这种方式导入则会在 window 下绑定 CloudHubRTC，因此可以直接使用 window.CloudHubRTC 或者 CloudHubRTC。

npm 获取 SDK

使用该方法需要先安装 npm，详见 npm 快速入门。

1.运行安装命令：

npm install cloudhub-rtc-js-sdk --save

2.在你的项目引入这个模块：

import CloudHubRTC from 'cloudhub-rtc-js-sdk';

基本流程

一次简单的音视频直播的步骤一般如下：

调用 createClient 创建本地 client 对象。
根据 AppId 初始化 client, 并调用 client.joinChannel 加入频道。
调用 createStream 创建本地流对象 localStream
调用 localStream.init 初始化第 3 步创建的本地流，并用 localStream.playVideo 播放本地视频
通过 client.publish 将本地视频发布到频道中。
通过 client.subscribe 订阅频道中其他用户的视频并播放
调用 client.leaveChannel 离开频道

开始

1. 初始化客户端

const config = {
  mode: 'live',
  codec: 'vp8',
};
const client = CloudHubRTC.createClient(config);

参数详见createClient

2. 设置用户角色

直播频道有两种用户角色：主播和观众，默认的角色为观众。直播频道内的用户，只能看到主播的画面、听到主播的声音。

设置频道场景为直播后，你可以调用 setClientRole 方法设置用户角色。

// Role 的值可以是 "host" 或者 "audience"。
client.setClientRole("host", errInfo => {
  if (!errInfo) {
    // setClientRole success
  } else {
    // setClientRole error
  }
});

参数详见setclientrole

Note： 只有直播需要设置角色

3. 加入目标频道

client.init(appId,{},
  () => {
    client.joinChannel(null,channelId,'',{},
        myUserId => {
            console.log('Channel joining succeeded, myUserId:', id);
        },
        errCode => {
            console.error('Failed to join the room', errCode);
        },
    );
  },
  err => {
      console.error('initialization failed', err);
  },
);

参数详见joinChannel, init

4. 创建并播放本地音视频

当用户角色设为主播时，成功加入频道后，就可以创建并发布本地音视频了。

const localStream = CloudHubRTC.createStream({
    uid: myUserId,
    type: 'video',
});
localStream.init({}, errInfo => {
    if (errInfo) {
        console.error('stream init error：', errInfo);
    }
    localStream.playVideo(videoEleId, {}, err => {
        console.error('err', err)
    });
});

参数详见createStream
参数详见init
参数详见playVideo

5. 发布本地视频

发布音视频流后，频道内的其他用户可订阅该音视频流并播放


client.publish(localStream, {});

参数详见publish

6. 订阅远端音视频并播放

频道内有用户发布音视频流后会触发 ‘stream-added’ 事件, 监听到该事件后可订阅音视频流;
订阅成功后本地会触发 ‘stream-subscribed’ 事件;
如果订阅流中包含视频，还会触发 first-video-frame-decode 事件;
如果订阅流中包含音频，也会触发 first-audio-frame-decode 事件。

client.on('stream-added', data => {
  const { stream } = data;
  client.subscribe(stream, {}, err => {
      console.error("stream subscribe failed", err);
      // 处理订阅失败的代码逻辑
  });
})

// 订阅成功后触发回调
client.on('stream-subscribed', data => {
    const { stream } = data;
    const streamId = stream.getId();
    const type = stream.getType();
    switch (type) {
        case 'video': {
          stream.playVideo(videoBoxId, {fit: "contain"}, function(StreamPlayError){
              console.error("playVideo StreamPlayError", StreamPlayError);
          });
          stream.playAudio({}, errorInfo => {
              console.error('playAudio fail,errorInfo:', errorInfo);
          });
          break;
        }
    }
});

Note： stream-subscribed 事件返回的data.getType()代表远端用户当前发布的媒体类型

audio: 远端用户发布了音频轨道。
video: 远端用户发布了视频轨道。
screen: 远端用户发布了桌面共享。
media: 远端用户发布了媒体流。
参数详见subscribe, playVideo, playAudio

7. 离开频道

// 销毁创建的本地音视频轨道，解除网页对摄像头和麦克风的访问。
localStream.close();
// 离开频道
client.leaveChannel();

参数详见leavechannel