本文档主要介绍如何订阅房间中其他用户的音视频流,也就是如何播放其他用户的音频和视频。为了方便起见,我们在接下来的文档中,会将“房间中的其他用户”统称为“远端用户”。
在使用 TRTC Web SDK 中,经常会接触到以下对象:
- Client 对象,代表一个本地客户端。Client 类的方法提供了加入通话房间、发布本地流、订阅远端流等功能。
- Stream 对象,代表一个音视频流对象,包括本地音视频流对象 LocalStream 和远端音视频流对象 RemoteStream。Stream 类的方法主要提供音视频流对象的行为,包括音频和视频的播放控制。
步骤1:创建 Client 对象
可以参考文档 进入房间-步骤1 创建 client。
需要特别注意的是,创建 Client 时可选择设置订阅模式,TRTC 提供了两种订阅模式:
- 自动订阅,当收到 stream-added 事件时,SDK 会立刻接收并解码该远端流所包含的音视频数据,这也是 SDK 的默认行为。
- 手动订阅,由于负责屏幕分享的 client 只需推流、不需要拉流,因此可在屏幕分享 client 中关闭自动订阅。
const client = TRTC.createClient({
...,
autoSubscribe: false // 默认为 true 即自动订阅
});
步骤2:监听远端流加入事件并订阅远端流
订阅远端流首先需要知道有哪些远端流可以订阅,可以通过监听事件 Client.on('stream-added') 获取房间内的远端流,收到该事件说明这个远端流可以进行订阅,在事件回调通过 Client.subscribe() 订阅远端音视频流。
client.on('stream-added', event => {
const remoteStream = event.stream;
console.log('远端流增加: ' + remoteStream.getId());
//订阅远端流
client.subscribe(remoteStream);
});
注意:
- 在进房之前监听 Client.on('stream-added') 事件,以确保您不会错过已在房间内的用户的远端流通知。
- 远端流离开等其他事件可以在 API 详细文档 中查看。
步骤3:监听订阅成功事件并播放远端流
在远端流订阅成功事件回调中,通过调用 Stream.play() 方法在网页中播放音视频。play
方法接受一个 div 元素 ID 或者一个 HTMLDivElement 对象作为参数,SDK 会在该 div 元素下自动创建相应的音视频标签并播放音视频。
play
方法更详细的参数说明参见 Stream.play()。
client.on('stream-subscribed', event => {
const remoteStream = event.stream;
console.log('远端流订阅成功:' + remoteStream.getId());
// 播放远端流
remoteStream.play('remote-stream-' + remoteStream.getId());
});
需要特别注意的是,由于浏览器限制自动播放策略的影响,调用 play
方法可能会返回 PLAY_NOT_ALLOWED 错误, 此时 SDK 会弹窗引导用户与页面产生交互。当产生交互后,SDK 会主动调用接口恢复播放。
您也可以在 TRTC.createClient() 接口中将 enableAutoPlayDialog 参数设置为 false,来关闭 SDK 的弹窗功能,并且由自己实现引导用户通过点击等操作调用 Stream.resume() 恢复音视频播放。
client.on('stream-subscribed', event => {
const remoteStream = event.stream;
console.log('远端流订阅成功:' + remoteStream.getId());
// 使用 remoteStream 监听 error 的方式捕捉并处理 0x4043 错误
remoteStream.on('error', error => {
const errorCode = error.getCode();
if (errorCode === 0x4043) {
// PLAY_NOT_ALLOWED, 引导用户手势操作并调用 stream.resume 恢复音视频播放
// remoteStream.resume()
}
});
// 开始播放远端流
remoteStream.play('remote-stream-' + remoteStream.getId());
});
步骤4:进入音视频通话房间
监听事件后,即可调用 Client.join() 进入音视频通话房间。可以参考文档 进入房间-步骤2。
完整代码
const client = TRTC.createClient({
mode: 'rtc',
sdkAppId,
userId,
userSig
});
client.on('stream-added', event => {
const remoteStream = event.stream;
console.log('远端流增加: ' + remoteStream.getId());
//订阅远端流
client.subscribe(remoteStream);
});
client.on('stream-subscribed', event => {
const remoteStream = event.stream;
console.log('远端流订阅成功:' + remoteStream.getId());
// 使用 remoteStream 监听 error 的方式捕捉并处理 0x4043 错误
remoteStream.on('error', error => {
const errorCode = error.getCode();
if (errorCode === 0x4043) {
// PLAY_NOT_ALLOWED, 引导用户手势操作并调用 stream.resume 恢复音视频播放
// remoteStream.resume()
}
});
// 开始播放远端流
remoteStream.play('remote-stream-' + remoteStream.getId());
});
try {
await client.join({ roomId });
console.log('进房成功');
} catch (error) {
console.error('进房失败,请稍后再试' + error);
}