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