🍝 🍉 🔵 لقطة شاشة في Chrome - الاستعداد لـ getDisplayMedia 🤺 🧛🏻 👶🏼

قرر سوق Chrome الإلكتروني حظر التثبيت المضمن للإضافات لمتصفح Chrome. يرتبط هذا بشكل مباشر بتطبيقات WebRTC ، حيث تحتاج الآن إلى ملحق لقطات الشاشة في Chrome. هل سيصل getDisplayMedia API إلى الإنقاذ؟

لقطة شاشة في Chrome

عندما ظهرت هذه الميزة في Chrome 33 ، كانت بحاجة إلى ملحق للعمل - لحل مشاكل الأمان. هذه الطريقة أفضل من السابقة ، عندما تم إخفاء لقطات الشاشة تحت علامة ، بسبب المواقع التي طلبت من المستخدمين تنشيط هذه العلامة ... مما أدى إلى رسائل السلامة العامة .

لم يتغير Chrome كثيرًا منذ 2013. أضافت متطلبات التمديد صعوبات إلى عملية المشاركة ، ولكن بفضل التثبيت المضمن ، مما سهل الحياة:

ينقر المستخدم على زر لبدء لقطة شاشة ؛
يحدد تطبيق الويب استخدام Chrome وأنه لم يتم تثبيت الإضافة المطلوبة ؛
يبدأ تطبيق الويب التثبيت المضمن ، ويحل مشكلة الاستدعاء بنجاح ؛
في Chrome ، تنبثق نافذة الاختيار بالضبط ما يريد المستخدم مشاركته.

يمكن العثور على تفاصيل التنفيذ هنا .

يعتبر مربع التحديد عنصرًا رئيسيًا هنا. هل من الآمن استخدامه بدون شبكة سوق إلكترونية؟

في هذه الحالة ، تكون مشاركة علامة التبويب محيرة بشكل خاص ، لأنها تنتهك مبدأ وضع الحماية للنصوص "ذات الأصل المشترك".

لقطة من فايرفوكس

لدى Firefox نهج مختلف - قائمة بيضاء بالمواقع المسموح لها باستخدام واجهة برمجة التطبيقات. للحصول على هذه القائمة ، يجب على الموقع تقديم طلب إلى Mozilla وإظهار أنه يحتوي على شروط الخدمة وسياسة الخصوصية. يمكنك تعديل القائمة البيضاء باستخدام الامتداد. اختفت الحاجة إلى مثل هذه القائمة مع إصدار Firefox 52 ، عندما تم السماح لأي مصدر مؤكد باستخدام لقطات الشاشة. لا تزال واجهة برمجة تطبيقات getDisplayMedia الجديدة غير مستخدمة هنا ، والتي سنتحدث عنها قريبًا ، ولكن التنفيذ هو نفسه تقريبًا:

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 API

تعمل W3C Consortium على توحيد واجهة برمجة تطبيقات التقاط الشاشة . إنه بسيط نسبيًا ويستند إلى الوعود ، مثل 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 بالفعل لقطات شاشة هذا العام. يُعتقد أن سيناريو الاستخدام جيد جدًا ، مع إضافة إطار أصفر حول المنطقة التي يشاركها المستخدم:

لقطة نافذة في الحافة. انتبه إلى الإطار الأصفر الذي يبرز ما تتم مشاركته بالضبط.

يتغير الزمن ، وإضافات Chrome معهم

بالحديث عن تجربة المستخدم ، يعمل الامتداد look.in كما هو موضح أعلاه ولديه أكثر من مليون عملية تثبيت. جاء الغالبية العظمى من المستخدمين من خلال تثبيت مضمن ، وهناك الكثير منهم لدرجة أنه لم يتم تحديث لقطات الشاشة الخاصة بالامتداد في سوق Chrome الإلكتروني منذ ... ربما 2014.

كما تقول مدونة سوق Chrome الإلكتروني ، فإنهم يقطعون الآن تثبيتًا مضمّنًا. كانت مفاجأة كبيرة ، لقد علمت عنها لأول مرة بفضل مشكلة Chrome القديمة - لجعل لقطات الشاشة أكثر سهولة (بفضل Wilhelm Wanecek من أجل النصيحة).

إذا فهمت بشكل صحيح ، فسيؤدي ذلك إلى فتح سوق Chrome الإلكتروني في علامة تبويب منفصلة. من جانب تطبيق الويب ، سيكون من الصعب تحديد متى قام المستخدم بتثبيت الامتداد ، سيكون من الضروري استخدام الاستطلاعات أو المهلة. يشار إلى الشروط التالية في البريد:

لن يكون التثبيت المضمن متاحًا للإضافات الجديدة بدءًا من 12 حزيران (يونيو). بدون إشعار مسبق
بالنسبة للإضافات المنشورة بالفعل ، سيكون التثبيت المضمن متاحًا حتى 12 سبتمبر. إشعار مسبق - ثلاثة أشهر مقدما.

المطالبات

هناك بالتأكيد مشاكل هنا. وأنا لا أتحدث حتى عن Google Hangouts / Meet ، التي تتجنب تمامًا صعوبات UX التي يجب على الجميع التعامل معها مع الملحق المدمج. الرجال من Chrome يلفون أيديهم بالفعل .

أود تلقي بعض الأخبار من فريق سوق Chrome الإلكتروني مسبقًا (وصلت الرسالة بعد 24 ساعة من نشر المدونة). تضم امتداد look.in أكثر من مليون مستخدم ، مما يجعل هذه الإضافة من أكثر الإضافات شيوعًا في لقطات الشاشة. يثق مستخدمونا في موقعنا ، وهم يعطوننا حق الوصول إلى الميكروفونات والكاميرات. من المحتمل أن يكون استخدام تثبيت مضمن بناءً على هذه الثقة أكثر أمانًا من التثبيت من سوق Chrome الإلكتروني. لجأنا أيضًا إلى دعم السوق الإلكتروني لإزالة النسخ غير القانونية من الإضافة ، التي وضعها المئات من المستخدمين أنفسهم بشكل متكرر.

وسيكون من الرائع إذا حذرنا فريق Google.

أشار حساب webrtc إلى نية طرح getDisplayMedia استجابةً للتغييرات التي طرأت على سياسة التثبيت المضمنة.

مسار Chrome هو إصدار getDisplayMedia . تم نشر "نية طرح" بعد فترة وجيزة من الأخبار الرئيسية . ومع ذلك ، نظرًا لدورة إصدار Chrome ، فسوف يستغرق الأمر عدة أسابيع. هذا تغيير غير تافه في أحكام الأمان وسيناريوهات المستخدم ، لذلك من المشكوك فيه أنه سيحدث قبل الموعد النهائي في 12 سبتمبر. نقطة فرع Chrome 69 ، التي سيتم إصدارها بحلول 12 سبتمبر ، ستكون في غضون شهر واحد.

إن الوضع مع Chrome معقد بسبب حقيقة أنه يُسمح الآن بمشاركة علامات التبويب ، ولكن مع تحديد خيار العرض للمستخدم. مشاركة إخراج الصوت مدعومة في Chrome ، ولكنها ليست حتى في مواصفات getDisplayMedia .

كيفية الاستعداد للتغييرات في Chrome

الشفرة المتعلقة بدعم getDisplayMedia غير معقدة نسبيًا. عادة ، استدعاء API هذا هو نفسه getUserMedia مع وسيطة mediaSource تسمى في Firefox. من السهل تحديد ما إذا كانت هذه الميزة متاحة أم لا ، فأنت بحاجة إلى التحقق من وجود getDisplayMedia واستخدامها كأولوية إذا كانت متوفرة:

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

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

لا يزال من غير الواضح كيفية الإشارة إلى معدل الإطار. يعمل تطبيق ApplyConstictions في MediaStreamTrack الذي تم إرجاعه على getUserMedia وربما يعمل على getDisplayMedia :

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

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

التفاصيل في مواصفات bugtracker .

للأسف ، لا يمكن للمهايئ . js إدراج getDisplayMedia ، حيث يتم تنفيذ التفاعل مع كل ملحق بشكل مختلف قليلاً.

أبعد وأعلى

أراقب بعناية ما إذا كان بإمكان مطوري WebRTC من Google التأثير على الموعد النهائي لعمليات التثبيت المضمنة أو طرح getDisplayMedia في الوقت المحدد. في بعض الأحيان ، يكون التطوير تحت الويب فوضويًا ، نعم ، ولكن كقاعدة في النهاية نرى نتيجة جيدة. نحن في انتظار نهاية هذه القصة ، ويسعدنا أن نقول وداعًا لملحقاتنا.

لقطة شاشة في Voximplant

لدينا أيضًا لقطة شاشة تعمل بنجاح في Chrome. ومع ذلك ، على الرغم من أن أحدًا لم يودع الإضافات ، إلا أنه يلزمك القيام بما يلي:

قم بتنزيل الامتداد من المستودع الخاص بنا: github.com/voximplant/voximplant-chrome-extension
انتقل إلى المجلد الذي تم تحميل الإضافة فيه ، وافتح البيان. json وأضف عنوان URL لموقعك إلى قسم التطابقات .
في علامة تبويب Chrome الجديدة ، أدخل chrome: // extensions ، وقم بتمكين وضع المطور وتحميل الامتداد من المجلد.

لذلك قمت بتثبيت نسخة ديف من الملحق. إنه أكثر ملاءمة للمستخدمين النهائيين إذا نشرت الإضافة في متجر 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