、私は彼らの利用可能/準備カメラまたはnot.My HTMLのように見えることをユーザーの気付かせるためにしようとしていますので、私はいくつかの追加のコードを追加するまで、getUserMedia

Question

コード以下

とデバイスのカメラが正常に働いていたアクセス：

<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'); 
    } 
}