Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now


Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?


Note: Twilio Video 2.0 is in beta.


This guide provides you with an overview of the key objects you'll use in the Programmable Video API to build your video application with the Twilio Programmable Video JavaScript SDK.

Note: If you haven’t already done so, then take a look at the Twilio Video JavaScript Quickstart Application. Once you've played with the Quickstart, come back to this guide for more detail on how to add video to your own app.

WebRTCをお使いいただいた経験があるなら、Programmable Videoは完成度の高いオーディオおよびビデオアプリケーションの構築を容易にするために、WebRTCの下位レベルAPIの単純なラッパーを提供していることに気づかれるでしょう。 依然としてより下位レベルのプリミティブにアクセスできますが、入門には必要ありません。

加えて、Programmable VideoはWebRTCを使用して洗練されたアプリケーションを構築するために必要な不足したピース: グローバルSTUN/TURNリレー、大規模な電話会議および録音用のメディアサービス、そしてシグナリングのためのインフラが全て含まれています。

Video API概要

まずは、Programmable Video APIの概要からはじめましょう:

  • A Room represents a real-time audio, data, video, and/or screen-share session, and is the basic building block for a Programmable Video application.
  • In a Peer-to-peer Room, media flows directly between participants. Supports up to 10 participants in a mesh topology.
  • In a Group Room, media is routed through Twilio's Media Servers. Supports up to 50 participants.
  • Participants represent client applications that are connected to a Room and sharing audio, data, and/or video media with one another.
  • Tracks represent the individual audio, data, and video media streams that are shared within a Room.
  • LocalTracks represent the audio, data, and video captured from the local client's media sources (for example, microphone and camera).
  • RemoteTracks represent the audio, data, and video tracks from other participants connected to the Room.



To start using the JavaScript Programmable Video SDK in your apps, you need to perform a few basic tasks first.

1. Get the Programmable Video JavaScript SDK

You can install the JavaScript Video library using NPM.

npm install --save twilio-video@2.0.0-beta14


<script src="//media.twiliocdn.com/sdk/js/video/releases/2.0.0-beta14/twilio-video.min.js"></script>

The JavaScript Video library requires recent versions of Chrome and Firefox, and Safari 11 or greater.

2. Get an API Key


For the purposes of this guide, we will create our API Key from the Twilio Console.

  • Go to the API Keys section under Tools in the Twilio Console.
  • Click on “Create a New API Key”, add a friendly name and save your Key and Secret.

3. Generate an Access Token

To execute the code samples below, you can use the Testing Tools page in the Twilio Console to generate an Access Token. An Access Token is a short-lived credential used to authenticate your client-side application to Twilio.

In a production application, your back-end server will need to generate an Access Token for every user in your application. An Access Token is a short-lived credential used to authenticate your client-side application to Twilio. Visit the User Identity and Access Token guide to learn more.


Call connect to connect to a Room from your web application. Once connected, you can send and receive audio and video streams with other Participants who are connected to the Room.

const { connect } = require('twilio-video');

connect('$TOKEN', { name:'my-new-room' }).then(room => {
  console.log(`Successfully joined a Room: ${room}`);
  room.on('participantConnected', participant => {
    console.log(`A remote Participant connected: ${participant}`);
}, error => {
  console.error(`Unable to connect to Room: ${error.message}`);

Roomへの接続時には、アクセストークンを渡すことが必要です。 またオプションで、下記を渡すこともできます:

  • オーディオおよびビデオのオプション: 有効時には、Roomへの接続すると直ちにローカルのカメラおよびマイクからのオーディオおよびビデオのトラックが作成および公開されます。
  • Local audio, data, and/or video tracks, to begin sharing pre-created local media and data with other Participants in the Room upon connecting.
  • ルーム名: 参加したいルームの名前を動的に指定できます。 (メモ: ルーム名をアクセストークンにエンコードできます。 こうすることでユーザーはトークンで指定されたRoomにのみ接続できます。)
  • デバッグ用のログレベルです。

The name of the Room specifies which Room you wish to join. If client-side Room creation is enabled, and if a Room by that name does not already exist, it will be created upon connection. If a Room by that name is already active, you'll be connected to the Room and receive notifications from any other Participants also connected to the same Room. Room names must be unique within an account.

また、Rooms REST APIを使用してRoomに接続することも可能です。 さらなる詳細については、REST API Roomsリソースを参照してください。

Example: Create a Room called "DailyStandup"

curl -XPOST 'https://video.twilio.com/v1/Rooms' \
     -u '{API Key SID}:{API Secret}' \
     -d 'UniqueName=DailyStandup'

注 : If you don’t specify a Type attribute, then Twilio will create a Room based on the default Type in the Room Settings.


You can also set the Room Type from the Room Settings page in the Twilio Video Console. Twilio will use the Room Type set on Room Settings page, when you create a Room from the client-side or the REST API.

Note: Twilio will set the Room Type as "Group" by default on the Room Settings page.

StatusCallback URLが設定されている場合、Roomが作成されると、TwilioはRoom-created Webhookイベントを呼び出します。 クライアント側からRoomを作成したい場合、Room設定ページからStatusCallback URLを設定できます。 REST APIでRoomを作成する場合、Room作成時にStatusCallback URLを指定することが必要です。

curl -XPOST 'https://video.twilio.com/v1/Rooms' \
     -u '{API Key SID}:{API Secret}' \
     -d 'UniqueName=DailyStandup' \
     -d 'StatusCallback=https://hooks.yoursite.com/room-events' \
     -d 'StatusCallbackMethod=POST' \
     -d 'Type=group'

Enabling Room Recordings

Recordings can be enabled only on Group Rooms. Set Recordings to Enabled to record Participants when they connect to a Group Room. Recordings can also be enabled on Group Rooms through via the Rest API at Room creation time by setting the RecordParticipantsOnConnect property to true.

curl -XPOST 'https://video.twilio.com/v1/Rooms' \
    -d 'UniqueName=DailyStandup' \
    -d 'Type=group' \
    -d 'RecordParticipantsOnConnect=true' \
    -d 'StatusCallback=http://example.org' 


If you'd like to join a Room you know already exists, you handle that exactly the same way as creating a Room: just pass the Room name to the connect method. Once in a Room, you'll receive a "participantConnected" event for each Participant that successfully joins. Querying the participants getter will return any existing Participants who have already joined the Room.

const { connect } = require('twilio-video');

connect('$TOKEN', { name: 'existing-room' }).then(room => {
  console.log(`Successfully joined a Room: ${room}`);
  room.on('participantConnected', participant => {
    console.log(`A remote Participant connected: ${participant}`);
}, error => {
  console.error(`Unable to connect to Room: ${error.message}`);



const { connect, createLocalTracks } = require('twilio-video');

// Option 1
  audio: true,
  video: { width: 640 }
}).then(localTracks => {
  return connect('$TOKEN', {
    name: 'my-room-name',
    tracks: localTracks
}).then(room => {
  console.log(`Connected to Room: ${room.name}`);

// Option 2
connect('$TOKEN', {
  audio: true,
  name: 'my-room-name',
  video: { width: 640 }
}).then(room => {
  console.log(`Connected to Room: ${room.name}`);


Use Twilio's createLocalTracks API to gain access to the user's microphone and camera. Note that some browsers, such as Google Chrome, will only let your application access local media when your site is served from localhost or over HTTPS.



When you join a Room, Participants may already be present. You can check for existing Participants by using the Room's participants collection:

// Log your Client's LocalParticipant in the Room
const localParticipant = room.localParticipant;
console.log(`Connected to the Room as LocalParticipant "${localParticipant.identity}"`);

// Log any Participants already connected to the Room
room.participants.forEach(participant => {
  console.log(`Participant "${participant.identity}" is connected to the Room`);

// Log new Participants as they connect to the Room
room.once('participantConnected', participant => {
  console.log(`Participant "${participant.identity}" has connected to the Room`);

// Log Participants as they disconnect from the Room
room.once('participantDisconnected', participant => {
  console.log(`Participant "${participant.identity}" has disconnected from the Room`);


When Participants connect to or disconnect from a Room that you're connected to, you'll be notified via Participant connection events:

room.on('participantConnected', participant => {
  console.log(`Participant connected: ${participant.identity}`);

room.on('participantDisconnected', participant => {
  console.log(`Participant disconnected: ${participant.identity}`);


To see the Video Tracks being sent by remote Participants, we need to render them to the screen. Because Participants can publish Tracks at any time, we'll want to handle both

  • the Tracks that the Participant has already published, and
  • the Tracks that the Participant eventually publishes.

We can handle the former by iterating over tracks and we can handle the latter by attaching an event listener for "trackSubscribed":

// Attach the Participant's Media to a <div> element.
room.on('participantConnected', participant => {
  console.log(`Participant "${participant.identity}" connected`);

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      const track = publication.track;

  participant.on('trackSubscribed', track => {



ルームへの入室前に、ご自身のカメラ映りを確かめたいことがあるでしょう。 おまかせを! 各SDKでは、アクティブなルームのコンテキストの外側でルーカルのカメラ・プレビューをレンダリングする方法をご用意しています。

const { createLocalVideoTrack } = require('twilio-video');

createLocalVideoTrack().then(track => {
  const localMediaContainer = document.getElementById('local-media');


You can disconnect from a Room you're currently participating in. Other Participants will receive a "participantDisconnected" event:

room.on('disconnected', room => {
  // Detach the local media elements
  room.localParticipant.tracks.forEach(publication => {
    const attachedElements = publication.track.detach();
    attachedElements.forEach(element => element.remove());

// To disconnect from a Room

Server-side Control

The Programmable Video REST API allows you to control your video applications from your back-end server via HTTP requests.

Rate this page:


誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。