UnbindVideoElement

Hello,

Am trying to get the following effect.

1. Video streams are already “bind” successfully to small thumb nails
2. When user press on the thumb nails, video stream is first “unbind” from the smaller thumb nail and then “bind” to a larger sized element.

Am unable to get both unbindVideoElement and bindVideoElement working in stage (2).

[ileccese]

cool, thanks for your help.

I think it would be helpful to have unbindVideoElement remove the srcObject, or at least to make it clear in the documentation that unbindVideoElement won’t remove the video stream from the video element, because I think most people would assume it just does the opposite of bindVideoElement

[ileccese]

Interesting, so you’re saying all unbindVideoElement is supposed to do is trigger a videoTileDidUpdate with boundVideoElement = null and that if I want to remove the video stream from that video element I need to do that myself?

I have video tiles setup very similar to the components library’s RemoteTile, where each video tile takes a tileId as props and has a useEffect to unbind/bind to that tileId when it’s updated:

useEffect(() => {
    if (meetingSession && props.tileId) {
      if (meetingSession.audioVideo.getVideoTile(props.tileId)) {
        logger.info(`App: binding tileId ${props.tileId} to ${props.tileName}`);
        meetingSession.audioVideo.bindVideoElement(props.tileId, ref.current);
      }
    }
    return () => {
      if (meetingSession && props.tileId) {
        const tile = meetingSession.audioVideo.getVideoTile(props.tileId);
        if (tile) {
          logger.info(`App: unbinding tileId ${props.tileId} from ${props.tileName}`);
          meetingSession.audioVideo.unbindVideoElement(props.tileId);
        }
      }
    };
  }, [props.tileId, props.tileName, meetingSession, logger, ref]);

The problem I was running into is that we are implementing a “pin user to top tile” feature and expected that we could simply swap the order of the tileIds in state and when each video tile received a new tileId, it would unbind the old tileId and bind the new tileId. this worked fine when the tiles that were being swapped both had active video streams, but if one stream was inactive (the participant had their camera off), the video element which previously had the active stream would still show it. Based on your explanation, this is because unbindVideoElement does not remove the old srcObject and the new inactive tileId didn’t have a new srcObject to replace the old srcObject Replacing unbindVideoElement with removing the srcObject seems work as expected:

useEffect(() => {
    if (meetingSession && props.tileId) {
      if (meetingSession.audioVideo.getVideoTile(props.tileId)) {
        logger.info(`App: binding tileId ${props.tileId} to ${props.tileName}`);
        meetingSession.audioVideo.bindVideoElement(props.tileId, ref.current);
      }
    }
    return () => {
      if (meetingSession && props.tileId) {
        const tile = meetingSession.audioVideo.getVideoTile(props.tileId);
        if (tile) {
          logger.info(`App: unbinding tileId ${props.tileId} from ${props.tileName}`);
          // meetingSession.audioVideo.unbindVideoElement(props.tileId);
          ref.current.srcObject = null;
        }
      }
    };
  }, [props.tileId, props.tileName, meetingSession, logger, ref]);