MozillaHacks-웹기술블로그

WebRTC, Firefox와 Chrome 상호 호환성 완료

작성자: Channy Yun

작성일: 2013/02/05 분류: WebRTC and 주요 문서

이 글은 Hello Chrome, it’s Firefox calling!에 대한 번역 및 편집본입니다.

Mozilla에서는 WebRTC 개발에서 중요한 작업을 완료하였습니다. 즉, WebRTC RTCPeerConnection에 대한 Firefox와 크롬 브라우저 사이의 상호 호환성을 완료하였습니다. 이는 Mozilla와 Google의 오픈웹 커뮤니티 및 엔지니어 사이의 협업을 통해 진행되었습니다.

RTCPeerConnection (이른바 P2P 통신) 상호 호환성을 통해 웹 개발자들은 다른 서드파티 플러그인을 설치하지 않더라도 Firefox와 Chrome 사용자를 위해서 오디오 비디오 영상을 서버 없이 직접 연결할 수 있다는 것을 의미하며 사용자들은 좀 더 편하게 보안에 대한 걱정 없이 플러그인이 필요없는 순수한 웹 기술을 이용할 수 있게 되었습니다. (역자주: 현재 전세계 Firefox 및 Chrome 점유율은 60%입니다.)

역사적인 순간을 축하하기 위해 구글의 제품 담당자인 Hugh Finnan과 Mozilla의 혁신 기술 담당자인 Todd Simpson간의 Firefox 및 크롬의 화상 회의 장면을 아래와 같이 만들어 보았습니다.

이 소식은 Chromium 공식 블로그에 함께 게시되고 있습니다.

현재 탑재된 기능은 지난 WebRTC의 Social API 통합 데모를 통해 업계 최초로 WebRTC의 주요 P2P 통신 콤포넌트인 DataChannels을 구현하였고 이를 통해서 사진 및 동영상 전송, 정보 링크 공유, 드래그앤 드롭을 통한 데이터 전송등이 가능했습니다.

WebRTC는 웹 개발자들이 실시간 동영상 호출 및 공유 기능을 웹에서 직접 구현할 수 있는 기술입니다. 지금까지 서버에 의존적이던 게임 및 화상 회의 기능을 웹 브라우저에서 직접 제공할 수 있다는 점에서 많은 관심을 받았으나 특히 소셜 웹 애플리케이션에서 더욱 멋진 기능을 제공할 수 있게 됩니다. 이번 협업은 실시간 웹 통신의 진정한 상호 호환성 노력의 첫번째 단계가 될 것입니다.

글쓴이: Serge Lachapelle, Chrome Product Manager 및 Maire Reavy, Firefox Media Product Lead

RTCPeerConnection 개발 예제

아직 RTCPeerConnection을 체험해 보지 못한 JavaScript 개발자라면 최신 Firefox Nightly 버전을 다운로드 받은 후 about:config를 통해 media.peerconnection.enabled 값을 “true”로 변경 해야 합니다. 그러면 WebRTC 기능을 사용해 볼 수 있는데 간단한 샘플앱으로 WebRTC 호출을 해 볼 수 있습니다. 

function initiateCall(user) {
  document.getElementById("main").style.display = "none";
  document.getElementById("call").style.display = "block";
 
  // Here's where you ask user permission to access the camera and microphone streams
  navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;
 
    // Here's where you set up a Firefox PeerConnection
    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);
 
    pc.onaddstream = function(obj) {
      log("Got onaddstream of type " + obj.type);
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
      document.getElementById("dialing").style.display = "none";
      document.getElementById("hangup").style.display = "block";
    };
 
    pc.createOffer(function(offer) {
      log("Created offer" + JSON.stringify(offer));
      pc.setLocalDescription(offer, function() {
        // Send offer to remote end.
        log("setLocalDescription, sending to remote");
        peerc = pc;
        jQuery.post(
          "offer", {
            to: user,
            from: document.getElementById("user").innerHTML,
            offer: JSON.stringify(offer)
          },
          function() { console.log("Offer sent!"); }
        ).error(error);
      }, error);
    }, error);
  }, error);
}
 
function acceptCall(offer) {
  log("Incoming call with offer " + offer);
  document.getElementById("main").style.display = "none";
  document.getElementById("call").style.display = "block";
 
  // Here's where you ask user permission to access the camera and microphone streams
  navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;
 
    // Here's where you set up a Firefox PeerConnection
    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);
 
    pc.onaddstream = function(obj) {
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
      document.getElementById("dialing").style.display = "none";
      document.getElementById("hangup").style.display = "block";
    };
 
    pc.setRemoteDescription(JSON.parse(offer.offer), function() {
      log("setRemoteDescription, creating answer");
      pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer, function() {
          // Send answer to remote end.
          log("created Answer and setLocalDescription " + JSON.stringify(answer));
          peerc = pc;
          jQuery.post(
            "answer", {
              to: offer.from,
              from: offer.to,
              answer: JSON.stringify(answer)
            },
            function() { console.log("Answer sent!"); }
          ).error(error);
        }, error);
      }, error);
    }, error);
  }, error);
}
 
function endCall() {
  log("Ending call");
  document.getElementById("call").style.display = "none";
  document.getElementById("main").style.display = "block";
 
  document.getElementById("localvideo").mozSrcObject.stop();
  document.getElementById("localvideo").mozSrcObject = null;
  document.getElementById("remotevideo").mozSrcObject = null;
 
  peerc.close();
  peerc = null;
}

Firefox는 아직 표준 위원회에서 이름이 결정되지 않아서 RTCPeerConnection API 호출 시 mozRTCPeerConnection을 하는 것을 보실 수 있습니다. Chrome의 경우, webkitRTCPeerConnection라는 자체 규약을 사용 중입니다. 웹 표준 제정이 완료되면 자체 규약을 바꿀 예정이며 그 동안은 두 브라우저를 지원하려면 각 자체 규약을 지원하는 코드를 작성해야 합니다.

직접 사용해 보기

Firefox에서 WebRTC 사용 설정을 완료했다면 WebRTC 설명 및 데모를 직접 해보실 수 있습니다.

Firefox와 Chrome의 첫번째 PeerConnection 상호 호환성 작업은 마쳤으나 아직 버그가 있거나 지원하는 네트워크 상황에 따라 문제가 생길 수도 있습니다. 앞으로 새로운 발전을 위한 첫걸음으로서 여러분들이 WebRTC 커뮤니티에 참가하셔서 버그 보고, 코드 개발 참여 및 의견 제시 등을 통해 더 많이 발전해 나갈 수 있을 것입니다.

여러분의 많은 참여를 바랍니다.

작성자: Channy Yun

Channy Yun가 작성한 문서들…

댓글이 없습니다.

댓글 쓰기