Firefox, Android, iOS에서 지원되는 WebRTC

지난 몇 주 동안 WebRTC에 많은 문제가 발생했습니다. 새로운 소식을 전해드립니다.

특히 WebRTC가 여러 브라우저와 플랫폼에 도입되는 것을 보게 되어 매우 기쁩니다.

getUserMedia는 이제 플래그가 없는 Chrome, Opera, Firefox Nightly/Aurora에서 사용할 수 있습니다 (Firefox의 경우 환경설정을 설정해야 함). simpl.info/gum에서 getUserMedia의 브라우저 간 데모를 살펴보고, 웹 오디오 입력으로 getUserMedia를 사용하는 크리스 윌슨의 놀라운 예를 확인해 보세요.

이제 webkitRTCPeerConnection가 Chrome 안정화 버전으로 출시되었으며 플래그가 없습니다. TURN 서버 지원은 Chrome 24 이상에서 제공됩니다. simpl.info/pc에서 매우 간단한 Chrome RTCPeerConnection 구현에 대한 데모를 볼 수 있고 apprtc.appspot.com에서 훌륭한 영상 채팅 애플리케이션을 확인할 수 있습니다(이름에 대한 설명: 여러 번 반복한 후 현재는 webkitRTCPeerConnection로 알려져 있음). 다른 이름과 구현은 지원 중단되었습니다. 표준 프로세스가 안정화되면 webkit 접두사가 삭제됩니다.)

또한 WebRTC는 이제 Firefox Nightly 및 Aurora의 데스크톱, iOS 및 Android의 경우 Ericsson Bowser 브라우저를 통해 구현되었습니다.

DataChannel

DataChannel은 임의 데이터의 고성능, 짧은 지연 시간, P2P 통신을 위한 WebRTC API입니다. 이 API는 WebSocket과 단순하지만, 브라우저 간에 직접 통신이 이루어지므로 릴레이 (TURN) 서버가 필요한 경우에도 (방화벽 및 NAT에 대처하기 위해 '홀 펀칭'이 실패하는 경우) DataChannel이 WebSocket보다 훨씬 빠를 수 있습니다.

DataChannel은 Chrome 버전 25용으로 계획되어 있으나 이 버전을 놓칠 수도 있습니다. 이는 실험용으로만 기능하고 제대로 작동하지 않을 수 있으며 Firefox 구현으로 커뮤니케이션이 불가능할 수도 있습니다. 이후 버전의 DataChannel은 보다 안정적이며 Firefox에서 DataChannel과 상호작용할 수 있도록 구현될 예정입니다.

Firefox Nightly/Aurora는 mozGetUserMedia, mozRTCPeerConnection, DataChannel를 지원합니다. 하지만 about:config 환경설정을 반드시 지정해야 합니다.

다음은 Firefox에서 실행되는 DataChannel의 스크린샷입니다.

Firefox DataChannel 스크린샷

이 데모는 http://mozilla.github.com/webrtc-landing/data_test.html에서 제공됩니다. 다음은 코드 스니펫입니다.

pc1.onconnection = function() {
    log("pc1 onConnection ");
    dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
    dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
    log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
    channel = dc1;
    channel.binaryType = "blob";
    log("pc1 new binarytype = " + dc1.binaryType);

    // Since we create the datachannel, don't wait for onDataChannel!
    channel.onmessage = function(evt) {
    if (evt.data instanceof Blob) {
        fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
    } else {
        fancy_log('pc2 said: ' + evt.data, "blue");
    }
    }
    channel.onopen = function() {
    log("pc1 onopen fired for " + channel);
    channel.send("pc1 says Hello...");
    log("pc1 state: " + channel.state);
    }
    channel.onclose = function() {
    log("pc1 onclose fired");
    };
    log("pc1 state:" + channel.readyState);
        }

Firefox 구현에 대한 자세한 내용과 데모는 hacks.mozilla.org 블로그를 참조하세요. 기본 WebRTC 지원은 2013년 초에 Firefox 18에서 출시될 예정이며 getUserMedia, createOffer/answer 제약 조건, TURN (방화벽으로 보호되는 브라우저 간 통신을 허용하기 위해) 등의 추가 기능에 대한 지원이 계획되어 있습니다.

WebRTC에 대한 자세한 내용은 WebRTC 시작하기를 참조하세요. 인쇄판 및 여러 eBook 형식으로 제공되는 WebRTC 도서도 있습니다.

해상도 제약 조건

제약조건은 Chrome 24 이상에서 구현되었습니다. getUserMedia() 및 RTCPeerConnection addStream() 호출의 동영상 해상도 값을 설정하는 데 사용할 수 있습니다.

simpl.info/getusermedia/constraints에서 예시를 확인할 수 있습니다. 중단점을 설정하고 값을 조정하여 다양한 제약 조건을 적용해 보세요.

몇 가지 주의사항... 하나의 브라우저 탭에 설정된 getUserMedia 제약 조건은 이후에 열리는 모든 탭의 제약 조건에 영향을 미칩니다. 제약 조건에 허용되지 않는 값을 설정하면 다소 모호한 오류 메시지가 표시됩니다.

navigator.getUserMedia error:  NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

서버가 아닌 로컬 파일 시스템에서 getUserMedia를 사용하려고 하면 이 오류가 발생합니다.

화면 캡처 스트리밍

이제 Chrome 개발자 채널에서 탭 캡처를 사용할 수 있습니다. 이렇게 하면 탭의 표시되는 영역을 스트림으로 캡처하여 로컬에서 사용하거나 RTCPeerConnection의 addStream()와 함께 사용할 수 있습니다. 장면 전송 및 웹페이지 공유에 매우 유용합니다. 자세한 내용은 WebRTC 탭 콘텐츠 캡처 제안을 참고하세요.

이 업데이트에 대한 댓글을 남겨 계속 알려 주세요. API와 관련된 개발자 여러분의 의견을 소중하게 생각합니다.

발견한 버그는 chromiumbugs.appspot.com에서 신고해야 합니다.