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

2013-03-12   //   alexken작성   //   기술  //  3 Comments

1년전에 HTML5:getUserMedia를 이용한 초간단 웹캠 뷰어란 글을 쓴적이 있다.
그런데 모처럼 들어가 보니 동작을 하지 않는다.
이유는

  navigator.webkitGetUserMedia("video", success);
  ==>   navigator.webkitGetUserMedia({video:true}, success);

webkitGetUserMedia 첫번째 인자가, 문자열 “video” 가 아니라, JSON 객체 {video:ture}로 넘기도록 좀더 표준에 가까워 졌다.
하지만, webkitGetUserMedia와 webkitURL처럼 webkit prefix는 여전히 붙여줘야 함.

아래와 같이 코드를 수정해서 다시 동작하도록 해놓음.

< !DOCTYPE html>
<html>
  <body>
    <video id="myvideo"  autoplay></video>
    <script type="text/javascript">
      var video = document.getElementById('myvideo');
     
      if(navigator.webkitGetUserMedia){
        navigator.webkitGetUserMedia({video:true}, success, fail);
      }else{ 
        navigator.getUserMedia({video:true}, success, fail);
      }
   
      function success(stream){
        if(window.webkitURL){
          video.src = window.webkitURL.createObjectURL(stream);
        }else{
          video.src = window.URL.createObjectURL(stream);
        }
      }

      function fail(err){
        console.log("The following error occured: " + err);
      }
    </script>
  </body>
</html>

오늘의 주제는 chrome에서 WebRTC getUserMedia 사용법이 바뀌었다는 게 아니라, Nexus 7에서도 동작하게 되었다는 글을 쓰려고 했다.
정확히 말하자면, Nexus7이 아니라, Chrome BETA for Android에 WebRTC가 구현되었다.

그것도 그냥 되는 것은 아니고, 예전에 Desktop Chrome에서 처럼 chrome://flags에서 Enable WebRTC Android를 활성화 해줘야 한다.


그러면 Desktop Chrome과 마찬가지로 페이지 로드시에 아래 그림과 같이 전면 카메라에 대한 접근 여부를 사용자에게 물어본다.

Nexus7에서 Chrome BETA이면 아래 iframe의 video 태그를 통해서 카메라의 라이브 영상이 보여야 한다.

2013-05-02


새로 글을 쓰려다 이전글에 이어서 씀

VECKON이란 오늘 알게 된 WebRTC 이용한 화상채팅 서비스.(놀라운 건. 해외 서비스가 아니라 국내 서비스란 점.)
서로다른 google+ 아이디로 로그인해서 같은 채팅방 주소로 가면 바로 사용가능
동일 google+ 아이디로 로그인후 들어가면, 내경우 Nexus7의 ChromeBETA가 크래쉬 되었음.

아래는 Nexus7의 ChromeBETA와 PC의 Chrome간의 화상채팅 스크린샷