javascript - 水平翻转 .​​getUserMedia 的网络摄像头图像流

Question

所以我一直在搞乱这个页面:https://tutorialzine.github.io/pwa-photobooth/

基本上它的作用是激活您的网络摄像头并让您直接从流中拍摄快照，我为我的网络借用了它，但视频流被翻转了，我想镜像视频流以便感觉更好。

注意:我是一个 js 新手，所以欢迎详细解释。

这是代码，您可能必须使用 Firefox 而不是 Chrome:

$('.closecam').click(function(){
    $('.webcam__overlay').hide();
    });
	
  $('.camera').click(function(){
    $('.webcam__overlay').show();
    });
	
	
document.addEventListener('DOMContentLoaded', function () {

    // References to all the element we will need.
    var video = document.querySelector('#camera-stream'),
        image = document.querySelector('#snap'),
        start_camera = document.querySelector('#start-camera'),
        controls = document.querySelector('.controls'),
        take_photo_btn = document.querySelector('#take-photo'),
        delete_photo_btn = document.querySelector('#delete-photo'),
        download_photo_btn = document.querySelector('#download-photo'),
        error_message = document.querySelector('#error-message');


    // The getUserMedia interface is used for handling camera input.
    // Some browsers need a prefix so here we're covering all the options
    navigator.getMedia = ( 
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
    );


    if(!navigator.getMedia){
        displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
    }
    else{
        // Request the camera.
        navigator.getMedia(
            {
                video: true
            },
            // Success Callback
            function(stream) {

                // Create an object URL for the video stream and
                // set it as src of our HTLM video element.
                video.src = window.URL.createObjectURL(stream);

                // Play the video element to start the stream.
                video.play();
                video.onplay = function() {
                    showVideo();
                };
         
            },
            // Error Callback
            function(err) {
                displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
            }
        );
    }



    // Mobile browsers cannot play video without user input,
    // so here we're using a button to start it manually.
    start_camera.addEventListener("click", function(e) {

        e.preventDefault();

        // Start video playback manually.
        video.play();
        showVideo();

    });


    take_photo_btn.addEventListener("click", function(e) {
        //prevents default behaviour, in this case the link a from firing
        e.preventDefault();

        var snap = takeSnapshot();

        // Show image. 
        image.setAttribute('src', snap);
        image.classList.add("visible");

        // Enable delete and save buttons
        delete_photo_btn.classList.remove("disabled");
        download_photo_btn.classList.remove("disabled");

        // Set the href attribute of the download button to the snap url.
        download_photo_btn.href = snap;

        // Pause video playback of stream.
        video.pause();

    });


    delete_photo_btn.addEventListener("click", function(e) {

        e.preventDefault();

        // Hide image.
        image.setAttribute('src', "");
        image.classList.remove("visible");

        // Disable delete and save buttons
        delete_photo_btn.classList.add("disabled");
        download_photo_btn.classList.add("disabled");

        // Resume playback of stream.
        video.play();

    });



    function takeSnapshot() {
        // Here we're using a trick that involves a hidden canvas element.  

        var hidden_canvas = document.querySelector('canvas'),
            context = hidden_canvas.getContext('2d');

        var width = video.videoWidth,
            height = video.videoHeight;

        if (width && height) {

            // Setup a canvas with the same dimensions as the video.
            hidden_canvas.width = width;
            hidden_canvas.height = height;

            // Make a copy of the current frame in the video on the canvas.
            context.drawImage(video, 0, 0, width, height);

            // Turn the canvas image into a dataURL that can be used as a src for our photo.
            return hidden_canvas.toDataURL('image/png');
        }
    }


    function showVideo() {
        hideUI();
        video.classList.add("visible");
        controls.classList.add("visible");
    }


    function displayErrorMessage(error_msg, error) {
        error = error || "";
        if(error){
            console.error(error);
        }

        error_message.innerText = error_msg;

        hideUI();
        error_message.classList.add("visible");
    }

   
    function hideUI() {
        // Helper function for clearing the app UI.

        controls.classList.remove("visible");
        start_camera.classList.remove("visible");
        video.classList.remove("visible");
        snap.classList.remove("visible");
        error_message.classList.remove("visible");
    }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="webcam__overlay">
  <div class="webcam__maincontainer" style="width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;">
    <div class="videowebcam" style="flex:0 0 97%; ">
	  <div class="" style=" height:87%; width:100%; display:flex; justify-content:center; align-items:center;">
	    <a href="#" style="display:none;" id="start-camera" class="visible">Touch here to start the app.</a>
        <video style="min-width:640px; max-width:640px; min-height:480px; max-height:480px;" muted id="camera-stream"></video>
        <img style="position:absolute; top:0px; left:0px; z-index:-1; width:1px; height:1px;" id="snap">
	    <canvas style="position:absolute; top:0px; left:0px; z-index:-1; width:1px; height:1px;"></canvas>
        <p style="display:none;" id="error-message"></p>
	  </div>
	  <div class="controls" style=" height:13%; width:100%; display:flex; justify-content:space-around; align-items:center;">
	    <a href="" class="tooltip3"><img id="delete-photo" class="disabled hoveref" src="images/backcam.png" style="transform: scale(0.8, 0.8);   flex:0 0 auto; "><span data-en="Take Another" data-es="Tomar otra"class="tooltiptext3">Tomar Otra</span></a>
		<a href="" class="tooltip3"><img id="take-photo" class="hoveref" src="images/takephoto.png" style=" width:65px; height:65px;  flex:0 0 auto; "><span data-es="Tomar Foto" data-en="Take Snapshot" class="tooltiptext3">Tomar Foto</span></a>
		<a href="" id="download-photo" download="selfie.png" class="disabled tooltip3"><img class="hoveref" src="images/download2.png" style="transform: scale(0.8, 0.8);" ><span data-es="Descargar Foto" data-en="Download Snapshot"class="tooltiptext3">Descargar Foto</span></a>
	  </div>
	</div>
	<span class="closecam" style="cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center;  font-size:25px; font-weight:600; ">X</span>
  </div>
</div>

Answer 1

CSS 技巧非常有效:

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}