Web

本文档主要介绍如何进入 TRTC 房间中,只有在进入音视频房间后,用户才能订阅房间中其他用户的音视频流,或者向房间中的其他用户发布自己的音视频流。




实现音视频通话基本逻辑

1. 调用 TRTC.create() 方法创建 trtc 对象。
2. 调用 trtc.enterRoom() 方法进入房间,进入后其他用户会收到 TRTC.EVENT.REMOTE_USER_ENTER 进房事件。
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);
}