How to update subscriber stream when manipulating video element How to update subscriber stream when manipulating video element

How to update subscriber stream when manipulating video element

Rama Ganesan

 

 

Objective

This article suggests how to update the stream when manipulating the video element received at subscriber’s videoElementCreated event on JS clients 2.24.7+.



Applies To

JS SDK client v2.24.7+

 

 

Procedure

Adaptive Media Routing (AMR) aims to provide users with the best call quality possible.  In order to do so, the subscriber’s remote video stream may get updated.  For advanced users who manipulate the video stream directly using a custom UI, this guide may be helpful.

 

Applications that manipulate video streams when using custom UIs may see their video freeze because of AMR.  Please ensure that your application is resilient enough for these low-level changes.  We recommended the following:

 

subscriber.on('videoElementCreated', ({ element }) => {

  videoElement = element;


  // Set the initial value for stream

  stream = videoElement.srcObject;


  videoElement.onplay = () => {

    if (stream !== videoElement.srcObject){

      // Update stream with the new value

      stream = videoElement.srcObject;

    }

  };

});

 


References

https://tokbox.com/developer/guides/customize-ui/js/#video-element 

https://tokbox.com/developer/sdks/js/reference/VideoElementCreatedEvent.html