static connectVideoStreamToVideoElement()

in src/videotile/DefaultVideoTile.ts [22:83]


  static connectVideoStreamToVideoElement(
    videoStream: MediaStream,
    videoElement: HTMLVideoElement,
    localTile: boolean
  ): void {
    const transform =
      localTile && videoStream.getVideoTracks()[0].getSettings().facingMode !== 'environment'
        ? 'rotateY(180deg)'
        : '';

    DefaultVideoTile.setVideoElementFlag(videoElement, 'disablePictureInPicture', localTile);
    DefaultVideoTile.setVideoElementFlag(videoElement, 'disableRemotePlayback', localTile);

    if (videoElement.style.transform !== transform) {
      videoElement.style.transform = transform;
    }
    if (videoElement.hasAttribute('controls')) {
      videoElement.removeAttribute('controls');
    }
    if (!videoElement.hasAttribute('autoplay')) {
      videoElement.setAttribute('autoplay', 'true');
    }
    // playsinline is needed for video to play in iPhone in non-fullscreen mode.
    // See https://developer.apple.com/documentation/webkit/safari_tools_and_features/delivering_video_content_for_safari#3030250
    if (!videoElement.hasAttribute('playsinline')) {
      videoElement.setAttribute('playsinline', 'true');
    }

    // Note that setting the *attribute* 'muted' affects whether the element
    // is muted *by default* (`.defaultMuted`), not whether it is currently muted (`.muted`).
    // https://html.spec.whatwg.org/#dom-media-defaultmuted
    if (!videoElement.hasAttribute('muted')) {
      // The default value…
      videoElement.setAttribute('muted', 'true');

      // … and the value right now.
      videoElement.muted = true;
    }

    if (videoElement.srcObject !== videoStream) {
      videoElement.srcObject = videoStream;

      // In Safari, a hidden video element can show a black screen.
      // See https://bugs.webkit.org/show_bug.cgi?id=241152 for more information.
      if (new DefaultBrowserBehavior().requiresVideoPlayWorkaround() && videoElement.paused) {
        const promise = videoElement.play();
        // See https://bugs.webkit.org/show_bug.cgi?id=243519 for more information.
        // https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
        /* istanbul ignore else */
        if (promise !== undefined) {
          promise
            .catch(error => {
              console.warn('Error playing video in Safari', error);
            })
            .then(() => {
              // `then` block is needed, without it we run into black tile issue even though we catch the error.
              console.debug('Video played successfully in Safari');
            });
        }
      }
    }
  }