管理与支持产品文档捉虫活动邀您参加！> HOT
文档中心>实时音视频>无 UI 集成>接入音视频引擎（TRTC-SDK）>快速接入>Web & H5

Web & H5

最近更新时间：2025-03-04 11:42:03

我的收藏

本页目录：

本文将介绍如何快速完成 Web&H5 RTC Engine 的接入，实现一个基本的音视频通话。

下载

npm
yarn
npm install trtc-sdk-v5 --save
yarn add trtc-sdk-v5
或者手动下载：
1. 下载 trtc.js。
2. 将 trtc.js 复制到您的项目中。

用法

导入 TRTC SDK

import TRTC from 'trtc-sdk-v5';
如果您手动下载了 trtc.js，您应该使用 <script> 标签来导入 TRTC SDK。
<script src="/your_path/trtc.js"></script>

创建 TRTC 实例

调用 TRTC.create() 方法来创建一个 trtc 实例。
const trtc = TRTC.create();

进入房间

调用 trtc.enterRoom() 进入房间。 此方法通常在“开始通话”按钮的点击回调函数中调用。
参数
类型
描述
sdkAppId
number
您在 TRTC 控制台 中创建的音视频应用程序的 sdkAppId。
userId
string
您指定的用户 ID。
userSig
string
用户签名，请参见 UserSig。
roomId
number
您指定的房间 ID，通常是一个唯一的房间 ID。
有关更详细的参数描述，请参考接口文档 trtc.enterRoom()。
try {
  await trtc.enterRoom({ sdkAppId, userId, userSig, roomId: 8888 });
  console.log('enter room successfully');
} catch (error) {
  console.error('failed to enter room ' + error);
}

打开/关闭麦克风

调用 trtc.startLocalAudio() 打开麦克风并将音频发布到房间。
await trtc.startLocalAudio();
调用 trtc.stopLocalAudio 关闭麦克风并取消发布。
await trtc.stopLocalAudio();

打开/关闭摄像头

调用 trtc.startLocalVideo() 打开摄像头并将视频发布到房间。
// 要预览摄像头图像，您需要在 DOM 中放置一个 HTML 元素，
// 这可以是一个 div 标签，假设其 ID 为 local-video。
const view = 'local-video';
await trtc.startLocalVideo({ view });
调用 trtc.stopLocalVideo关闭摄像头并取消发布
await trtc.stopLocalVideo();

播放远端音频

默认情况下，SDK 会自动播放远端音频，因此您无需手动调用任何 API 来播放远端音频。
自动播放策略限制：
如果用户在进入房间之前没有与页面进行交互，自动音频播放可能会因自动播放策略限制而失败。请参见 处理自动播放限制。
以下代码片段展示了如何关闭自动播放音频，并手动控制远端音频播放。
trtc.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, event => {
    // 当你需要播放远端音频时调用该api
    trtc.muteRemoteAudio(event.userId, false);
    // 停止远端音频
    trtc.muteRemoteAudio(event.userId, true);
})
// 设置 autoReceiveAudio = false 以关闭自动音频播放。
await trtc.enterRoom({ ..., autoReceiveAudio: false });

播放远端视频

1. 在进入房间之前，监听 TRTC.EVENT.REMOTE_VIDEO_AVAILABLE 事件，以接收所有远端用户视频发布事件。
2. 当您收到该事件时，调用 trtc.startRemoteVideo() 来播放远端视频流。
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  // 要播放视频图像，您需要在 DOM 中放置一个 HTMLElement，
  // 这可以是一个 div 标签，假设它的 id 是 ${userId}_${streamType}。
  const view = `${userId}_${streamType}`;
  trtc.startRemoteVideo({ userId, streamType, view });
});

退出房间

调用 trtc.exitRoom() 来退出房间。
await trtc.exitRoom(); 
// 在成功退出后，如果您不再需要使用 trtc 实例，可以调用 trtc.destroy 方法
// 及时销毁实例并释放相关资源。
// 被销毁的 trtc 实例无法再次使用，需要创建一个新的实例。
trtc.destroy();
处理被移出房间的场景
除了用户主动退出房间之外，用户也有可能因为如下原因被移出房间，此时 SDK 会抛出 KICKED_OUT 事件，这时不需要调用 trtc.exitRoom() 退房，SDK 自动进入退房状态。
1. kick：两个相同 userId 的用户进入相同房间，前一个进房的用户会被移出。同名用户同时进入同一房间是不允许的行为，可能会导致双方音视频通话异常，应避免出现这种情况。
2. banned：通过服务端的 RemoveUser | RemoveUserByStrRoomId接口将某个用户移出某个 TRTC 房间。该用户会收到被移事件，reason 为banned。
3. room-disband：通过服务端的 DismissRoom | DismissRoomByStrRoomId接口将某个 TRTC 房间解散，解散房间之后，该房间的所有用户都会收到被移事件，reason 为 room-disband。
trtc.on(TRTC.EVENT.KICKED_OUT, error => {
  console.error(`kicked out, reason:${error.reason}, message:${error.message}`);
});

API Overview

?TRTC 是 TRTC SDK 的主要入口，提供创建 trtc 实例(TRTC.create), TRTC.getCameraList, TRTC.getMicrophoneList, TRTC.isSupported等。
?trtc 实例提供实时音视频通话的核心功能。
进入房间 trtc.enterRoom?
退出房间 trtc.exitRoom?
打开/关闭麦克风 trtc.startLocalAudio/trtc.stopLocalAudio?
打开/关闭摄像头 trtc.startLocalVideo/trtc.stopLocalVideo?
播放/停止远端音频 trtc.muteRemoteAudio?
播放/停止远端视频 trtc.startRemoteVideo/trtc.stopRemoteVideo?

API 生命周期

?

联系我们

如果您是开发者，欢迎您加入我们的 RTC Engine 技术交流平台 zhiliao，进行技术交流和产品沟通。
中国站
目录
http://www.vxiaotou.com