实时音视频 Web-无 UI 集成-文档中心-腾讯云

本文档主要介绍如何进入 TRTC 房间中，只有在进入音视频房间后，用户才能订阅房间中其他用户的音视频流，或者向房间中的其他用户发布自己的音视频流。
﻿
﻿
﻿
说明：
本教程基于 5.x TRTC Web SDK 实现，若您使用 4.x 版本 SDK，可参考此教程。
﻿5.x 与 4.x 版本的区别。
实现音视频通话基本逻辑
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);
}
注意：
进房成功后，将会产生音视频通话用量和对应费用，包括观众观看用量或若仅主播单人在房时的音频用量，详细计费请见 音视频通话计费说明。
﻿

参数名称	字段含义	补充说明	数据类型	填写示例
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'

Web

本页目录：

实现音视频通话基本逻辑

步骤 1：创建 TRTC 对象

步骤 2：进入房间