快速集成 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