שיתוף מסך עם WebRTC

Sam Dutton

כפי שדיווחנו בשבוע שעבר, קרו הרבה דברים לאחרונה עם החבר הישן שלנו, WebRTC.

ובכן… הנה עוד תכונה חדשה: שיתוף מסך ב-WebRTC.

הנה הקלטת מסך: youtube.com/watch?v=tD0QtBUZsF4

וזה הקוד: github.com/samdutton/rtcshare

בעיקרון, פיתחנו תוסף ניסיוני ל-Chrome שמשתמש ב-RTCPeerConnection וב-chrome.tabCapture כדי לשתף 'סרטון' בשידור חי של כרטיסיית דפדפן. כדי לנסות את התכונה, צריך להשתמש ב-Chrome Canary ולהפעיל את ממשקי ה-API הניסיוניים של התוספים בדף about:flags.

אב הטיפוס שלנו מסתמך במידה רבה על הדמו החזק של appr.tc, ולמען האמת, הוא קצת 'פריצה'. אבל… זו הוכחת היתכנות, והיא עובדת.

כך עשינו זאת:

1. כשהמשתמש לוחץ על סמל התוסף ('לחצן ההקלטה' ליד סרגל הכתובות), סקריפט הרקע של התוסף background.js מצרף לעצמו 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 מקבל ממנו ערכים (שנוצרו על ידי האפליקציה 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 מפעיל את תהליך החיבור בין השותפים, והאיתור מתבצע דרך rtcshare.appspot.com באמצעות XHR ו-Channel API של Google. בסך הכול, הקוד פועל כמו הדמו של apprtc, חוץ מכך ששידור הווידאו שמשודר לשותף הרחוק מגיע מ-chrome.tabCapture ולא מ-getUserMedia().

function handleCapture(stream){
    localStream = stream; // used by RTCPeerConnection addStream();
    initialize(); // start signalling and peer connection process
}

1. למטרות הדגמה, התוסף הזה הוא אב טיפוס שפותח כרטיסייה חדשה עם כתובת ה-URL שסופקה על ידי rtcshare.appspot.com, עם מחרוזת שאילתה של 'מספר חדר' שנוספה. כמובן, אפשר לפתוח את כתובת ה-URL הזו במחשב אחר, במקום אחר, וזה יכול להיות התחלה של משהו שימושי.

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

אנחנו רואים הרבה תרחישים מעניינים לשימוש בשיתוף המסך, וגם בשלב המוקדם הזה של הפיתוח אנחנו מתרשמים מהיכולת של התכונה לצלם ולשתף כרטיסיות בצורה רספונסיבית ויציבה ללא תוספים.

כמו תמיד, נשמח לקבל ממך תגובות לגבי התוסף הזה ועל ממשקי ה-API של WebRTC באופן כללי. מידע נוסף על WebRTC זמין במאמר HTML5 Rocks או במדריך למתחילים.

שתהיה לכם פריצה נעימה – וכל טוב לשנת 2013 מכל הצוותים של HTML5R ו-WebRTC!