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 एपीआई के बारे में आपकी टिप्पणियों का स्वागत करते हैं. अगर आपको WebRTC के बारे में ज़्यादा जानना है, तो HTML5 Rocks का लेख या हमारी 'आसानी से सीखें' गाइड देखें.

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