HTML5 getUserMedia() 미디어 소스

나는 html5로 스트리밍 웹캠을 만들었습니다. 현재 웹캠을 통해 사진을 찍을 수 있지만 목록에서 미디어 스트림 장치를 선택할 수 있는지 알고 싶습니다. 활성화 할 웹캠을 선택하고 싶은 두 개의 웹캠이 있습니다. html5 getUserMedia() 호출을 사용하면 어떻게 할 수 있습니까? 감사합니다.HTML5 getUserMedia() 미디어 소스

출처

2013-08-05 Arshak Movsissian

최신 크롬 카나리아 (30.0.1587.2)에서는 chrome://flags (이미 활성화되었을 수있는 것 같습니다)에서 기기 열거를 사용하도록 설정하고 MediaStreamTrack.getSources API를 사용하여 카메라를 선택할 수 있습니다.

자세한 내용은 WebRTC bug 및 mailing list post을 참조하십시오.

출처

2013-08-05 17:37:39

당신은 웹 카메라의 목록을 얻을 수

<!DOCTYPE html> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <title>Video Camera List</title> 

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script> 

      <style type="text/css" media="screen"> 
      video { 
      border:1px solid gray; 
     } 
     </style> 
    </head> 
    <body> 
    <script> 
     if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>'; 

     var videoSources = []; 

     MediaStreamTrack.getSources(function(media_sources) { 
     console.log(media_sources); 
    // alert('media_sources : '+media_sources); 
     media_sources.forEach(function(media_source){ 
      if (media_source.kind === 'video') { 
      videoSources.push(media_source); 
      } 
     }); 

     getMediaSource(videoSources); 
     }); 

     var get_and_show_media = function(id) { 
     var constraints = {}; 
     constraints.video = { 
      optional: [{ sourceId: id}] 
     }; 

     navigator.webkitGetUserMedia(constraints, function(stream) { 
      console.log('webkitGetUserMedia'); 
      console.log(constraints); 
      console.log(stream); 

      var mediaElement = document.createElement('video'); 
      mediaElement.src = window.URL.createObjectURL(stream); 
      document.body.appendChild(mediaElement); 
      mediaElement.controls = true; 
      mediaElement.play(); 

     }, function (e) 
     { 
     // alert('Hii'); 
      document.body.appendChild(document.createElement('hr')); 
      var strong = document.createElement('strong'); 
      strong.innerHTML = JSON.stringify(e); 
      alert('strong.innerHTML : '+strong.innerHTML); 
      document.body.appendChild(strong); 
     }); 
     }; 

     var getMediaSource = function(media) { 
     console.log(media); 
     media.forEach(function(media_source) { 
      if (!media_source) return; 

      if (media_source.kind === 'video') 
      { 
      // add buttons for each media item 
      var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'}); 
      $("body").append(button); 
      // show video on click 
      $(document).on("click", "#"+media_source.id, function(e){ 
       console.log(e); 
       console.log(media_source.id); 
       get_and_show_media(media_source.id); 
      }); 
      } 
     }); 
     } 
    </script> 
    </body> 
</html>

출처

2013-09-21 05:13:35

HTML5 getUserMedia() 미디어 소스

답변

관련 문제