Доступ к камере устройства с 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'); 
    } 
}