Twilio Video to TRTC Migration: Guide for Web, iOS, and Android Platforms

Welcome to the Twilio Video to TRTC migration guide for Web, iOS, and Android Platforms. This guide aims to facilitate a seamless transition for applications migrating from Twilio to TRTC. To ensure a smooth migration process, we provide an API level comparison between Twilio and TRTC at each step for implementing basic RTC video functionality.

If you are planning to develop a new application instead of migrating, you can proceed directly to Tencent RTC. There, you will find all the necessary information about TRTC to kickstart your new project.

Tencent RTC Video Features: Elevating Your Communication Experience

Unlock a new era of video communication with Tencent RTC's powerful features:

• Cross-Platform Compatibility: Enjoy video calls across various platforms, ensuring accessibility from any device.
• Customizable Video Solutions: Tailor your video calling experience with flexible layout configurations and branding options.
• AI-Powered Noise Cancellation: Experience crystal-clear conversations by eliminating background noise disruptions.
• Offline Video Call Notifications: Stay connected with notifications for missed calls, even when offline.
• Floating Window Feature: Optimize multitasking during video calls by keeping them ongoing while navigating other tasks.
• Multi-Device Video Synchronization: Transition seamlessly between devices without missing a beat.
• Flexible Video Layout Customization: Personalize video calls to reflect your brand identity with easy layout and style customization using Call APIs.

Pre-announcement: This blog exclusively presents the web edition of our migration guide. If you're seeking guidance for the iOS or Android platform, please refer to our comprehensive documentation for detailed instructions. We aim to provide tailored support for each platform to ensure a smooth transition.

• Twilio Video to TRTC Migration Guide - iOS
• Twilio Video to TRTC Migration Guide -Android

Step 1: Create a TRTC Application

In order to access TRTC service and SDK, a TRTC application must be created first from the console. Click on this page to create a new TRTC application, then you can get the following necessary information for TRTC service authentication.
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 parameter 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.

Step 2：Install and Setup the SDK

By npm

• Use npm to install trtc-sdk-v5 package in your project.

npm install trtc-sdk-v5 --save

• Import the module in the project script. 

import TRTC from 'trtc-sdk-v5';

By script

• Download SDK file trtc.js from Github and add the following code to your webpage:

<script src="trtc.js"></script>

Step 3：Join a Room

In 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 })

In 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);
}

Step 4：Publish Local Video/Audio

In 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);

In 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();

Step 5：Subscribe Remote Video/Audio

In 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()
  })
})

In 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 });
});

Step 6：Leave a Room

In Twilio:

twilioVideo.disconnect()

In 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();

Conclusion

This migration guide outlines the differences in building a video web application using TRTC compared to one with the Twilio Video SDK. Hope the API level "mapping" provided in each step of this guide can facilitate you to switch from Twilio Video to TRTC in a quick and straightforward way.

If you intend to view the guides for iOS or Android platforms, please refer to our documentation: Twilio migration steps on iOS and Android.

If you require developer support or any further assistance regarding to the TRTC integration, please feel free to Contact Us or join us in Discord. We will ensure a smooth integration and address any queries you may have. Your success with TRTC is always our priority.