How to Implement Twilio Video API for Video Calls in JavaScript

Setting Up the Environment

• Ensure you have installed Node.js as it's required to run the Twilio Video JavaScript SDK.

 

• Use a package manager like npm or yarn to include the Twilio Video SDK in your project. Run npm install twilio-video in your project directory.

Creating a Basic Video Room

• To start using the Twilio Video API, you need to generate access tokens. These tokens should be generated on a backend server for security reasons.

 

• Once you have the server-side token generator set up, ensure that your JavaScript code can receive a valid token.

 

• Import the Twilio Video library in your JavaScript file.

import { connect, createLocalVideoTrack } from 'twilio-video';

• Now, create a function to connect to the Twilio Video service using the access token.

async function joinVideoRoom(token, roomName) {
  try {
    const room = await connect(token, { name: roomName });
    console.log(`Connected to Room: ${room.name}`);
    
    room.on('participantConnected', participant => {
      console.log(`Participant "${participant.identity}" connected`);
      participant.on('trackSubscribed', track => {
        document.getElementById('remote-media-div').appendChild(track.attach());
      });
    });
  } catch (error) {
    console.error(`Unable to connect to Room: ${error.message}`);
  }
}

Handling Video Tracks

• To start or stop your local video, use the createLocalVideoTrack function. Attach it to a DOM element to display the local video stream.

 

• Create a simple helper function to initialize and attach the local video track.

async function setupLocalVideo() {
  const localVideoTrack = await createLocalVideoTrack();
  const localMediaContainer = document.getElementById('local-media-div');
  localMediaContainer.appendChild(localVideoTrack.attach());
}

Displaying Remote Media

• Every participant in a video room can publish audio and video tracks. Whenever a participant adds a video track, you need to handle this event and attach the track to the DOM.

 

• Add handling logic inside the participantConnected listener from the earlier step.

room.on('participantConnected', participant => {
  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      const track = publication.track;
      document.getElementById('remote-media-div').appendChild(track.attach());
    }
  });
});

Cleanup after Leaving a Room

• When leaving a room, always ensure to stop all local and remote media tracks to free up resources and avoid memory leaks.

 

• Attach the following code snippet to handle cleanup operations.

function leaveRoom(room) {
  room.localParticipant.tracks.forEach(publication => {
    const track = publication.track;
    track.stop();
    track.detach().forEach(element => element.remove());
  });

  room.disconnect();
  console.log('Disconnected from the Room');
}

Troubleshooting Common Issues

• If video doesn't display, ensure that your browser has permissions to access the camera and microphone.

 

• Check the console for any error messages that can provide hints for debugging the connection process.

 

• Ensure that network settings and firewalls allow access to Twilio's signaling and media servers.