This guide walks you through how to migrate your existing Twilio Video implementation to Vidyo Javascript SDK. To complement this guide, we have also developed a sample app that can switch between the Twilio SDK and Vidyo SDK by simply using a build-time configuration. This app provides a handy “translation guide” between Twilio and VidyoClient (Connector) JavaScript SDK. Navigate here for complete source code reference:
If you are starting a new project from scratch, we recommend looking at:
Install
To begin, install the VidyoClient JavaScript SDK:
npm install vidyoclient-nativewebrtc-sdk
You can uninstall the Twilio SDK from your project by uninstalling the package:
npm uninstall twilio-video
Authorize
Twilio uses JSON Web Tokens (JWT) to generate a token for users to join sessions. Vidyo follows a different model: a meeting room is created on backend middleware (referred to as the VidyoPortal) which generates a meeting link, and users join the room through their browser by clicking on the meeting link. For more information visit Getting Started.
Join meeting room
Twilio requires a token to join a meeting room.
import * as TwilioVideo from 'twilio-video'
var twilioVideo = TwilioVideo
var twilioRoom
twilioVideo.connect(TOKEN, {name: 'yourName', audio: false, video: false, dominantSpeaker: true}). then((room) => {
twilioRoom = room
})
Joining a meeting in the Vidyo SDK requires the following:
URL of the VidyoPortal that owns/created the room;
Room key;
Room pass code (optional). If this is set for a specific room, users must enter the pass code to enter the room. This pass code is typically received as part of the meeting invitation and is available at the moment when the room is created on VidyoPortal.
The Vidyo SDK automatically sets the audio, video, and dominant speaker parameters, so the user does not need to set these parameters explicitly.
import { VC } from "vidyoclient-nativewebrtc-sdk";
// create vidyoConnector object
vidyoConnector = await VC.CreateVidyoConnector({
viewId: "renderer", // Div ID where video will be rendered
viewStyle: "VIDYO_CONNECTORVIEWSTYLE_Default", remoteParticipants: 8, // max number of video tiles to render to render
logFileFilter: "debug@VidyoClient",
logFileName: "",
userData: 0,
constraints: {}
});
// connect to room
await vidyoConnector.ConnectToRoomAsGuest({
host: portalURL, // URl of the portal
roomKey: roomKey, // room ID
displayName: ‘yourName’, // users display name
roomPin: roomPin, // optional pin
onSuccess: () => {
console.log(`vidyoConnector.ConnectToRoomAsGuest : onSuccess callback received`);
},
onFailure: (reason) => {
console.error("vidyoConnector.Connect : onFailure callback received", reason);
},
onDisconnected: (reason) => {
console.log("vidyoConnector.Connect : onDisconnected callback received", reason);
}
});
Video
While Twilio requires additional configuration to set the quality of the video, Vidyo handles the video quality automatically based on network conditions and device capabilities. In low bandwidth conditions Vidyo prioritizes audio over video, and shared content video tiles over participant video. Vidyo also supports configuration options to limit maximum resolution of local or remote video.
Render local video
Twilio has a concept of video and audio tracks. To render the self-view, Twilio appends a video element inside the specified div.
Vidyo also selects local camera automatically based on system default camera device. So you don't have to call above API explicitly if you are fine with default device selection.
Turn the camera off
Since Twilio video is track based - you must loop through each video track to unpublish the video, stop the video camera, and remove the video element from the DOM:
Vidyo’s implementation requires you to call a single API function to disable the local camera:
vidyoConnector.SetCameraPrivacy({privacy: true});
Render remote user video
Twilio uses participantConnected and trackSubscribed event listeners to determine which remote videos to render:
twilioRoom.on('participantConnected', (participant) => {
participant.on('trackSubscribed', (track) => {
// a user turned on their video, render it
document.getElementById('twilio-user-view-div').appendChild(track.attach());
});
participant.on('trackUnsubscribed', (track) => {
// a user turned off their video, stop rendering it
var selfTwilioVideo = document.getElementById('twilio-user-view-div')
selfTwilioVideo.querySelector('video').remove()
})
})
Vidyo manages the video rendering part automatically, but the user can also register callbacks to, for example, listen to when a participant joins or leaves a room:
vidyoConnector.RegisterParticipantEventListener({
onJoined: function(participant) {
// user joined
},
onLeft: function(participant) {
// user left
},
})
Audio
Select local microphone
Since Twilio audio is track based - you must loop through each audio track to start the audio, and add the audio element to the DOM:
Twilio has event listeners for participant management, allowing you to detect changes that occur during a meeting.
User joins or leaves a session:
twilioRoom.on('participantConnected', (participant) => {
// user joined
})
twilioVideo.on('participantDisconnected', (participant) => {
// user left
})
Active speaker changes:
twilioVideo.on('dominantSpeakerChanged', (participant) => {
// new active speaker
})
Vidyo supports the concept of event listeners. Commonly used event listeners include:
RegisterParticipantEventListener - listens for participant join/leave events
RegisterRemoteCameraEventListener - listens for camera mute/unmute events
RegisterRemoteMicrophoneEventListener - listens for microphone mute/unmute events
For example:
vidyoConnector.RegisterRemoteCameraEventListener({
onAdded: function (remoteCamera, participant) {
// New remote camera is available
}
onRemoved: function (remoteCamera, participant) {
// Remote camera became unavailable
},
})
End session
twilioVideo.disconnect()
vidyoConnector.Disconnect()
Additional information
This guide covers only the fundamentals for migrating an application from the Twilio JavaScript SDK to the Vidyo JavaScript SDK. If you do not see a piece of functionality described in this guide, please take a look at our API reference or the VidyoPlatform Github page.
If you have any technical questions or run into issues with your migration, you can reach out to the Support team at support@vidyocloud.com
