Twilio Video JavaScript SDK

2.34.0 · active · verified Sun Apr 19

The `twilio-video` package provides a JavaScript library for adding real-time voice and video communication capabilities to web applications. It enables developers to build multi-party video experiences, leveraging Twilio's infrastructure for signaling and media routing. The current stable version is 2.34.0, released in January 2026, with a rapid release cadence that often includes multiple updates per quarter. Key features include support for real-time transcriptions, enhanced telemetry for monitoring `RTCPeerConnection` states and application lifecycle, Document Picture-in-Picture API integration, and beta features like WebRTC overrides for optimized environments and Video Processor V3 for advanced media manipulation. It differentiates itself by offering a complete WebRTC abstraction layer integrated with the broader Twilio ecosystem, providing robust cross-browser compatibility and handling complex networking challenges inherent in real-time communication.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to connect to a Twilio Video Room, handle participant connections and disconnections, and attach their video and audio tracks to the DOM. It assumes you have a valid Twilio Access Token.

import { connect, Room, LocalParticipant, RemoteParticipant } from 'twilio-video';

// Replace with your actual Access Token and Room Name
const accessToken = process.env.TWILIO_ACCESS_TOKEN ?? ''; // Use environment variable or fetch from a server
const roomName = 'my-super-secret-room';

if (!accessToken) {
  console.error('TWILIO_ACCESS_TOKEN environment variable is not set. Please provide a valid access token.');
  // In a real application, you might redirect the user or show an error message.
} else {
  connect(accessToken, { name: roomName }).then(room => {
    console.log(`Connected to Room "${room.name}"`);

    // Handle existing participants in the room
    room.participants.forEach(participantConnected);
    // Listen for new participants connecting
    room.on('participantConnected', participantConnected);

    // Handle participants disconnecting
    room.on('participantDisconnected', participantDisconnected);
    // Handle disconnection from the room itself
    room.once('disconnected', error => {
      console.log('Disconnected from Room:', error);
      room.participants.forEach(participantDisconnected);
    });
  }).catch(error => {
    console.error('Failed to connect to Twilio Video Room:', error);
  });
}

function participantConnected(participant: RemoteParticipant) {
  console.log(`Participant "${participant.identity}" connected`);

  const div = document.createElement('div');
  div.id = participant.sid;
  div.innerText = participant.identity;
  document.body.appendChild(div); // Append to body to visualize participants

  // When a participant publishes a track, attach it to the DOM
  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  // Attach already subscribed tracks
  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });
}

function participantDisconnected(participant: RemoteParticipant) {
  console.log(`Participant "${participant.identity}" disconnected`);
  document.getElementById(participant.sid)?.remove(); // Remove participant's div from DOM
}

function trackSubscribed(div: HTMLDivElement, track: any) {
  // Attach the audio/video track to the participant's div element
  div.appendChild(track.attach());
}

view raw JSON →