Twilio Video TS

client.ts

import { connect } from 'twilio-video';

const TOKEN_URL = 'THE_URL_TO_YOUR_FUNCTION';

const roomName = 'myroom';
let connected = false;
let localMediaEl = document.getElementById('localMedia');
let remoteMediaEl = document.getElementById('remoteMedia');
let buttonConnectEl = document.getElementById('buttonConnect');

async function runVideo() {
  // get access token from server
  const { token } = await (await fetch(TOKEN_URL)).json();
  // connect to a Twilio Video Room with disabled audio
  const room = await connect(token, {
    audio: false,
    video: true,
    name: roomName
  });
  connected = true;
  // check for tracks of the local participant
  room.localParticipant.tracks.forEach((track: any) => {
    // attach the tracks as video/audio elements to the DOM
    if (localMediaEl) {
      localMediaEl.appendChild(track.attach());
    }
  });

  // Check for existing participants
  room.participants.forEach((partcipant: any) => {
    // add their audio/video tracks to the DOM
    partcipant.tracks.forEach((track: any) => {
      if (remoteMediaEl) {
        remoteMediaEl.appendChild(track.attach());
      }
    });
  });

  // a new user joined or an existing one added a new track
  room.on('trackAdded', (track: any) => {
    if (remoteMediaEl) {
      remoteMediaEl.appendChild(track.attach());
    }
  });

  // a track was removed
  room.on('trackRemoved', (track: any) => {
    // disconnect the track
    track.detach().forEach((mediaElement: HTMLElement) => {
      // remove related DOM nodes
      mediaElement.remove();
    });
  });
}

if (buttonConnectEl) {
  buttonConnectEl.addEventListener('click', runVideo);
}

declarations.d.ts

declare module 'twilio-video';

index.html

<div class="buttonContainer">
  <button id="buttonConnect">
    Connect to Video
  </button>
</div>
<h3>
  Your Video:
</h3>
<div id="localMedia">
</div>
<h3>
  Others:
</h3>
<div id="remoteMedia">
</div>

twilio-function.js

// Create a Twilio Function (https://www.twilio.com/console/runtime/functions) with this code

exports.handler = function(context, event, callback) {
  // make sure you enable ACCOUNT_SID and AUTH_TOKEN in Functions/Configuration
  const ACCOUNT_SID = context.ACCOUNT_SID;

  // you can set these values in Functions/Configuration or set them here
  const API_KEY = context.API_KEY || 'enter API Key';
  const API_SECRET = context.API_SECRET || 'enter API Secret';

  // REMINDER: This identity is only for prototyping purposes
  const IDENTITY = 'testing-username';
  const ROOM = 'myroom';

  const AccessToken = Twilio.jwt.AccessToken;
  const VideoGrant = AccessToken.VideoGrant;

  const grant = new VideoGrant();
  grant.room = ROOM;

  const accessToken = new AccessToken(ACCOUNT_SID, API_KEY, API_SECRET);

  accessToken.addGrant(grant);
  accessToken.identity = IDENTITY;

  const response = new Twilio.Response();
  response.appendHeader('Access-Control-Allow-Origin', '*');
  response.appendHeader('Access-Control-Allow-Methods', 'GET');
  response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');
  response.appendHeader('Content-Type', 'application/json');
  response.setBody({ token: accessToken.toJwt() });
  callback(null, response);
};