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_adaptorOr, 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-videoOr, 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.
