full screen reverses the webcam #4
Comments
|
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. |
|
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.
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> |
Hi,
thanks for galene !
in full screen, the webcam is reversed,
is there an option ?
The text was updated successfully, but these errors were encountered: