שיתוף מסך עם WebRTC

סאם דוטון

Twitter GitHub Glitch Mastodon דף הבית

כפי שדיווחנו בשבוע שעבר, קרו הרבה לאחרונה עם ידידנו הוותיק 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, ונוספה לה מחרוזת שאילתה 'מספר חדר'. כמובן שניתן לפתוח את כתובת האתר הזו במחשב אחר, במקום אחר וזו עשויה להיות התחלה של משהו שימושי!

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

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

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

האקינג שמח - ומאחלים לך שנת 2013 מכולם ב-HTML5R ו-WebRTC!