Display multiple copies of the same stream

Sometimes, you may wish to show multiple copies of the same stream in your UI. For example, when multiple views of an event are available, your UI may show all available views as small tiles, and the selected view as a large tile.

Instead of joining the same channel twice, access the mediaStream and attach it to more than one video. Use:

channel.mediaStream

to subscribe to the channel’s mediaStream Observable to receive an update when new mediaStreams are available and then attach it to a second video element. This saves the bandwidth and decoding for a second stream.

Please refer to the WebSDK documentation for viewing a channel.

1. Create multiple video UI elements, for example, myVideoId1 and myVideoId2.

2. Join a channel for myVideoId1.

3. Populate myVideoId2, for example:

channel.mediaStream.subscribe((mediaStream) => {
  if (mediaStream !== null) {
    console.log('TEST2 ' + mediaStream);
    document.getElementById('myVideoId2').srcObject = mediaStream;
  }
});

See an example of this at GitHub.