Question

我正在尝试使用以下代码使用getUserMedia拍摄快照，问题是网络摄像头激活但我无法看到图像流，但它无法正常工作。

它是否可能因为页面没有托管在任何地方，我听说getUserMedia仅适用于使用https的安全站点......

以下是代码，它非常简单：

＆＃13;

bin/kafka-console-producer.sh  --broker-list  PLAINTEXT://192.168.1.220:9092  --topic test

＆＃13;

(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      canvas       = document.querySelector('#canvas'),
      photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 320,
      height = 0;

  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

})();

＆＃13;

Answer 1

您的img标记已被评论。这就是photo变量无法找到DOM并引用它的原因。取消注释html中的最后一行，我认为它将解决您的问题。 Working Demo

无法使用html5访问我的网络摄像头？

1 个答案: