지난 몇 주 동안 WebRTC와 관련하여 많은 일이 있었습니다. 업데이트 사용 가능
특히 여러 브라우저와 플랫폼에 WebRTC가 도입되는 것을 기쁘게 생각합니다.
getUserMedia는 이제 Chrome, Opera, Firefox Nightly/Aurora에서 플래그 없이 사용할 수 있습니다 (Firefox의 경우 환경설정을 지정해야 함). simpl.info/gum에서 getUserMedia의 교차 브라우저 데모를 살펴보고 getUserMedia를 Web Audio의 입력으로 사용하는 Chris Wilson의 놀라운 예를 확인하세요.
이제 webkitRTCPeerConnection가 Chrome 안정화 버전으로 제공되며 플래그가 없습니다. TURN 서버 지원은 Chrome 24 이상에서 사용할 수 있습니다. simpl.info/pc에서 Chrome의 RTCPeerConnection 구현에 관한 매우 간단한 데모를 확인하고 apprtc.appspot.com에서 멋진 영상 채팅 애플리케이션을 확인해 보세요. 이름에 관한 설명: 여러 번 반복한 후 현재 webkitRTCPeerConnection로 알려져 있습니다. 다른 이름과 구현은 지원 중단되었습니다. 표준 프로세스가 안정화되면 webkit 접두사가 삭제됩니다.)
이제 WebRTC는 Firefox Nightly 및 Aurora의 데스크톱용으로, Ericsson Bowser 브라우저를 통해 iOS 및 Android용으로 구현되었습니다.
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의 스크린샷입니다.
이 데모는 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에서 신고해 주세요.