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 पीयर कनेक्शन की प्रोसेस शुरू करता है. साथ ही, 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
}

1. डेमो के लिए, यह प्रोटोटाइप एक्सटेंशन, rtcshare.appspot.com से मिले यूआरएल के साथ एक नया टैब खोलता है. इसमें 'रूम नंबर' क्वेरी स्ट्रिंग जोड़ी गई है. इस यूआरएल को किसी दूसरे कंप्यूटर पर, किसी दूसरी जगह पर खोला जा सकता है. इससे आपको कुछ काम की जानकारी मिल सकती है!

chrome.tabs.create({url: room_link});

हमें स्क्रीन शेयर करने की सुविधा के लिए, इस्तेमाल के कई दिलचस्प उदाहरण मिले हैं. साथ ही, डेवलपमेंट के शुरुआती चरण में भी, हम इस बात से काफ़ी प्रभावित हैं कि बिना प्लगिन के टैब कैप्चर करने और शेयर करने की सुविधा कितनी रिस्पॉन्सिव और स्टेबल हो सकती है.

हमेशा की तरह, हमें इस एक्सटेंशन और WebRTC API के बारे में आपके सुझाव, शिकायत या राय का इंतज़ार रहेगा. अगर आपको WebRTC के बारे में ज़्यादा जानना है, तो HTML5 Rocks का लेख या हमारी क्विक स्टार्ट गाइड पढ़ें.

हैकिंग का आनंद लें. साथ ही, HTML5R और WebRTC की पूरी टीम की ओर से, आपको 2013 की शुभकामनाएं!