Sam Dutton
지난 주에 보고했듯이, 최근 친구인 WebRTC와 관련하여 많은 일이 있었습니다.
또 하나의 새로운 기능인 WebRTC 화면 공유를 소개합니다.
스크린캐스트는 다음 링크에서 확인하세요. youtube.com/watch?v=tD0QtBUZsF4
코드는 github.com/samdutton/rtcshare입니다.
기본적으로 RTCPeerConnection 및 chrome.tabCapture를 사용하여 브라우저 탭의 실시간 '동영상'을 공유하는 실험용 Chrome 확장 프로그램을 빌드했습니다. 사용해 보려면 Chrome Canary가 필요하며, about:flags 페이지에서 실험용 확장 프로그램 API를 사용 설정해야 합니다.
프로토타입은 강력한 appr.tc 데모를 많이 사용하며, 사실 약간의 해킹이 포함되어 있습니다. 하지만... 개념 증명이고 효과가 있습니다.
방법은 다음과 같습니다.
- 사용자가 확장 프로그램 아이콘 (주소 표시줄 옆의 '녹음 버튼')을 클릭하면 확장 프로그램의 백그라운드 스크립트 background.js가 iframe을 자체에 추가하며, 이 iframe의
src는 rtcshare.appspot.com입니다. background.js에서는token및room_key과 같은 값을 가져오는 데만 사용됩니다. 해킹이라고 말씀드렸습니다 :^}! apprtc.appspot.com의 잘린 버전으로 채널화되어 있습니다. apprtc 예와 마찬가지로 rtcshare.appspot.com도 원격 클라이언트에 사용됩니다.
chrome.browserAction.onClicked.addListener(function(tab) {
var currentMode = localStorage["capturing"];
var newMode = currentMode === "on" ? "off" : "on";
if (newMode === "on"){ // start capture
appendIframe();
} else { // stop capture
chrome.tabs.getSelected(null, function(tab){
localStream.stop();
onRemoteHangup();
});
// set icon, localStorage, etc.
}
}
- iframe이 로드되면 background.js는 iframe에서 값 (rtcshare.appspot.com 앱에서 생성)을 가져와
chrome.tabCapture.capture()를 호출하여 현재 탭의 라이브 스트림 캡처를 시작합니다.
function appendIframe(){
iframe = document.createElement("iframe");
iframe.src="https://rtcshare.appspot.com";
document.body.appendChild(iframe);
iframe.onload = function(){
iframe.contentWindow.postMessage("sendConfig", "*");
};
}
// serialised config object messaged by iframe when it loads
window.addEventListener("message", function(event) {
if (event.origin !== "https://rtcshare.appspot.com"){
return;
}
var config = JSON.parse(event.data);
room_link = config.room_link; // the remote peer URL
token = config.token; // for messaging via Channel API
// more parameter set from config
);
function startCapture(){
chrome.tabs.getSelected(null, function(tab) {
var selectedTabId = tab.id;
chrome.tabCapture.capture({audio:true, video:true}, handleCapture); // bingo!
});
}
- 라이브 스트림 (즉, 현재 탭의 라이브 '동영상')을 사용할 수 있게 되면 background.js가 피어 연결 프로세스를 시작하고 XHR 및 Google의 Channel API를 사용하여 rtcshare.appspot.com을 통해 신호를 전송합니다. 원격 피어와 통신한 동영상 스트림이
getUserMedia()가 아니라chrome.tabCapture에서 발생한다는 점을 제외하고 대체로 apprtc 데모와 같이 작동합니다.
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- 데모 목적으로 이 프로토타입 확장 프로그램은 '방 번호' 쿼리 문자열이 추가된 rtcshare.appspot.com에서 제공하는 URL이 포함된 새 탭을 엽니다. 물론 이 URL은 다른 컴퓨터나 다른 위치에서 열 수 있으며, 이 URL이 유용한 시작점이 될 수도 있습니다.
chrome.tabs.create({url: room_link});
화면 공유에는 흥미로운 사용 사례가 많을 것으로 예상되며, 아직 개발 초기 단계임에도 불구하고 플러그인 없이도 얼마나 반응이 빠르고 안정적인 탭 캡처 및 공유가 가능한지 놀라울 따름입니다.
이 확장 프로그램과 일반적인 WebRTC API에 대한 의견이 있으면 언제든지 보내주시기 바랍니다. WebRTC에 대해 자세히 알아보려면 HTML5 Rocks 도움말 또는 빠른 시작 가이드를 확인하세요.
해킹에 즐거움을 느끼시기 바라며 HTML5R 및 WebRTC의 모든 직원이 2013년을 맞이하여 좋은 새해를 기원합니다.