Question

在谷歌和这里搜索后。我无法弄清楚如何从我的摄像机拍照。我的网络应用程序有一个画布和一个相机按钮，用户点击该按钮并打开一个视频屏幕，其中有一个准备拍摄的按钮并在画布上保留一张照片。视频摄像机工作正常。这是代码：

$("#camara").on("click",function(){     
    var constraints={ video: true };
    var video = $("#video")[0];     
    navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {            
          var videoTracks = stream.getVideoTracks();
          console.log('Got stream with constraints:', constraints);
          console.log('Using video device: ' + videoTracks[0].label);
          stream.onended = function() {
            console.log('Stream ended');
          };
          window.stream = stream; // make variable available to browser console
          video.srcObject = stream;
        }).catch(function(error) {
              if (error.name === 'ConstraintNotSatisfiedError') {
                errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
                    constraints.video.width.exact + ' px is not supported by your device.');
              } else if (error.name === 'PermissionDeniedError') {
                errorMsg('Permissions have not been granted to use your camera and ' +
                  'microphone, you need to allow the page access to your devices in ' +
                  'order for the demo to work.');
              }
              errorMsg('getUserMedia error: ' + error.name, error);
});

上面的代码工作正常。问题来自于我拍摄相机并尝试将照片保留在画布上。这是我正在使用的代码：

$("#snap").on("click", function(){
        var ctx=canvas.getContext('2d');
        var video=$("#video")[0];
        ctx.drawImage(video,0,0,canvas.width,canvas.height);
        });

变量canvas是一个全局变量，我也用于其他porpuses。这里的问题是我不知道如何从摄像机获取图片。我也尝试使用图像对象并在src属性中加载图片，但它也不起作用。任何想法都会感激不尽。

javascript从摄像机到画布获取图片

0 个答案: