集成

本教程主要介绍如何实现一个基本的音视频通话。

安装

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() 打开摄像头并发布到房间。
// To preview the camera image, you need to place an HTMLElement in the DOM,
// which can be a div tag, assuming its id is local-video.
const view = 'local-video';
await trtc.startLocalVideo({ view });
调用 trtc.stopLocalVideo 关闭摄像头并取消发布。
await trtc.stopLocalVideo();

播放远程音频

默认情况下,SDK会自动播放远程音频,因此您无需调用任何API来手动播放。
自动播放策略限制:
如果用户在进入房间之前没有与页面进行交互,则由于 自动播放策略限制,音频自动播放可能会失败。需要参见 自动播放限制处理 进行处理。
以下代码片段展示了当您不希望自动播放音频时如何调用 API 来播放远程音频。
trtc.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, event => {
// Call this api when you need to play remote audio.
trtc.muteRemoteAudio(event.userId, false);
// Stop remote audio
trtc.muteRemoteAudio(event.userId, true);
})
// Setting autoReceiveAudio = false to turn off automatic audio playback.
await trtc.enterRoom({ ..., autoReceiveAudio: false });


播放远程视频

1. 进入房间前监听 TRTC.EVENT.REMOTE_VIDEO_AVAILABLE 事件,以接收所有远程用户视频发布事件。
2. 在收到该事件时,通过 trtc.startRemoteVideo() 播放远端视频流。
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
// To play the video image, you need to place an HTMLElement in the DOM,
// which can be a div tag, assuming its id is `${userId}_${streamType}`
const view = `${userId}_${streamType}`;
trtc.startRemoteVideo({ userId, streamType, view });
});

退出房间

调用trtc.exitRoom() 退出房间并结束音视频通话。
await trtc.exitRoom();
// After the exit is successful, you can call the trtc.destroy method to
// destroy the instance and release related resources in a timely manner
// if you do not need to use the trtc instance later.
// The destroyed trtc instance cannot be used again and a new instance needs to be created.
trtc.destroy();
处理被踢
除了主动退出房间外,用户还可能因为以下原因被踢出房间。
1. kick:当两个具有相同userId的用户进入同一个房间时,先进入的用户将被踢出。这是不允许的,因为这可能会导致双方之间的音频和视频通话异常,所以您应该避免这种情况的发生。
2. banned:通过服务端的 RemoveUser | RemoveUserByStrRoomId 接口将某个用户踢出某个 TRTC 房间,该用户会收到被踢事件,reason 为 banned .
3. room-disband:通过服务端的 DismissRoom | DismissRoomByStrRoomId接口将某个 TRTC 房间解散,解散房间之后,该房间的所有用户都会收到被踢事件,reason 为 room_disband。
当用户被踢出时,SDK 会抛出 KICKED_OUT 事件。
trtc.on(TRTC.EVENT.KICKED_OUT, error => {
console.error(`kicked out, reason:${error.reason}, message:${error.message}`);
});

API 概述

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 全流程





联系我们

如果您在实施过程中遇到任何问题,请随时在 GitHub issue上提问,我们将尽快处理。