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

Sam Dutton

كما ذكرنا في الأسبوع الماضي، حدث الكثير مؤخرًا بشأن 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 وواجهة برمجة تطبيقات القناة من 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.