는에서 getUserMedia와 장치 카메라에 액세스

Question

코드 i가 사용자를 인식하기 위해 노력하고 있기 때문에 내가 몇 가지 추가 코드를 추가 할 때까지 성공적으로 작업 한 다음

이 가능/자신의 카메라를 준비 또는 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'); 
    } 
}