WebRTC로 화면 공유

Sam Dutton

지난주에 알려드린 바와 같이, 오랜 친구인 WebRTC와 관련하여 최근 많은 일이 있었습니다.

또 하나의 새로운 기능인 WebRTC 화면 공유를 소개합니다.

스크린캐스트는 다음 링크에서 확인하세요. youtube.com/watch?v=tD0QtBUZsF4

코드는 다음과 같습니다. github.com/samdutton/rtcshare

기본적으로 RTCPeerConnection 및 chrome.tabCapture를 사용하여 브라우저 탭의 실시간 '동영상'을 공유하는 실험용 Chrome 확장 프로그램을 빌드했습니다. 이 기능을 사용해 보려면 Chrome Canary가 필요하며 about:flags 페이지에서 실험용 확장 프로그램 API를 사용 설정해야 합니다.

프로토타입은 강력한 appr.tc 데모를 많이 사용하며, 사실 약간의 해킹이 포함되어 있습니다. 하지만... 개념 증명이며 작동합니다.

방법은 다음과 같습니다.

1. 사용자가 확장 프로그램 아이콘 (주소 표시줄 옆의 '녹음 버튼')을 클릭하면 확장 프로그램의 백그라운드 스크립트 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.
    }
}

1. 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!
    });
}

1. 라이브 스트림 (즉, 현재 탭의 라이브 '동영상')을 사용할 수 있게 되면 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
}

1. 데모 목적으로 이 프로토타입 확장 프로그램은 '방 번호' 쿼리 문자열이 추가된 rtcshare.appspot.com에서 제공하는 URL이 포함된 새 탭을 엽니다. 물론 이 URL은 다른 컴퓨터나 다른 위치에서 열 수 있으며, 이 URL이 유용한 시작점이 될 수도 있습니다.

chrome.tabs.create({url: room_link});

화면 공유에는 흥미로운 사용 사례가 많을 것으로 예상되며, 아직 개발 초기 단계임에도 불구하고 플러그인 없이도 얼마나 반응이 빠르고 안정적인 탭 캡처 및 공유가 가능한지 놀라울 따름입니다.

이 확장 프로그램과 일반적인 WebRTC API에 관한 의견을 보내주세요. WebRTC에 대해 자세히 알아보려면 HTML5 Rocks 도움말 또는 빠른 시작 가이드를 확인하세요.

해킹에 즐거움을 느끼시기 바라며 HTML5R 및 WebRTC의 모든 직원이 2013년을 축하합니다.