Try Live Demo

This guide is a continuation of the Twilio Migration series and walks you through how to migrate your existing Twilio Video web implementation to the Ant Media Server web SDK. If you’re starting a new project from scratch, we recommend using the Ant Media Server AWS Wizard for ease of deployment and see the Ant Media Server WebRTC JS SDK as it contains more details about the usage and features of the JavaScript SDK.

In case you haven’t seen it, please check out the first blog post of this series, where we discussed the 7 smart reasons to migrate from Twilio Video to the Ant Media Server.

Let’s get started πŸ™‚

Get Your Ant Media Server Endpoints

The first step while migrating from Twilio video is to have the Ant Media Server endpoints and for that, you need to install/launch the Ant Media Server.

You can install Ant Media Server through AWS, Azure, or Google Cloud Marketplaces to have a single standalone instance. You can install auto-scalable solutions according to your number of users. You can use Kubernetes or Auto-Scalable Groups in your Cloud Providers. Moreover, we’ve got an AWS Streaming Service Wizard that makes life easy.

Watch the AWS Wizard demonstration

Install The Web SDK

Install the Ant Media Server Web (JS) SDK.

npm i @antmedia/webrtc_adaptor

Or, use the Ant Media Server JS SDK CDN script tag.

<script src="https://cdn.skypack.dev/@antmedia/webrtc_adaptor@SNAPSHOT"></script>

You can remove the Twilio SDK from your project by uninstalling the package.

$ npm uninstall twilio-video

Or, if using the Twilio CDN, remove the script tag from index.html.

Authorize

Twilio video uses JSON Web Tokens (JWT) to generate a token for users to join sessions. Ant Media Server can use JWT, One-Time, Hash-based, and TOTP tokens for users to join sessions. On your server, replace your Twilio Video JWT generation logic with the Ant Media Server token generation logic. This is optional and not mandatory.

Start and Join sessions

Create the WebRTCAdaptor

import { WebRTCAdaptor } from "@antmedia/webrtc_adaptor" 

var webRTCAdaptor = new WebRTCAdaptor({
	websocket_url: "wss://AMS_URL/LiveApp/websocket",
     localVideoElement: document.getElementById("localVideo"),
});
  • websocket_url is the URL of the Ant Media Server + Application Name.
  • localVideoElement: it is the video element in the HTML page to show local video (own camera)

Create a session and join

webRTCAdaptor.publish("publishStreamId", "token", "", "", "streamName", "roomName", "");
webRTCAdaptor.play("roomName");
  • A session for Twilio is referred to as a room in the Ant Media Server.
  • publishStreamId: Unique ID for the participant.
  • Token: This is optional if not using stream security.
  • streamName: name for the participant
  • roomName: session ID

Video

By default, the Ant Media Server publishes video with a bitrate of 1200kbps and 480p resolution. However, the browser can adjust the video resolution according to the bandwidth. You can change these parameters by modifying the media constraints.

Start Video

The camera is turned on automatically and video is rendered on a video element of HTML5.

<video id="localVideo" autoplay muted controls playsinline></video>
  • In Ant Media Server, the video element id is provided as localVideoElement while creating the WebRTCAdaptor, and then it starts automatically.

Screen Share

If you want to publish the screen instead of the camera, you can call

webRTCAdaptor.switchDesktopCapture("publishStreamId");

The above will replace the camera with the screen. If you want to keep the camera stream on, you will need to create a second WebRTC adaptor.

If you want to switch to the camera again, you can call

webRTCAdaptor.switchVideoCameraCapture("publishStreamId");

Turn the camera off

Twilio Video is track-based, so you must loop through each video track to unpublish the video, stop the video camera, and remove the video element from the DOM. Ant Media Server simplifies this by providing one function.

webRTCAdaptor.turnOffLocalCamera();

Turn the camera on

webRTCAdaptor.turnOnLocalCamera();

Render remote user videos

When we get a callback “newTrackAvailable” from webrtcadaptor. The callback video track for the remote stream is provided as obj.track.

Create a video element in HTML

<video id="remoteVideo-1" controls autoplay playsinline></video>

Create media stream

document.getElementById("remoteVideo-1").srcObject = new MediaStream();

Add the track in the callback

document.getElementById("remoteVideo-1").srcObject.addTrack(obj.track)

Audio

The audio starts automatically as well. You can change audio parameters based on the media constraints. You may also add Noise Suppression and Echo Cancellation.

Start audio

Audio is started automatically when you publish the stream.

Mute microphone

Since Twilio Video is track-based, you must loop through each audio track to mute the microphone. AMS simplifies this by providing one function.

Replace your Twilio mute audio track logic with the Ant Media Server’s muteLocalMic() function.

webRTCAdaptor.muteLocalMic();

Unmute microphone

Since Twilio Video is track-based, you must loop through each audio track to unmute the microphone, but with AMS, you need only one function.

Replace your Twilio unmute audio track logic with the Zoom unmuteLocalMic() function.

webRTCAdaptor.unmuteLocalMic();

Play remote user audio

Similar to the video, you will get an audio track with a “newTrackAvailable” callback and you can add it to the player in the same way too.

document.getElementById("remoteVideo-1").srcObject.addTrack(obj.track)

Event Listeners

For participant management, the Ant Media Server has callbacks to help you maintain the state for everyone connected.

  • User connection changes, including join, leave, publish, and play, etc.
  • User video changes, such as when the user turns the camera on or off.
  • User audio changes, including start audio, mute, unmute, and many more.

Please check the JavaScript SDK callback documentation, as it contains more details about the different callbacks and their usage.

User Connection Changes

Utilize user connection change event listeners to be notified when a user joins, when they change the state of their microphone, when they leave the session, and when a new user joins.

Participant connected

When a participant is connected, the newTrackAvailable is called twice, both for video and audio.

Participant disconnected

When a participant is disconnected, we can understand this by checking the onremovetrack callback for the corresponding track.

obj.stream.onremovetrack = event => {
            console.log("track removed");
          }

The below code handles the joining and removal of other participants

webRTCAdaptor.callback = (info, obj) => {
				if (info == "newTrackAvailable") {          
          document.getElementById("remoteVideo-1").srcObject.addTrack(obj.track)
		      obj.stream.onremovetrack = event => {
            console.log("track removed");
          }          
        }
},

Active speaker changes

By using the data channel, audio track levels of all participants can be received from the server. Or it can be obtained from the track by using the sound meter.

Leave and End Sessions

webRTCAdaptor.stop(publishStreamId);
webRTCAdaptor.stop(roomName);

REST APIs and Webhooks

Ant Media Server has a full suite of REST APIs and Webhooks to make the integration easier.

Samples

We have created a codepen.io sample to make life easier and demonstrate these features. Open the sample from two tabs of the browser to check the conference functionality.

Conclusion: Twilio Web Migration

Now that you know how to migrate your existing Twilio Video web implementation to the Ant Media Server web SDK, stay tuned for detailed step-by-step technical guides for the Android and iOS SDKs. Let’s get you migrated to our Ant Colony πŸ™‚

Contact US

If you have questions or need any support, contact us via a form or schedule a meeting to have a coffee and chat, or write directly to contact@antmedia.io

Ensure you leverage our comprehensive documentation and community knowledge base to facilitate the migration process.

Categories: Tutorial

Mohit Dubey

Mohit is your go-to Technical Support Engineer at Ant Media Server with the aim to make the streaming seamless and accessible, proficient in navigating cloud platforms. He likes to contribute towards product installation/deployment, testing, documentation, troubleshooting, and customer support, etc. Also, well-versed with AWS Streaming Wizard and the ins and outs of Ant Media Server.