有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
本文档主要介绍如何进入 TRTC 房间中,只有在进入音视频房间后,用户才能订阅房间中其他用户的音视频流,或者向房间中的其他用户发布自己的音视频流。



说明:
本教程基于 5.x TRTC Web SDK 实现,若您使用 4.x 版本 SDK,可参考此教程

实现音视频通话基本逻辑

1. 调用 TRTC.create() 方法创建 trtc 对象。
2. 调用 trtc.enterRoom() 方法进入房间。
3. 在进入房间后,可以开启摄像头和麦克风并发布到房间。
调用 TRTC.startLocalVideo() 开启摄像头并发布到房间。
调用 TRTC.startLocalAudio() 开启麦克风并发布到房间。
4. 当一个远端用户发布了音视频后,SDK 默认情况下会自动播放远端音频。您需要通过如下方式来播放远端视频:
在进房前监听 TRTC.EVENT.REMOTE_VIDEO_AVAILABLE 事件, 就能收到所有远端用户的发布视频事件。
在事件回调函数中,调用 trtc.startRemoteVideo() 方法播放远端视频。




步骤 1:创建 TRTC 对象

TRTC 类的实例代表一个本地客户端。TRTC 的对象方法提供了加入通话房间、预览本地摄像头、发布本地摄像头和麦克风、播放远端音视频等功能。
调用 TRTC.create() 方法创建 TRTC 对象。
const trtc = TRTC.create();
注意:
若您使用 Vue3 框架,此处还需要使用 markRaw 将 trtc 实例标记,避免 Vue 将 trtc 转为 Proxy 代理对象,出现一些不符合预期的行为。
import { markRaw } from 'vue';
const trtc = markRaw(TRTC.create());

步骤 2:进入房间

调用 trtc.enterRoom() 方法进入房间。通常在开始通话按钮的点击回调里进行调用。关键参数:
参数名称
字段含义
补充说明
数据类型
填写示例
sdkAppId
应用 ID
您可以在 实时音视频控制台 中找到您的 sdkAppId,如果没有,则单击“创建应用”按钮创建一个新的应用。
number
1400000123
userId
用户 ID
即用户名,只允许包含大小写英文字母(a-z、A-Z)、数字(0-9)及下划线和连词符。注意 TRTC 不支持同一个 userId 在两台不同的设备上同时进入房间,否则会相互干扰。
string
“mike” 或者 “123321”
userSig
进房鉴权票据
您可以使用 sdkAppId 和 userId 计算出 userSig,计算方法请参见 如何计算及使用 UserSig
string
eJyrVareCeYrSy1SslI...
roomId
房间号
数字类型的房间号。
注意:如果您想使用字符串类型的房间号,请使用 strRoomId 字段,而不要使用 roomId 字段,因为 strRoomId 和 roomId 不可以混用。
number
29834
strRoomId
房间号
字符串类型的房间号。注意:strRoomId 和 roomId 不可以混用,数字类型房间 123 和字符类型房间 "123" 是不同的房间,不互通。
string
"29834"
scene
应用场景
有如下两种模式:
- rtc:实时通话模式
- live:在线直播模式
string
'rtc' 或者 'live'
role
角色
只在live场景下才需要填写该字段,有如下两种角色:
anchor:“主播”角色,可以推流和拉流。
audience:“观众”角色,只能拉流观看,无法推流。
string
'anchor' 或者 'audience'
更详细的参数说明参考接口文档 trtc.enterRoom()
try {
await trtc.enterRoom({ roomId: 8888, scene:'rtc', sdkAppId, userId, userSig });
console.log('进房成功');
} catch (error) {
console.error('进房失败 ' + error);
}
注意:
进房成功后,将会产生音视频通话用量和对应费用,包括观众观看用量或若仅主播单人在房时的音频用量,详细计费请见 音视频通话计费说明