使用 getUserMedia 访问设备摄像头

Question

在我添加了一些额外的代码之前，以下代码一直有效，因为我试图让用户知道他们的相机是否准备好/可用。我的 html 看起来像：

<div id="notes">
</div>
<div id="video-container">
<video id="camera-stream" width="500" autoplay></video>
</div>

这里是 .js

<script type="text/javascript">
    window.onload = function() {
    var statusHTML = '<ul>';
  navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || 
                            navigator.msGetUserMedia);
if (navigator.getUserMedia) {
  navigator.getUserMedia(
    {
      video: true,
      audio: true
    },
    function(localMediaStream) {
statusHTML += '<li>You have a camera!</li>';
var vid = document.getElementById('camera-stream');
vid.src = window.URL.createObjectURL(localMediaStream);
    },
    function(err) {
  statusHTML += '<li>You dont have a camera!</li>';
      console.log('The following error occurred when trying to use getUserMedia: ' + err);
    }
  );
  statusHTML += '</ul>';
  document.getElementById('notes').innerHTML = statusHTML;
} else {
  alert('Sorry, your browser does not support getUserMedia');
}
}
</script>

我添加了这 4 个不起作用的代码，我不确定我是否做得对：

  var statusHTML = '<ul>';
  statusHTML += '<li>You have a camera!</li>';
  statusHTML += '<li>You dont have a camera!</li>';
  statusHTML += '</ul>';
  document.getElementById('notes').innerHTML = statusHTML;

总而言之，我试图在用户加载页面后立即向页面打印一条消息，它应该说他们是否有可用的相机。任何帮助将不胜感激。

Answer 1

尝试直接更改innerHTML，而不是在带有变量的函数之后。我试过了，效果很好：

window.onload = function() {
    navigator.getUserMedia = (navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || 
                            navigator.msGetUserMedia);
    if (navigator.getUserMedia) {
        navigator.getUserMedia(
        {
          video: true,
          audio: true
        },
        function(localMediaStream) {
          document.getElementById('notes').innerHTML = '<ul><li>You have a camera!</li></ul>';
          var vid = document.getElementById('camera-stream');
          vid.src = window.URL.createObjectURL(localMediaStream);
        },
        function(err) {
          document.getElementById('notes').innerHTML = '<ul><li>You dont have a camera!</li></ul>';
          alert('The following error occurred when trying to use getUserMedia: ' + err);
        }
        );
    } else {
      alert('Sorry, your browser does not support getUserMedia');
    }
}