HTML5:getUserMedia를 이용한 초간단 웹캠 뷰어

2012-05-17   //   alexken작성   //   기술  //  7 Comments
<html>
  <body>
    <video src="" id="myvideo"  autoplay></video>
    <script type="text/javascript">
      var video = document.getElementById('myvideo');
      navigator.webkitGetUserMedia("video", success);
   
      function success(stream){
        video.src = window.webkitURL.createObjectURL(stream);
      }
    </script>
  </body>
</html>

핵심만 요약한게 아니라 실제 동작하는 전체코드.

HTML5 RTC getUserMedia를 이용.
프로그램을 짰다라기 보다, 브라우저에서 getUserMedia를 지원만 한다면 이함수 호출 하나로 그냥 웹캠 뷰어가 됨.
getUserMedia로 웹캠 뷰어는 날로먹고, Skype 정도의 프로그램도 WebSocket과 함께 쓰면 웹앱으로 코딩 몇줄로 끝.

Chrome18 이후(Canary 아니더라도)인 경우, chrome://flags에서 Media Stream 항목만 활성화하면 이용할 수 있음.
Chrome21부터는 기본으로 활성활 될꺼라고 한다.(2012.08.09추가)

위 코드는 표준 코드가 아니고 현재 Chrome에서 동작하기 위한 코드이고, 향후 표준화 완료되면 다음과 같이 수정되어야 함.

  navigator.webkitGetUserMedia("video", success);
  => navigator.getUserMedia({video:true}, success);
 
  window.webkitURL.createObjectURL(stream);
  => URL.createObjectURL(stream);


웹캠이 장착되어 있고, 크롬 브라우저에 플래그 활성화하면 본페이지를 보면 위와 같이 카메라 사용여부를 사용자에게 물어보고 허락해주면 아래 웹캠 화면이 보여야 함.


안되면 이 링크를 클릭