مشاركة الشاشة باستخدام WebRTC

سام دوتون

Twitter GitHub تأثير اهتزاز Mastodon الصفحة الرئيسية

كما ذكرنا في الأسبوع الماضي، شهدنا الكثير مؤخرًا من أحداث WebRTC التي تتعلّق بصديقنا القديم.

حسنًا... إليك خطوة أخرى أولاً: مشاركة شاشة WebRTC.

إليك تسجيل رقمي للشاشة: youtube.com/watch?v=tD0QtBUZsF4

وإليك الرمز: github.com/samdutton/rtcshare

وفي الأساس، أنشأنا إضافة Chrome تجريبية تستخدم RTCPeerConnection وchrome.tabCapture لمشاركة "فيديو" مباشر لعلامة تبويب في المتصفح. إذا كنت تريد تجربتها، يجب استخدام Chrome Canary، وعليك تفعيل واجهات برمجة التطبيقات للإضافات التجريبية في صفحة 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});

ونتوقع الكثير من حالات الاستخدام الشيقة لمشاركة الشاشة، وحتى في هذه المرحلة المبكرة من التطوير، نحن معجبون بمدى استجابة واستقرار التقاط علامات التبويب ومشاركتها والتي تحتوي على مكونات إضافية.

نرحّب دائمًا بتعليقاتك حول هذه الإضافة وواجهات برمجة تطبيقات WebRTC بشكل عام. إذا كنت تريد الاطّلاع على مزيد من المعلومات حول WebRTC، يمكنك مراجعة مقالة HTML5 Rocks أو دليل البدء السريع.

نتمنى لك حظًا سعيدًا في مجال الاختراق لعام 2013 من الجميع في HTML5R و WebRTC.