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.

response.mediaStream.getStream()

returns a WebRTC stream that can be attached to another video. This saves the bandwidth and decoding for a second stream.

In the WebSDK documentation, the API to reference is:

https://phenixrts.com/docs/web/#view-a-channel

Instructions

1. Create multiple video UI elements, for example, videoElement1 and videoElement2.

2. Join a channel for videoElement1.

3. Populate videoElement2, for example:
   
   

   if (response.mediaStream) { setUserMessage('joinChannel()::subscriberCallback(error, response) returned response.mediaStream.getStreamId()=' + response.mediaStream.getStreamId()); videoElement2.srcObject = response.mediaStream.getStream(); videoElement2.onloadedmetadata = function(e) { console.log("metadataloaded"); videoElement2.play(); }; }

Related articles