Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

HTML5의 WebRTC : getUserMedia

최근 FRENDS에서 HTML5를 좀 파보자는 의미로 매달 HTML5 스펙 중 하나씩 골라서 해카톤을 진행하고 있다. 두 달전의 선택한 주제가 WebRTC였는데 무척 어려워서 첫달에는 헤매기만 하다가 이번달까지 WebRTC를 만졌다. 이것저것 테스트해본김에 아직 이슈들이 좀 남아있기는 하지만 일단 정리를 좀 해본다.


WebRTC
HTML5에서 새로 추가된 WebRTC는 별도의 플러그인 없이도 웹에서 RTC(Real-Time Communications)를 구현하기 위한 스펙이다. 좀 더 정확히 얘기하자면 비디오와 오디오 같은 미디어를 실시간으로 주고 받을 수 있는 기능으로 쉽게 화상채팅같은 기능을 생각하면 된다.

WebRTC에는 크게 3가지 API가 있는데 MediaStream과 PeerConnection, DataChannel이다. MediaStream은 사용자의 PC에서 카메라나 마이크같은 장비에서 스트림을 얻어내는 것이고 PeerConnection은 다른 사용자와 미디어를 P2P로 주고받는 기능이고 DataChannel은 다수와 스트림을 주고받는 기능인것 같은데 아직 DataChannel은 제대로 구현된 것이 없어보인다.(뭐 이런 관점에서는 PeerConnection도 비슷하다고 할 수 있지만 그래도 구현은 되어 있으니...)

WebRTC에 대해서 감을 좀 잡으려면 이번 Google I/O의 WebRTC 발표영상을 참고하는게 가장 좋다. 전체적으로 설명을 잘 해주고 있고 예제도 꽤 잘 나와 있다. 이글의 소스도 이 영상의 내용을 많이 참고했으며 자세한 내용은 HTML5 Rocks : WebRTC에 잘 나와있다.


getUserMedia
getUserMedia는 스펙의 제목에서도 알수 있듯이(Media Capture and Streams) 위에서 얘기했던대로 사용자 PC에서 미디어의 스트림을 얻어내는 MediaStream의 API다. 뭐 이것밖에 없으니 getUserMedia랑 MediaStream은 그냥 같은말이라고 생각해도 무방한듯 하다. 현재 크롬의 최신버전인 22에서는 getUserMedia가 기본으로 구현이 되어 있기 때문에 별도의 설정없이도 사용할 수 있다. 만약 그 이전 버전이라서(21에서 지원했는지는 잘 모르겠다.) getUserMedia가 동작하지 않는다면 chrome://flags 에서 MediaStream을 사용하도록 설정해야 한다.(22에선 기본이므로 이 설정자체가 없다.) 파이어폭스는 아직 구현중인데 나이틀리 빌드에는 포함되었고 오페라도 최신버전인 12.02에서는 getUserMedia를 지원하고 있다.

이제 getUserMeida를 살펴보자.

<video id="vid1" autoplay></video>
<br>
<button id="btn1">Start</button>

일단 위와 같은 마크업을 만든다. <video>태그는 영상을 보여주기 위한 것이고 Start 버튼은 getUserMedia를 실행하기 위한 버튼일 뿐이다.

$(document).ready(function() {
  var vid1 = $("#vid1")[0];
  var btn1 = $("#btn1")[0];
  
  $(btn1).click(start);

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia;
  URL = window.URL || window.webkitURL || window.mozURL || window.oURL || window.msURL;
  
  function start() {
    $(btn1).attr('disabled', true);
    navigator.getUserMedia({audio:true, video:true}, gotStream, function(err) {console(err);});
  }
  
  function gotStream(stream){
    vid1.src = URL.createObjectURL(stream);
  }
});

getUserMedia를 사용하기 위한 간단한 코드이다.(참고로 jQuery를 사용한 코드이다.) 여기서 가장 중요한 부분은 12번 라인이다. 7,8번 라인은 브라우저 벤더별로 getUserMedia의 구현체 이름이 다른 것을 해결하기 위한 코드이다. 크롬에서는 navigator.webkitGetUserMidea를 사용하는데 다른 브라우저가 다 구현된 것은 아니지만 보통 저런시긍로 해결한다.(이는 아마 스펙이 완전히 확정된 시점에서 프리픽스가 사라질 것이다.) 이를 12번 라인에서 사용한다.

위에서 보는 것과 같이 getUserMedia의 첫번써 파리미터로 어느 미디어를 사용할 것인지를 객체로 전달하고 성공하면 첫번째 콜백이 실행되고 실패하면 두번째 콜백이 실행된다. 이 HTML 파일을 실행하면 다음과 같은 화면을 볼 수 있다.

getUserMedia 예제 화면

여기서 Start버튼을 누르면 크롬에서는 아래와 같이 미디어의 사용을 허용할 것인지 묻는 창(?)이 등장한다.

미디어의 사용을 허가할 것인지 문는

웹브라우저이기 때문에 미디어스트림에 대한 샌드박스라고 생각하면 된다 실행시마다 매번 물어본다.(오페라는 도메인별로 관리하는것 같기도 하다.) 이는 괜찮은 샌드박스인데 당연히 이러한 제약이 없다면 어떤 웹페이지에 들어갔을때 자동으로 카메라가 켜지고 스트림을 어딘가로 몰래 보낼 수 있다고 생각하면 끔찍하다.

미디어는 옵션에서 선택할 수 있다.

옵션을 누르면 현재 PC에서 사용가능한 장비가 나오고 선택을 변경할 수 있다. 허용을 누르면 성공 콜백으로 지정한 gotStream()이 실행된다.(거부하면 마지막 콜백이 실행된다.) getStream()의 파라미터로는 사용자 PC에서 얻어낸 미디어의 스트림이 전달된다. 이 예제에서는 전달받은 스트림를 URL 객체로 만들어서 <video> 태그의 소스로 지정했다. <video> 태그에 autoplay를 지정했으므로 스트림이 전달되는 즉시 아래와 같이 PC의 카메라의 화면을 볼 수 있다.

카메라의 영상이 웹브라우저에 나타난

간단한 예제이기는 하지만 이 예제는 다음 링크에서 확인할 수 있다.


2012/10/30 23:49 2012/10/30 23:49