🤰🏻 🤛 ♣️ Chrome में स्क्रीनशॉट - getDisplayMedia के लिए तैयार हो रहा है 🚃 🏁 👞

Chrome वेब स्टोर ने Chrome के लिए एक्सटेंशन की इनलाइन स्थापना को प्रतिबंधित करने का निर्णय लिया है। यह सीधे WebRTC अनुप्रयोगों से संबंधित है, क्योंकि अब आपको क्रोम में स्क्रीनशॉट के लिए एक्सटेंशन की आवश्यकता है। GetDisplayMedia API बचाव में आएगा?

क्रोम में स्क्रीनशॉट

जब यह विशेषता Chrome 33 में दिखाई दी , तो उसे सुरक्षा समस्याओं को हल करने के लिए काम करने के लिए एक विस्तार की आवश्यकता थी। यह तरीका पिछले वाले से बेहतर है, जब स्क्रीनशॉट्स को एक झंडे के नीचे छिपाया गया था, इस वजह से साइटों ने उपयोगकर्ताओं को इस ध्वज को सक्रिय करने के लिए कहा ... जिसके कारण सार्वजनिक सुरक्षा संदेश आए।

2013 के बाद से क्रोम बहुत नहीं बदला है। एक्सटेंशन आवश्यकताओं ने साझा करने की प्रक्रिया में कठिनाइयों को जोड़ा, लेकिन इनलाइन स्थापना के लिए धन्यवाद, जिसने जीवन को सरल बनाया:

उपयोगकर्ता स्क्रीनशॉट शुरू करने के लिए एक बटन क्लिक करता है;
वेब एप्लिकेशन यह निर्धारित करता है कि क्रोम का उपयोग किया जा रहा है और वांछित विस्तार स्थापित नहीं है;
वेब एप्लिकेशन इनलाइन इंस्टॉलेशन शुरू करता है, कॉलबैक को सफलतापूर्वक हल करता है;
क्रोम में, पसंद की एक विंडो ठीक उसी तरह पॉप अप होती है, जिसे उपयोगकर्ता साझा करना चाहता है।

कार्यान्वयन का विवरण यहां पाया जा सकता है ।

चयन बॉक्स यहां एक प्रमुख तत्व है। क्या वेब स्टोर नेटवर्क के बिना इसका उपयोग करना सुरक्षित है?

इस मामले में, एक टैब साझा करना विशेष रूप से हैरान करने वाला है, क्योंकि यह "क्रॉस-ऑरिजिन" स्क्रिप्ट के लिए सैंडबॉक्स सिद्धांत का उल्लंघन करता है।

फ़ायरफ़ॉक्स स्क्रीनशॉट

फ़ायरफ़ॉक्स का एक अलग दृष्टिकोण है - उन साइटों की एक सफेद सूची जो एपीआई का उपयोग करने की अनुमति है। इस सूची में शामिल होने के लिए, साइट को मोज़िला से अनुरोध करना चाहिए और दिखाना होगा कि इसमें सेवा की शर्तें और गोपनीयता नीति है। आप एक्सटेंशन का उपयोग करके श्वेतसूची को संशोधित कर सकते हैं। फ़ायरफ़ॉक्स 52 की रिलीज़ के साथ ऐसी सूची की आवश्यकता गायब हो गई, जब किसी भी पुष्टि किए गए स्रोत को स्क्रीनशॉट का उपयोग करने की अनुमति दी गई थी। नया getDisplayMedia API अभी भी यहां उपयोग नहीं किया गया है , जिसके बारे में हम जल्द ही बात करेंगे, लेकिन कार्यान्वयन लगभग समान है:

navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

view raw screensharing-ff.js hosted with ❤ by GitHub

नतीजतन, विनिर्देश को पूरा करने के लिए कार्यान्वयन को बदल दिया जाएगा।

getDisplayMedia एपीआई

W3C कंसोर्टियम स्क्रीन कैप्चर एपीआई को मानकीकृत करने के लिए काम कर रहा है। यह अपेक्षाकृत सरल है और वादों पर आधारित है, जैसे getUserMedia :

// 1 Screen Capture API
navigator.getDisplayMedia({ video: true })
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

view raw example1-spec.js hosted with ❤ by GitHub

Microsoft EDGE ने इस साल पहले ही स्क्रीनशॉट को रोलआउट कर दिया है। उपयोगकर्ता द्वारा साझा किए जाने वाले क्षेत्र के चारों ओर पीले फ्रेम को जोड़ने के साथ उपयोग परिदृश्य को बहुत अच्छी तरह से सोचा जाता है:

एज में विंडो स्क्रीनशॉट। पीले फ्रेम पर ध्यान दें जो वास्तव में साझा किया गया है।

समय परिवर्तन और उनके साथ क्रोम एक्सटेंशन

यूजर एक्सपीरियंस की बात करें तो, ऊपर बताए अनुसार.in.in एक्सटेंशन काम करता है और इसके मिलियन इंस्टॉलेशन हैं। उपयोगकर्ताओं के विशाल बहुमत इनलाइन इंस्टॉलेशन के माध्यम से आए, और उनमें से कई ऐसे हैं जो क्रोम वेब स्टोर में एक्सटेंशन के स्क्रीनशॉट के बाद से अपडेट नहीं किए गए हैं ... शायद 2014।

जैसा कि क्रोम वेब स्टोर ब्लॉग कहता है , वे अब एक इनलाइन इंस्टॉलेशन को काट रहे हैं। यह एक बड़ा आश्चर्य था, मैंने पहली बार पुरानी क्रोम समस्या के लिए धन्यवाद - स्क्रीनशॉट को अधिक सुलभ बनाने के लिए (टिप के लिए विल्हेम वेनसेक के लिए धन्यवाद) सीखा ।

अगर मैं सही तरीके से समझूं, तो इससे क्रोम वेब स्टोर एक अलग टैब में खुल जाएगा। वेब एप्लिकेशन की ओर से, यह निर्धारित करना अधिक कठिन हो जाएगा कि उपयोगकर्ता ने एक्सटेंशन कब इंस्टॉल किया, चुनाव या टाइमआउट का उपयोग करना आवश्यक होगा। निम्नलिखित पद में संकेत दिए गए हैं:

12 जून से शुरू होने वाले नए एक्सटेंशन के लिए इनलाइन इंस्टॉलेशन उपलब्ध नहीं होगा। पूर्व सूचना के बिना;
पहले से प्रकाशित एक्सटेंशन के लिए, इनलाइन स्थापना 12 सितंबर तक उपलब्ध होगी। अग्रिम सूचना - तीन महीने पहले।

शिकायतें

यहां समस्याएं जरूर हैं। और मैं Google हैंगआउट / मीट के बारे में भी बात नहीं कर रहा हूं, जो पूरी तरह से यूएक्स कठिनाइयों से बचा जाता है जो बाकी सभी को अंतर्निहित विस्तार से निपटना पड़ता है। क्रोम के लोग पहले से ही अपने हाथ घुमा रहे हैं।

मैं क्रोम वेब स्टोर की टीम से पहले से कुछ समाचार प्राप्त करना चाहता हूं (यह पत्र ब्लॉग पोस्ट के लगभग 24 घंटे बाद आया है)। दिखावट विस्तार में एक मिलियन से अधिक उपयोगकर्ता हैं, जो इस विस्तार को स्क्रीनशॉट के लिए सबसे लोकप्रिय में से एक बनाता है। हमारे उपयोगकर्ता हमारी साइट पर भरोसा करते हैं, अर्थात् वे हमें अपने माइक्रोफोन और कैमरों तक पहुंच प्रदान करते हैं। इस ट्रस्ट पर आधारित इनलाइन इंस्टॉलेशन का उपयोग करना संभवतः Chrome वेब स्टोर से इंस्टॉल करने से अधिक सुरक्षित है। हमने एक्सटेंशन की अवैध प्रतियां निकालने के लिए वेब स्टोर के समर्थन की ओर रुख किया, जिसे सैकड़ों उपयोगकर्ताओं ने खुद को बार-बार सेट किया है।

और यह बहुत अच्छा होगा अगर Google के लोग हमें चेतावनी दें।

@Webrtc खाते ने इनलाइन इंस्टॉलेशन नीति में परिवर्तन के जवाब में getDisplayMedia को रोल आउट करने के इरादे का उल्लेख किया।

Chrome के लिए पथ getDisplayMedia की रिलीज़ है। मुख्य समाचार के कुछ ही समय बाद "सूचना जारी करने का इरादा" प्रकाशित हुआ। हालाँकि, Chrome के रिलीज़ चक्र को देखते हुए, इसमें कई सप्ताह लगेंगे। यह सुरक्षा प्रावधानों और उपयोगकर्ता परिदृश्यों में एक गैर-तुच्छ परिवर्तन है, इसलिए यह संदिग्ध है कि यह 12 सितंबर की समय सीमा से पहले होगा। Chrome 69 के लिए शाखा बिंदु, जो 12 सितंबर तक जारी किया जाएगा, एक महीने के भीतर है।

क्रोम के साथ स्थिति इस तथ्य से जटिल है कि अब साझाकरण टैब की अनुमति है, लेकिन उपयोगकर्ता के लिए प्रदर्शन की पसंद पर सीमा के साथ। Chrome में ऑडियो आउटपुट साझाकरण समर्थित है, लेकिन यह getDisplayMedia विनिर्देश में भी नहीं है।

क्रोम में बदलाव की तैयारी कैसे करें

GetDisplayMedia समर्थन से संबंधित कोड अपेक्षाकृत सरल है। आमतौर पर, इस एपीआई के लिए एक कॉल के रूप में एक ही है GetUserMedia साथ MediaSource तर्क फ़ायरफ़ॉक्स में कहा जाता है। यह निर्धारित करना कि क्या यह सुविधा उपलब्ध है, आसान है, आपको यह जांचने की आवश्यकता है कि क्या getDisplayMedia मौजूद है और उपलब्ध होने पर इसे प्राथमिकता का उपयोग करें:

if ('getDisplayMedia' in window.navigator) {
// getDisplayMedia
} else {
//
}

view raw check-getDisplayMedia.js hosted with ❤ by GitHub

यह अभी भी स्पष्ट नहीं है कि फ्रेम दर को कैसे इंगित किया जाए। GetUserMedia के लिए दिए गए MediaStreamTrack कार्यों में applyConstraints का उपयोग करना और संभवतः getDisplaybedia के लिए काम करेगा :

navigator.getDisplayMedia({video: true})
.then(stream => {
stream.getTracks()[0].applyConstraints({frameRate: 5});
return stream;
})

view raw frame-rate.js hosted with ❤ by GitHub

विवरण स्पेसिफिकेशन बगट्रैकर में हैं ।

काश, एडॉप्टर.जेएस getDisplayMedia नहीं डाल सकता है , क्योंकि प्रत्येक एक्सटेंशन के साथ इंटरैक्शन को थोड़ा अलग तरीके से लागू किया जाता है।

दूर और ऊंचा

मैं ध्यान से देखता हूं कि क्या Google के WebRTC डेवलपर इनलाइन इंस्टॉलेशन की समय सीमा को प्रभावित कर सकते हैं या समय पर getDisplayMedia को रोल आउट कर सकते हैं। वेब के तहत विकास कभी-कभी गड़बड़ होता है, हाँ, लेकिन अंत में एक नियम के रूप में हम एक अच्छा परिणाम देखते हैं। हम इस कहानी के अंत की प्रतीक्षा कर रहे हैं और अपने एक्सटेंशन को अलविदा कहने में खुशी होगी।

Voximplant में स्क्रीनशॉट

हमारे पास एक स्क्रीनशॉट भी है जो क्रोम में सफलतापूर्वक काम करता है। हालांकि, जबकि किसी ने भी विस्तार को अलविदा नहीं कहा है, आपको निम्नलिखित कार्य करने की आवश्यकता है:

हमारे रिपॉजिटरी से एक्सटेंशन डाउनलोड करें: github.com/voximplant/voximplant-chrome-extension
उस फ़ोल्डर पर जाएं जहां एक्सटेंशन डाउनलोड किया गया है, मैनिफ़ेस्ट खोलें। खोलें और अपनी साइट के URL को मिलान अनुभाग में जोड़ें।
नए क्रोम टैब में, क्रोम: // एक्सटेंशन दर्ज करें , डेवलपर मोड को सक्षम करें और फ़ोल्डर से एक्सटेंशन को लोड करें।

इसलिए आप एक्सटेंशन के देव संस्करण को स्थापित करें। यदि आप Googe वेब स्टोर में एक्सटेंशन प्रकाशित करते हैं तो यह अंतिम उपयोगकर्ताओं के लिए अधिक सुविधाजनक है। इसके बारे में, साथ ही साथ हमारे प्लेटफॉर्म पर स्क्रीनशॉट का उपयोग कैसे करें, आप हमारे हाउ-टू में पढ़ सकते हैं। एक अच्छी साझेदारी है!

	navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
	.then(stream => {
	// ,
	videoElement.srcObject = stream;
	}, error => {
	console.log(" ", error);
	});

	// 1 Screen Capture API
	navigator.getDisplayMedia({ video: true })
	.then(stream => {
	// ,
	videoElement.srcObject = stream;
	}, error => {
	console.log(" ", error);
	});

	if ('getDisplayMedia' in window.navigator) {
	// getDisplayMedia
	} else {
	//
	}

	navigator.getDisplayMedia({video: true})
	.then(stream => {
	stream.getTracks()[0].applyConstraints({frameRate: 5});
	return stream;
	})

Chrome में स्क्रीनशॉट - getDisplayMedia के लिए तैयार हो रहा है