همانطور که هفته گذشته گزارش دادیم ، اخیراً با دوست قدیمی ما WebRTC اتفاقات زیادی افتاده است.
خب... در اینجا یک مورد دیگر وجود دارد: اشتراک گذاری صفحه نمایش WebRTC.
این یک نمایشگر است: youtube.com/watch?v=tD0QtBUZsF4
و کد اینجاست: github.com/samdutton/rtcshare
در اصل، ما یک برنامه افزودنی آزمایشی Chrome ساخته‌ایم که از RTCPeerConnection و chrome.tabCapture برای اشتراک‌گذاری یک «ویدیو» زنده از برگه مرورگر استفاده می‌کند. اگر می‌خواهید آن را امتحان کنید، به Chrome Canary نیاز دارید و باید APIهای برنامه افزودنی آزمایشی را در صفحه about:flags فعال کنید.
نمونه اولیه ما به شدت به نسخه ی نمایشی قدرتمند appr.tc متکی است و، صادقانه بگویم، کمی هک است! اما... این یک اثبات مفهوم است و کار می کند.
در اینجا نحوه انجام این کار آمده است:
- وقتی کاربر روی نماد برنامه افزودنی («دکمه ضبط» در کنار نوار آدرس) کلیک می‌کند، اسکریپت پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه پس‌زمینه.js توسط کاربر توسط کاربر کلیک می‌شود، که
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.
}
}
- هنگامی که 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!
});
}
- هنگامی که پخش زنده در دسترس است (به عبارت دیگر، یک "ویدیوی" زنده از برگه فعلی)، background.js فرآیند اتصال همتا را آغاز می کند و سیگنال دهی از طریق rtcshare.appspot.com با استفاده از XHR و کانال API Google انجام می شود. در مجموع، مانند نسخه ی نمایشی apprtc کار می کند، با این تفاوت که جریان ویدئویی که به همتای راه دور منتقل می شود از
chrome.tabCaptureاست و نهgetUserMedia().
function handleCapture(stream){
localStream = stream; // used by RTCPeerConnection addStream();
initialize(); // start signalling and peer connection process
}
- برای اهداف نمایشی، این برنامه افزودنی نمونه اولیه یک برگه جدید با نشانی اینترنتی ارائه شده توسط rtcshare.appspot.com باز می کند که یک رشته جستجوی «شماره اتاق» اضافه شده است. البته، این URL می تواند در یک کامپیوتر دیگر، در مکانی دیگر باز شود، و این ممکن است شروع کار مفیدی باشد!
chrome.tabs.create({url: room_link});
ما موارد استفاده جالب زیادی را برای اشتراک‌گذاری صفحه‌نمایش در نظر می‌گیریم و حتی در این مرحله اولیه توسعه، ما تحت تأثیر قرار گرفته‌ایم که چگونه ضبط و اشتراک‌گذاری برگه بدون افزونه پاسخگو و پایدار است.
مانند همیشه، ما از نظرات شما استقبال می کنیم: در مورد این برنامه افزودنی و به طور کلی در مورد WebRTC API. اگر می‌خواهید درباره WebRTC بیشتر بدانید، مقاله HTML5 Rocks یا راهنمای شروع سریع ما را بررسی کنید.
هک مبارک -- و بهترین آرزوها برای سال 2013 برای همه در HTML5R و WebRTC!