tencent cloud

文档反馈

最后更新时间:2023-12-22 15:54:57

    概述

    欢迎阅读适用于 Web 平台的 Twilio Video 到 TRTC 的迁移指南。本迁移指南将为应用程序从 Twilio 切换到 TRTC 提供无缝过渡。为了确保顺利的迁移过程,本指南在实现接入基础 RTC 视频功能的每个步骤中,都提供了 Twilio 和 TRTC 之间的 API 比较。
    如果您只是计划开发一个新应用程序,而不是进行迁移,您可以直接访问 TRTC 首页文档 您将找到开始新项目所需的所有关于 TRTC 的资料。

    创建应用

    创建一个新的 TRTC 应用程序,然后您可以获得用于 TRTC 服务认证的以下必要信息。

    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

    首先,从 Github 下载 SDK 文件 trtc.js。然后,在您的网页中添加以下代码:
    <script src="trtc.js"></script>

    加入房间

    Twilio
    // 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
    TRTC
    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); }

    发布本地视频/音频

    Twilio
    // 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);
    TRTC
    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();

    订阅远程视频/音频

    Twilio
    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() }) })
    TRTC
    // 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 }); });

    离开房间

    Twilio
    twilioVideo.disconnect()
    TRTC
    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 集成的任何进一步帮助,请随时 联系我们,或者您可以加入我们的 DiscordTelegram。我们将确保顺利集成并解答您可能遇到的任何问题。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持