Question

我正在尝试使用HTML5和JavaScript访问网络摄像头流，使用此博客中描述的技术：https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

它基于navigator.getUserMedia方法。

事情是，它只是有点工作。有时它确实如此，有时它不会。如果我重新加载页面，即使这个示例网页也不再起作用。

可能缺少什么，我该如何调试呢？什么是在浏览器中访问网络摄像头的完美方式？我甚至不担心与其他浏览器的兼容性，给我一个确定的方法，只适用于Chrome，我会接受它！

创建一个java applet或者更好的选择吗？...

编辑这是我的代码：

<html>
<head>
  <meta charset="utf-8">
  <title>Display Webcam Stream</title>

  <style>
#container {
    margin: 0px auto;
    width: 640px;
    height: 480px;
    border: 10px #333 solid;
}
#videoElement {
    width: 640px;
    height: 480px;
    background-color: #666;
}
  </style>
</head>

<body>
<div>
  <a onClick="snapshot()">snap!</a>
</div>
<br/>

<div id="container">
  <div>
    <video autoplay="true" id="videoElement"></video>
  </div>
</div>
<div>
  <img width=320 height=240 src="" id="saida">
</div>
  <canvas style="display:none;"></canvas>

<script>
var video = document.querySelector('#videoElement');

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

 <!--video.addEventListener('click', snapshot, false);-->

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({audio: false, video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream    
}

function videoError(e) {
    console.log('foi malz');
}

function snapshot() {
  if (localMediaStream) {

    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;

    ctx.drawImage(video, 0, 0);
    document.querySelector('#saida').src = canvas.toDataURL('image/webp');
  }
}
</script>
</body>
</html>

EDIT2：这显然是我机器中的Chrome中的一些错误。我报告了，让我们看看会发生什么。可能永远不会被修复。无论如何，它在Firefox中完美运行。

Answer 1

除了JS代码中的注释（不是有效的JS注释）之外，您的代码没有任何问题。

但是，您可以执行的操作是在启用网络摄像头之前等待DOMContentLoaded事件被触发。另外，请检查您是否从受信任的来源加载页面。 file://和http://协议（localhost除http除外）不是安全来源。

检查工作示例： https://jsbin.com/cizahahude/edit?js,console,output

如何在JavaScript中实际进行网络摄像头访问？

1 个答案: