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();
      					};
            }

Example

See an example of this in JSFiddle: https://jsfiddle.net/phenixRTS/qap5L9vd/

Related articles

The content by label feature displays related articles automatically, based on labels you choose. To edit options for this feature, select the placeholder below and tap the pencil icon.

Related issues