שיתוף מסך עם WebRTC

Sam Dutton

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

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

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

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

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

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

כך עשינו זאת:

1. כשהמשתמש לוחץ על סמל התוסף (לחצן ההקלטה שליד סרגל הכתובות), סקריפט הרקע של התוסף background.js מוסיף לעצמו iframe, שכתובת ה-srcURL שלו היא rtcshare.appspot.com. בסקריפט background.js נעשה שימוש ב-iframe רק כדי לקבל ערכים כמו 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!