जैसा कि हमने पिछले हफ़्ते बताया था, हमारे पुराने दोस्त WebRTC के साथ हाल ही में बहुत कुछ हो रहा है.
खैर... एक और तरीका है: WebRTC स्क्रीनशेयरिंग.
यह स्क्रीनकास्ट उपलब्ध है: youtube.com/watch?v=tD0QtBUZsF4
और यह रहा कोड: github.com/samdutton/rtcshare
संक्षेप में, हमने एक प्रयोगिक Chrome एक्सटेंशन बनाया है जो किसी ब्राउज़र टैब का लाइव 'वीडियो' शेयर करने के लिए RTCPeerConnection और chrome.tabCapture का इस्तेमाल करता है. अगर आपको इसे आज़माना है, तो आपको Chrome कैनरी की ज़रूरत होगी. साथ ही, आपको about:flags पेज पर एक्सपेरिमेंटल एक्सटेंशन एपीआई चालू करना होगा.
हमारा प्रोटोटाइप दमदार appr.tc डेमो पर बहुत ज़्यादा निर्भर है, और सच कहूं, तो यह एक तरीका है! लेकिन... यह सिद्धांत का सबूत है और यह कारगर भी है.
हमने इसे इस तरह किया:
- जब उपयोगकर्ता, एक्सटेंशन आइकॉन (पता बार के बगल में मौजूद 'रिकॉर्ड करें बटन') पर क्लिक करता है, तब एक्सटेंशन की बैकग्राउंड स्क्रिप्ट 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.
}
}
- 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 पीयर कनेक्शन प्रोसेस को शुरू करता है. साथ ही, XHR और Google के Channel API का इस्तेमाल करके, rtcshare.appspot.com से सिग्नल भेजा जाता है. कुल मिलाकर, यह 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 लेख या हमारी आसानी से सिखाने वाली गाइड देखें.
हैकिंग मुबारक हो -- और HTML5R और WebRTC पर सभी को 2013 की शुभकामनाएं!