Twilio Video to Tencent RTC
Overview
Welcome to our comprehensive guide designed to assist developers in migrating from Twilio Video to Tencent RTC (TRTC) on the Web platform. This document provides a detailed comparison at the API level between Twilio and TRTC, and outlines each step required to implement basic RTC video functionality.
For those planning to develop a new application, you can directly visit the Tencent RTC website and documentation for all the necessary resources and information.
Create a TRTC Application
Create a new application of Tencent RTC (TRTC), then you can get the following necessary information for the authentication of TRTC service.
SDKAppID
SDKAppID is used to uniquely identify a TRTC application. It is generated automatically when an application is created.
SDKSecretKey
SDKSecretKey is one of the key parameters to be used to generate the security signature. The generated signature ensures the access of TRTC service when calling the initialization and login API of the SDK.
Install and Set Up the SDK
By npm
1. Use npm to install trtc-sdk-v5 package in your project.
npm install trtc-sdk-v5 --save
2. Import the module in the project script.
import TRTC from 'trtc-sdk-v5';
By script
<script src="trtc.js"></script>
Join a Room
// 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); }
Publish Local Video/Audio
// 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();
Subscribe Remote Video/Audio
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 }); });
Leave a Room
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();
Conclusion
Compared to Twilio Video, this migration guide outlines how to use Tencent RTC (TRTC) to build a basic video RTC experience for the Android platform. The API level "mapping" for each step in this guide will facilitate the developers to switch from Twilio Video to TRTC in a quick and straightforward way.
TRTC has more feature sets that can help developers implement cost-effective, low-latency and high-quality interactive audio/video services. For comprehensive details on TRTC features and the implementation specification, please refer to the Tencent RTC website. If you require developer support or any further assistance regarding the TRTC integration, feel free to contact us, or you can join our Discord and Telegram. We will ensure a smooth integration and address any queries you may have.