Twilio 视频到腾讯 RTC
概述
欢迎阅读适用于 Web 平台的 Twilio Video 到 TRTC 的迁移指南。本迁移指南将为应用程序从 Twilio 切换到 TRTC 提供无缝过渡。为了确保顺利的迁移过程,本指南在实现接入基础 RTC 视频功能的每个步骤中,都提供了 Twilio 和 TRTC 之间的 API 比较。
创建应用
SDKAppID
SDKAppID 是 TRTC 应用程序的唯一标识。在创建应用程序时会自动生成。
SDKSecretKey
SDKSecretKey 是用于生成安全签名的关键参数之一。生成的签名确保在调用 SDK 的初始化和登录 API 时访问 TRTC 服务。
安装并设置 SDK
By npm
1. 在您的项目中使用 npm 安装 trtc-sdk-v5 包。 在项目脚本中导入模块。
npm install trtc-sdk-v5 --save
2. 在项目脚本中导入模块
import TRTC from 'trtc-sdk-v5';
By script
<script src="trtc.js"></script>
加入房间
// Replace Twilio Video import import * as TwilioVideo from 'twilio-video' var twilioVideo = TwilioVideo var twilioRoom twilioRoom = await twilioVideo.connect(TOKEN, { name: 'yourName', audio: false, video: false, dominantSpeaker: true
const trtc = TRTC.create(); try { await trtc.enterRoom({ roomId: 8888, scene:'rtc', sdkAppId, userId, userSig }); console.log('Entered the room successfully'); } catch (error) { console.error('Failed to enter the room ' + error); }
发布本地视频/音频
// video let localVideoTrack = await twilioVideo.createLocalVideoTrack({ height: { ideal: 720, min: 480, max: 1080 }, width: { ideal: 1280, min: 640, max: 1920 }, aspectRatio: 16/9, }) twilioRoom.localParticipant.publishTrack(localVideoTrack) const localMediaContainer = document.getElementById('video-container-div') localMediaContainer!.appendChild(localVideoTrack.attach()) // audio let localAudioTrack = await twilioVideo.createLocalAudioTrack() twilioRoom.localParticipant.publishTrack(localAudioTrack); const audioElement = localAudioTrack.attach(); document.body.appendChild(audioElement);
const view = document.getElementById('localVideo'); const cameraList = await TRTC.getCameraList(); if (cameraList[0]) { await trtc.startLocalVideo({ view, option: { cameraId: cameraList[0].deviceId, } }); } // 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 }); await trtc.startLocalAudio();
订阅远程视频/音频
twilioRoom.on('participantConnected', (participant) => { participant.on('trackSubscribed', (track) => { // a user turned on their video, render it document.getElementById('remote-video-container-div').appendChild(track.attach()); }); participant.on('trackUnsubscribed', (track) => { // a user turned off their video, stop rendering it var selfTwilioVideo = document.getElementById('remote-video-container-div') selfTwilioVideo.querySelector('video').remove() }) })
// Listen for the TRTC.EVENT.REMOTE_VIDEO_AVAILABLE event before entering the room to receive all remote user video publishing events. 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 }); });
离开房间
twilioVideo.disconnect()
await trtc.exitRoom(); // After the exit is successful, if you do not need to use the trtc instance later, you can call the trtc.destroy method to destroy the instance and release related resources in a timely manner. The destroyed trtc instance cannot be used again and a new instance needs to be created. trtc.destroy();
总结
通过与 Twilio Video API 的接入对照,本迁移指南概述了如何使用 Tencent RTC (TRTC) 为 Web 平台构建基本的视频 RTC 体验。本指南中每个步骤的 API 级别“映射”将帮助开发者快速、直接地从 Twilio Video 切换到 TRTC。
TRTC 有更多与音视频的功能及服务,可以帮助开发者实现经济高效、低延迟和高质量的互动音视频服务。有关 TRTC 功能和实现规范的详细信息,请参阅Tencent RTC 官方网站。如果您需要开发者支持或关于 TRTC 集成的任何进一步帮助,请随时 联系我们,或者您可以加入我们的 Discord 和 Telegram。我们将确保顺利集成并解答您可能遇到的任何问题。