Building a JS Video App: Recommendations and Best Practices

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

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

3
const tracks = await createLocalTracks();
4

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

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

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

3
const tracks = await createLocalTracks({
4
  audio: true,
5
  video: { facingMode: 'user' }
6
});
7

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

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

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

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

3
const tracks = await createLocalTracks({
4
  audio: true,
5
  video: { facingMode: 'user' }
6
});
7

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

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

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

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

4
const audioTrack = await createLocalAudioTrack();
5

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

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

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

9
async function pollAudioLevel(track, onLevelChanged) {
10
  if (!audioContext) {
11
    return;
12
  }
13

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

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

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

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

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

39
    // Audio level ranges from 0 (silence) to 10 (loudest).
40
    const newLevel = Math.ceil(10 * log2Rms / 8);
41
    if (level !== newLevel) {
42
      level = newLevel;
43
      onLevelChanged(level);
44
    }
45

46
    // Continue calculating the level only if the audio track is live.
47
    if (track.mediaStreamTrack.readyState === 'live') {
48
      requestAnimationFrame(checkLevel);
49
    } else {
50
      requestAnimationFrame(() => onLevelChanged(0));
51
    }
52
  });
53
}
54

55
module.exports = pollAudioLevel;

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

3
const videoTrack = await createLocalVideoTrack();
4

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

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

3
const tracks = await createLocalTracks();
4

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

7
const room = await connect('token1', {
8
  name: 'my-cool-room',
9
  tracks
10
});
11

12
if (/* isMobile */) {
13
  document.addEventListener('visibilitychange', async () => {
14
    if (document.visibilityState === 'hidden') {
15
      // The app has been backgrounded. So, stop and unpublish your LocalVideoTrack.
16
      videoTrack.stop();
17
      room.localParticipant.unpublishTrack(videoTrack);
18
    } else {
19
      // The app has been foregrounded, So, create and publish a new LocalVideoTrack.
20
      videoTrack = await createLocalVideoTrack();
21
      await room.localParticipant.publishTrack(videoTrack);
22
    }
23
  });
24
}

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

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

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

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

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

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

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

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

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

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

3
const tracks = await createLocalTracks();
4

5
const room = await connect('token', {
6
  name: 'my-cool-room',
7
  tracks
8
});
9

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

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

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

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

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

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

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

16
const mediaErrors = [
17
  'NotAllowedError',
18
  'NotFoundError',
19
  'NotReadableError',
20
  'OverconstrainedError',
21
  'TypeError'
22
];
23

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

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

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

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

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

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

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

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

13
      publication.once('warningsCleared', () => {
14
        console.log(`LocalTrack ${publication.track.name} warnings have cleared!`);
15
        clearTimeout(timer);
16
      });
17
    }
18
  });
19
});