Building a JS Video App: Recommendations and Best Practices

const { isSupported } = require('twilio-video');
if (isSupported) {
  // Set up your video app.
} else {
  console.error('This browser is not supported by twilio-video.js.');
}

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

const tracks = await createLocalTracks();

// Display camera preview.
const localVideoTrack = tracks.find(track => track.kind === 'video');
divContainer.appendChild(localVideoTrack.attach());

// Join the Room with the pre-acquired LocalTracks.
const room = await connect('token', {
  name: 'my-cool-room',
  tracks
});

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

const tracks = await createLocalTracks({
  audio: true,
  video: { facingMode: 'user' }
});

// Join the Room with the pre-acquired LocalTracks.
const room = await connect('token', {
  name: 'my-cool-room',
  tracks
});

const cameraTrack = tracks.find(track => track.kind === 'video');

// Switch to the back facing camera.
cameraTrack.restart({ facingMode: 'environment' });

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

const tracks = await createLocalTracks({
  audio: true,
  video: { facingMode: 'user' }
});

// Join the Room with the pre-acquired LocalTracks.
const room = await connect('token', {
  name: 'my-cool-room',
  tracks
});

// Capture the back facing camera.
const backFacingTrack = await createLocalVideoTrack({ facingMode: 'environment' });

// Switch to the back facing camera.
const frontFacingTrack = tracks.find(track => track.kind === 'video');
frontFacingTrack.stop();
room.localParticipant.unpublishTrack(frontFacingTrack);
room.localParticipant.publishTrack(backFacingTrack);

const { createLocalAudioTrack } = require('twilio-video');
const pollAudioLevel = require('./pollaudiolevel');

const audioTrack = await createLocalAudioTrack();

// Display the audio level.
pollAudioLevel(audioTrack, level => {
  /* Update audio level indicator. */
});

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = AudioContext ? new AudioContext() : null;

function rootMeanSquare(samples) {
  const sumSq = samples.reduce((sumSq, sample) => sumSq + sample * sample, 0);
  return Math.sqrt(sumSq / samples.length);
}

async function pollAudioLevel(track, onLevelChanged) {
  if (!audioContext) {
    return;
  }

  // Due to browsers' autoplay policy, the AudioContext is only active after
  // the user has interacted with your app, after which the Promise returned
  // here is resolved.
  await audioContext.resume();

  // Create an analyser to access the raw audio samples from the microphone.
  const analyser = audioContext.createAnalyser();
  analyser.fftSize = 1024;
  analyser.smoothingTimeConstant = 0.5;

  // Connect the LocalAudioTrack's media source to the analyser.
  const stream = new MediaStream([track.mediaStreamTrack]);
  const source = audioContext.createMediaStreamSource(stream);
  source.connect(analyser);

  const samples = new Uint8Array(analyser.frequencyBinCount);
  let level = null;

  // Periodically calculate the audio level from the captured samples,
  // and if changed, call the callback with the new audio level.
  requestAnimationFrame(function checkLevel() {
    analyser.getByteFrequencyData(samples);
    const rms = rootMeanSquare(samples);
    const log2Rms = rms && Math.log2(rms);

    // Audio level ranges from 0 (silence) to 10 (loudest).
    const newLevel = Math.ceil(10 * log2Rms / 8);
    if (level !== newLevel) {
      level = newLevel;
      onLevelChanged(level);
    }

    // Continue calculating the level only if the audio track is live.
    if (track.mediaStreamTrack.readyState === 'live') {
      requestAnimationFrame(checkLevel);
    } else {
      requestAnimationFrame(() => onLevelChanged(0));
    }
  });
}

module.exports = pollAudioLevel;

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

const videoTrack = await createLocalVideoTrack();

// Display the video preview.
const divContainer = document.getElementById('local-video');
const videoElement = videoTrack.attach();
divContainer.appendChild(videoElement);

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

const tracks = await createLocalTracks();

let videoTrack = tracks.find(track => track.kind === 'video');

const room = await connect('token1', {
  name: 'my-cool-room',
  tracks
});

if (/* isMobile */) {
  document.addEventListener('visibilitychange', async () => {
    if (document.visibilityState === 'hidden') {
      // The app has been backgrounded. So, stop and unpublish your LocalVideoTrack.
      videoTrack.stop();
      room.localParticipant.unpublishTrack(videoTrack);
    } else {
      // The app has been foregrounded, So, create and publish a new LocalVideoTrack.
      videoTrack = await createLocalVideoTrack();
      await room.localParticipant.publishTrack(videoTrack);
    }
  });
}

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

function setupRemoteVideoNotifications(publication) {
  if (publication.isSubscribed) {
    // Indicate to the user that the mobile user has added video.
  }

  publication.on('subscribed', track => {
    // Indicate to the user that the mobile user has added video.
  });

  publication.on('unsubscribed', track => {
    // Indicate to the user that the mobile user has removed video.
  });
}

function setupRemoteVideoNotificationsForParticipant(participant) {
  // Set up remote video notifications for the VideoTracks that are
  // already published.
  participant.videoTracks.forEach(setupRemoteVideoNotifications);

  // Set up remote video notifications for the VideoTracks that will be
  // published later.
  participant.on('trackPublished', setupRemoteVideoNotifications);
}

const room = await connect('token2', { name: 'my-cool-room' });

// Set up remote video notifications for the VideoTracks of RemoteParticipants
// already in the Room.
room.participants.forEach(setupRemoteVideoNotificationsForParticipant);

// Set up remote video notifications for the VideoTracks of RemoteParticipants
// that will join the Room later.
room.on('participantConnected', setupRemoteVideoNotificationsForParticipant);

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

const tracks = await createLocalTracks();

const room = await connect('token', {
  name: 'my-cool-room',
  tracks
});

// Listen to the "beforeunload" event on window to leave the Room
// when the tab/browser is being closed.
window.addEventListener('beforeunload', () => room.disconnect());

// iOS Safari does not emit the "beforeunload" event on window.
// Use "pagehide" instead.
window.addEventListener('pagehide', () => room.disconnect());

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

function handleMediaError(error) {
  console.error('Failed to acquire media:', error.name, error.message);
}

// Handle media error raised by createLocalAudioTrack.
createLocalAudioTrack().catch(handleMediaError);

// Handle media error raised by createLocalVideoTrack.
createLocalVideoTrack().catch(handleMediaError);

// Handle media error raised by createLocalTracks.
createLocalTracks().catch(handleMediaError);

const mediaErrors = [
  'NotAllowedError',
  'NotFoundError',
  'NotReadableError',
  'OverconstrainedError',
  'TypeError'
];

// Since connect() will acquire media for the application if tracks are not provided in ConnectOptions,
// it can raise media errors.
connect(token, { name: 'my-cool-room' }).catch(error => {
  if (mediaErrors.includes(error.name)) {
    // Handle media error here.
    handleMediaError(error);
  }
});

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

connect(token, { name: 'my-cool-room' }).catch(error => {
  if ('code' in error) {
    // Handle connection error here.
    console.error('Failed to join Room:', error.code, error.message);
  }
});

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

connect(token, { name: 'my-cool-room' }).then(room => {
  room.once('disconnected', (room, error) => {
    if (error) {
      console.log('You were disconnected from the Room:', error.code, error.message);
    }
  });
});

// Enable Media Warnings
const room = await connect('token', {
  notifyWarnings: [ 'recording-media-lost' ]
  // Other connect options
});

// Catch Media Warnings
Array.from(room.localParticipant.tracks.values()).forEach(publication => {
  publication.on('warning', name => {
    if (name === 'recording-media-lost') {
      console.log(`LocalTrack ${publication.track.name} is not recording media.`);

      // Wait a reasonable amount of time to clear the warning.
      const timer = setTimeout(() => {
        // If the warning is not cleared, you can manually
        // reconnect to the room, or show a dialog to the user
      }, 5000);

      publication.once('warningsCleared', () => {
        console.log(`LocalTrack ${publication.track.name} warnings have cleared!`);
        clearTimeout(timer);
      });
    }
  });
});