訪問設備攝像頭與getUserMedia

Question

下面的代碼已成功工作，直到我增加了一些額外的代碼，因爲我試圖讓用戶認識的，他們的相機準備/可用或not.My 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'); 
    } 
}