Sam Dutton
지난주에 보도한 바와 같이 최근 Google의 오랜 친구인 WebRTC와 관련해 많은 일이 있었습니다.
또 다른 최초의 기능이 있습니다. 바로 WebRTC 화면 공유입니다.
스크린캐스트: youtube.com/watch?v=tD0QtBUZsF4
코드는 github.com/samdutton/rtcshare에서 확인할 수 있습니다.
기본적으로 RTCPeerConnection 및 chrome.tabCapture를 사용하여 브라우저 탭의 라이브 '동영상'을 공유하는 실험적인 Chrome 확장 프로그램을 빌드했습니다. 이 기능을 사용해 보려면 Chrome Canary가 필요하며 about:flags 페이지에서 실험용 확장 프로그램 API를 사용 설정해야 합니다.
Google의 프로토타입은 강력한 appr.tc 데모에 크게 의존하며 솔직히 말해 약간의 해킹이 있습니다. 하지만 개념 증명이며 작동합니다.
다음은 YouTube가 취한 조치입니다.
- 사용자가 확장 프로그램 아이콘 (주소 표시줄 옆의 '녹화 버튼')을 클릭하면 확장 프로그램의 백그라운드 스크립트 background.js가
src이 rtcshare.appspot.com인 iframe을 자체에 추가합니다. 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가 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을 통해 이루어집니다. 전반적으로 apprtc 데모와 유사하게 작동하지만 원격 피어에 전달되는 동영상 스트림이
getUserMedia()이 아닌chrome.tabCapture에서 가져온다는 점이 다릅니다.
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- 데모를 위해 이 프로토타입 확장 프로그램은 rtcshare.appspot.com에서 제공하는 URL로 새 탭을 엽니다. 이 URL에는 'room number' 쿼리 문자열이 추가되어 있습니다. 물론 이 URL은 다른 컴퓨터, 다른 장소에서 열 수 있으며, 이것이 유용한 작업의 시작이 될 수도 있습니다.
chrome.tabs.create({url: room_link});
Google은 화면 공유에 대한 다양한 흥미로운 사용 사례를 구상하고 있으며, 개발 초기 단계임에도 불구하고 플러그인 없는 탭 캡처 및 공유가 얼마나 반응성이 높고 안정적인지 인상 깊었습니다.
언제나처럼 이 확장 프로그램과 일반적인 WebRTC API에 대한 의견을 보내주시기 바랍니다. WebRTC에 대해 자세히 알아보려면 HTML5 Rocks 도움말 또는 빠른 시작 가이드를 확인하세요.
즐거운 해킹을 기원하며 HTML5R 및 WebRTC의 모든 직원이 2013년에도 행운이 가득하길 바랍니다.