从 webrtc 将网络摄像头帧传递给 python opencv答案

【问题标题】：passing webcam frames to python opencv from webrtc从 webrtc 将网络摄像头帧传递给 python opencv
【发布时间】：2016-03-03 01:46:18
【问题描述】：

如何通过 webrtc 从网络摄像头获取帧以便与 python opencv 一起使用？

我在互联网上找不到一个很好的例子。可以举个例子吗？

谢谢

【问题讨论】：

标签： javascript python html opencv webrtc

【解决方案1】：

这是从网络摄像头获取图像的示例

<!DOCTYPE html>
    <html>
      <head>
      </head>
      <body onload="init();">
        <h1>Take a snapshot of the current video stream</h1>
       Click on the Start WebCam button.
         <p>
        <button onclick="startWebcam();">Start WebCam</button>
        <button onclick="stopWebcam();">Stop WebCam</button> 
           <button onclick="snapshot();">Take Snapshot</button> 
        </p>
        <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
      <p>

            Screenshots : <p>
          <canvas  id="myCanvas" width="400" height="350"></canvas>  
      </body>
      <script>
          //--------------------
          // GET USER MEDIA CODE
          //--------------------
              navigator.getUserMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);

          var video;
          var webcamStream;

          function startWebcam() {
            if (navigator.getUserMedia) {
               navigator.getUserMedia (

                  // constraints
                  {
                     video: true,
                     audio: false
                  },

                  // successCallback
                  function(localMediaStream) {
                      video = document.querySelector('video');
                     video.src = window.URL.createObjectURL(localMediaStream);
                     webcamStream = localMediaStream;
                  },

                  // errorCallback
                  function(err) {
                     console.log("The following error occured: " + err);
                  }
               );
            } else {
               console.log("getUserMedia not supported");
            }  
          }

          function stopWebcam() {
              webcamStream.stop();
          }
          //---------------------
          // TAKE A SNAPSHOT CODE
          //---------------------
          var canvas, ctx;

          function init() {
            // Get the canvas and obtain a context for
            // drawing in it
            canvas = document.getElementById("myCanvas");
            ctx = canvas.getContext('2d');
          }

          function snapshot() {
             // Draws current image from the video element into the canvas
            ctx.drawImage(video, 0,0, canvas.width, canvas.height);
          }

      </script>
    </html>

【讨论】：