مشاركة الشاشة باستخدام 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 و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 أو دليل البدء السريع.

مع أطيب التحيّات،