Hi, thanks for galene ! in full screen, the webcam is reversed, is there a

full screen reverses the webcam about galene HOT 2 OPEN

jech commented on July 25, 2024

full screen reverses the webcam

from galene.

Comments (2)

jech commented on July 25, 2024 1

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.

from galene.

MisterDA commented on July 25, 2024

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>

from galene.

Recommend Projects

full screen reverses the webcam about galene HOT 2 OPEN

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs