WebRTC로 화면 공유

샘 더튼

지난주에 보고한 바와 같이, 최근에 오랜 친구인 WebRTC에서 많은 일이 있었습니다.

자, 첫 번째 질문입니다. WebRTC 화면 공유입니다.

제이크 아치볼드, 피터 비벌루, 폴 루이스, 샘 더튼이 출연하는 WebRTC 화면 공유 확장 프로그램의 스크린샷

스크린캐스트는 다음과 같습니다. youtube.com/watch?v=tD0QtBUZsF4

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

본질적으로 Google은 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을 통해 신호를 보냅니다. 원격 피어에 전달되는 동영상 스트림이 getUserMedia()가 아닌 chrome.tabCapture에서 발생한다는 점을 제외하면 대체로 apprtc 데모와 같이 작동합니다.
function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}
  1. 이 프로토타입 확장 프로그램은 데모를 위해 rtcshare.appspot.com에서 제공하는 URL이 포함된 새 탭을 열며, 여기에는 '객실 번호' 쿼리 문자열이 추가됩니다. 물론 이 URL은 다른 컴퓨터, 다른 위치에서 열 수 있으며, 이를 통해 유용한 것의 시작이 될 수 있습니다.
chrome.tabs.create({url: room_link});

화면 공유에 대한 흥미로운 사용 사례가 많을 것으로 예상하는데, 아직 개발 초기 단계이라 할지라도 플러그인이 없는 안정적인 탭 캡처와 공유의 속도에 감탄을 금치 못했습니다.

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

즐겁게 해킹하시기 바랍니다. HTML5R 및 WebRTC의 모든 분께 2013년 한 해를 보내시기를 기원합니다.