.getUserMediaのWebカメラ画像ストリームを水平方向に反転

Question

だから私はこのページをいじっています： https://tutorialzine.github.io/pwa-photobooth/

基本的には、Webカメラをアクティブにして、ストリームから直接スナップショットを取得できるようにします。これをWeb用に借用しましたが、ビデオストリームが反転しているため、気分が良くなるようにビデオストリームをミラーリングしたいと思います。

注：私は一種のjs初心者なので、詳細な説明を歓迎します。

コードは次のとおりです。Chromeの代わりにFirefoxを使用する必要がある場合があります。

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

Answer 2

このリンクを確認してください http://christianheilmann.com/2013/07/19/flipping-the-image-when-accessing-the-laptop-camera-with-getusermedia/

これは、キャンバス上で再生される水平反転ビデオの機能例です。

<head>
  <title> flip video</title>
  <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
       $(function() {
         var canvas = document.getElementById('canvas');
         var ctx = canvas.getContext('2d');
         var video = document.getElementById('video');

         video.addEventListener('loadedmetadata', function() {
            ctx.translate(video.videoWidth, 0); 
            ctx.scale(-1, 1);
         });

         video.addEventListener('play', function() {
           var $this = this; //cache
           (function loop() {
             if (!$this.paused && !$this.ended) {
               ctx.drawImage($this, 0, 0);
               setTimeout(loop, 1000 /300 ); // drawing at 30fps
             }
           })();
         }, 0);
       });
  </script>
</head>

<body class='xxy' >
  <div id="theater">
    <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
    <br/>
    <canvas id="canvas"></canvas>
    <label>
      <br />Try to play me :)</label>
    <br />
  </div>

</body>

</html>