اشتراک گذاری صفحه با WebRTC

Sam Dutton

همانطور که هفته گذشته گزارش دادیم ، اخیراً اتفاقات زیادی برای دوست قدیمی‌مان WebRTC افتاده است.

خب... این هم یکی دیگر از اولین‌ها: اشتراک‌گذاری صفحه نمایش در WebRTC.

این هم یک اسکرین‌شات: youtube.com/watch?v=tD0QtBUZsF4

و این هم کد: github.com/samdutton/rtcshare

در اصل، ما یک افزونه آزمایشی کروم ساخته‌ایم که از RTCPeerConnection و chrome.tabCapture برای اشتراک‌گذاری یک «ویدیو»ی زنده از یک تب مرورگر استفاده می‌کند. اگر می‌خواهید آن را امتحان کنید، به Chrome Canary نیاز دارید و باید APIهای افزونه آزمایشی را در صفحه about:flags فعال کنید.

نمونه اولیه ما به شدت به نسخه نمایشی قدرتمند appr.tc متکی است و راستش را بخواهید، کمی شبیه هک است! اما... این یک اثبات مفهوم است و کار می‌کند.

در اینجا نحوه انجام آن را آورده‌ایم:

1. وقتی کاربر روی آیکون افزونه (دکمه ضبط کنار نوار آدرس) کلیک می‌کند، اسکریپت پس‌زمینه افزونه background.js ، یک iframe به خودش اضافه می‌کند که src آن 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 و API کانال گوگل انجام می‌شود. در کل، مانند نسخه آزمایشی 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 یا راهنمای شروع سریع ما را بررسی کنید.

هک مبارک -- و بهترین آرزوها را برای همه در HTML5R و WebRTC در سال ۲۰۱۳ دارم!