full screen reverses the webcam

Kaor commented 3 years ago

Hi, thanks for galene ! in full screen, the webcam is reversed, is there an option ?

jech commented 3 years ago

That's a known issue, and one that is difficult to fix without using up extra CPU.

We reverse our own video with CSS. In full screen or picture in picture, however, the video is handles by the browser, and our CSS doesn't apply.

A solution would be to funnel the video to a Canvas, reverse it there, and then funnel the Canvas to the HTMLVideoElement. This will possibly cause extra CPU usage and might cause tearing. I'll try it to see how well it works at some point, but it's pretty low on my list of priorities.

MisterDA commented 3 years ago

Taken from Stack Overflow, it's impossible to apply transforms to a fullscreened element. However, we can add a parent element to a video, fullscreen that element, and apply the transformation to the child video. I don't know if there's a performance penalty.

This has some drawbacks, though.

On Firefox 84 the controls are shown reversed until the mouse hovers the video, then they are flipped and rendered correctly;
On Chrome 87 the controls are flipped.

Below is a working example. I think the controls issue can be dealed with if we use custom controls or manipulate the shadow DOM, but that would require mastery and cross-browser testing.

A thought: if any element can be full-screened, we could full-screen the parent of all the videos and have a nice uncluttered view of all the videos.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Video</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>By default, the gray noise is on bottom right. If it is on the bottom left, the video is mirrored.</p>
        <button id="fullscreen">Fullscreen</button>
        <label for="mirror"><input type="checkbox" name="mirror" id="mirror" autocomplete="off">Mirror</label>
        <div id="container">
            <video id="video" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls></video>
        </div>
        <script>
         let btn = document.getElementById("fullscreen");
         let box = document.getElementById("mirror");
         let container = document.getElementById("container");

         btn.onclick = function(e) {
             e.preventDefault();
             container.requestFullscreen();
         };
         box.onchange = function(e) {
             video.style.transform = box.checked ? "scaleX(-1)" : null;
         };
         document.onfullscreenchange = function(e) {
             if(document.fullscreenElement) { /* entering */
                 video.style.width = "100%";
                 video.style.height = "100%";
                 video.style["object-fit"] = "contain";
             } else { /* exiting */
                 video.style.width = null;
                 video.style.height = null;
                 video.style["object-fit"] = "inherit";
             }
         };
        </script>
    </body>
</html>

jech / galene

full screen reverses the webcam #4