WebRTC による画面共有

Sam Dutton

先週お知らせしたとおり、最近、おなじみの WebRTC で多くの動きがありました。

では、次に、WebRTC による画面共有について説明します。

Jake Archibald、Peter Beverloo、Paul Lewis、Sam Dutton が参加する WebRTC 画面共有拡張機能のスクリーンショット

スクリーンキャストについては、youtube.com/watch?v=tD0QtBUZsF4 をご覧ください。

コードは github.com/samdutton/rtcshare にあります。

本質的には、RTCPeerConnection と chrome.tabCapture を使用してブラウザタブのライブ「動画」を共有する試験運用版の Chrome 拡張機能を作成しました。試すには、Chrome Canary が必要です。また、about:flags ページで Experimental Extension 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 には「room number」クエリ文字列が追加されています。もちろん、この URL を別のコンピュータや別の場所で開けば、何か役に立つことを始めるきっかけになるかもしれません。
chrome.tabs.create({url: room_link});

画面共有には多くの興味深いユースケースが考えられます。この初期段階でも、プラグイン不要のタブのキャプチャと共有が、いかにレスポンシブで安定しているかに驚かされます。

この拡張機能や WebRTC API 全般について、ぜひコメントをお寄せください。WebRTC について詳しくは、HTML5 Rocks の記事またはクイック スタートガイドをご覧ください。

ハッピー ハッキング。HTML5R と WebRTC のスタッフ一同より、2013 年のご多幸をお祈りいたします。