دعم المتصفح
- 102
- 102
- x
- x
وتم تضمين مقبض الالتقاط الآن في النظام الأساسي للويب، وهي آلية تساعد على التعاون بين التقاط تطبيقات الويب وتسجيلها. يتيح مقبض الالتقاط لتطبيق الويب التقاط صورة تطبيق الويب الذي تم التقاطه بسهولة وثقة. (إذا كان تطبيق الويب الذي تم التقاطه قد فعّل هذه الميزة)
بعض الأمثلة توضح الفوائد.
مثال 1: إذا كان تطبيق ويب لاجتماعات الفيديو يلتقط تطبيق ويب للعرض التقديمي، يمكن أن يعرض تطبيق الويب لاجتماعات الفيديو عناصر التحكم للمستخدم للتنقل بين الشرائح. بما أنّ عناصر التحكّم مضمّنة مباشرةً في تطبيق الويب لاجتماعات الفيديو، لن يحتاج المستخدم إلى التبديل بشكلٍ متكرّر بين علامة التبويب "اجتماعات الفيديو" وعلامة التبويب "مشاركة العرض". مع تخفيف هذا العبء، أصبح المستخدم الآن حر في التركيز بشكل أكبر على تقديم العرض التقديمي.
المثال 2: يحدث تأثير "قاعة المرايا" عند عرض سطح تم التقاطه مرة أخرى في الموقع الذي يتم التقاطه. وبشكل ملحوظ، إذا اختار المستخدم التقاط علامة تبويب يتم فيها إجراء مكالمة فيديو جماعية، وعرض تطبيق الويب لمؤتمرات الفيديو معاينة محلية، سيلاحظ هذا التأثير المخيف. باستخدام مقبض الالتقاط، يمكن رصد الالتقاط الذاتي والحدّ من تأثيره، على سبيل المثال، من خلال إيقاف تطبيق الويب للمعاينة المحلية.
لمحة عن مقبض الالتقاط
يتكون مقبض الالتقاط من جزأين متكاملين:
- يمكن لتطبيقات الويب التي تم تسجيلها تفعيل إمكانية عرض معلومات معيّنة لبعض المصادر من خلال
navigator.mediaDevices.setCaptureHandleConfig(). - يمكن بعد ذلك التقاط تطبيقات الويب قراءة تلك المعلومات باستخدام
getCaptureHandle()على عناصرMediaStreamTrack.
الجانب الملتقط
يمكن أن تكشف تطبيقات الويب المعلومات عن احتمالية التقاط تطبيقات الويب. ويتم ذلك من خلال استدعاء navigator.mediaDevices.setCaptureHandleConfig() باستخدام كائن اختياري يتألف من العناصر التالية:
handle: يمكن أن يكون أي سلسلة يصل طولها إلى 1,024 حرفًا.exposeOrigin: في حالtrue، قد يكون أصل تطبيق الويب الذي تم التقاطه عرضةً لالتقاط تطبيقات الويب.permittedOrigins: القيم الصالحة هي (1) مصفوفة فارغة أو (2) مصفوفة تتضمّن العنصر الواحد"*"أو (3) مصفوفة من المصادر. إذا كانpermittedOriginsيحتوي على العنصر"*"، يمكن رصدCaptureHandleمن خلال جميع تطبيقات الويب التي تم التقاطها. بخلاف ذلك، يمكن ملاحظة ذلك فقط عند التقاط تطبيقات الويب التي يكون مصدرهاpermittedOrigins.
يوضِّح المثال التالي كيفية عرض معرّف فريد عالمي (UUID) تم إنشاؤه عشوائيًا كاسم معرِّف، كما يوضِّح المصدر لأي تطبيق ويب للالتقاط.
const config = {
handle: crypto.randomUUID(),
exposeOrigin: true,
permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);
ملاحظة: لا يعرف تطبيق الويب الذي تم التقاطه ما إذا كان يتم التقاطها أم لا. ما لم يكُن ذلك، أي أنّ تطبيق الويب الذي يجمع المعلومات يستخدم معلومات CaptureHandle لإنشاء اتصال مع تطبيق الويب الذي تم التقاطه (من خلال المراسلة من خلال عامل أو بنية أساسية مشترَكة للسحابة الإلكترونية، على سبيل المثال).
جانب الالتقاط
يحتوي تطبيق الويب للالتقاط على فيديو MediaStreamTrack ويمكنه قراءة معلومات مقبض الالتقاط من خلال الاتصال بـ getCaptureHandle() على ذلك MediaStreamTrack. تعرض هذه المكالمة الرسالة null في حال عدم توفُّر مؤشر التقاط أو عدم السماح لتطبيق الويب الذي يتم الالتقاط بقراءته. في حال توفُّر مؤشر التقاط، وتمت إضافة تطبيق الويب للالتقاط إلى permittedOrigins، ستعرض هذه المكالمة كائنًا يضم العناصر التالية:
handle: قيمة السلسلة التي ضبطها تطبيق الويب الذي تم التقاطه باستخدامnavigator.mediaDevices.setCaptureHandleConfig().origin: أصل تطبيق الويب الذي تم التقاطه في حال ضبطexposeOriginعلىtrue. وبخلاف ذلك، لا يتم تعريفه.
يعرض المثال التالي كيفية قراءة معلومات مؤشر الالتقاط من مقطع فيديو.
// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();
// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
// Use captureHandle.origin and captureHandle.handle...
}
يمكنك مراقبة تغييرات CaptureHandle من خلال الاستماع إلى أحداث "capturehandlechange" على عنصر MediaStreamTrack. تحدث التغييرات في الحالات التالية:
- مكالمات تطبيق الويب التي تم التقاطها
navigator.mediaDevices.setCaptureHandleConfig() - يحدث التنقل بين المستندات في تطبيق الويب الذي تم التقاطه.
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
الأمان والخصوصية
من الناحية النظرية، أصبح التعاون بين التقاط تطبيقات الويب وتسجيلها ممكنًا من خلال تضمين "وحدات البكسل السحرية" في تطبيق الويب الذي تم التقاطه أو تضمين رموز الاستجابة السريعة في الفيديو المضمّن مثلاً. يوفّر مقبض الالتقاط آلية أكثر بساطة وأمانًا وموثوقية. ويسمح أيضًا لتطبيق الويب الذي تم التقاطه باختيار الجمهور، إما اختيار المصادر أو الويب بالكامل.
تجدر الإشارة إلى أنّ navigator.mediaDevices.setCaptureHandleConfig() لا يتوفّر إلا للإطارات الرئيسية ذات المستوى الأعلى في سياقات التصفُّح الآمن (HTTPS فقط).
عيّنة
يمكنك اللعب باستخدام مقبض الالتقاط من خلال تشغيل عيّنة على Glitch. احرص على الاطّلاع على رمز المصدر.
إصدارات تجريبية
تتوفر بعض الإصدارات التجريبية على الرابط التالي:
اكتشاف الميزات
للتحقُّق مما إذا كان "getCaptureHandle()" متوافقًا، يُرجى استخدام ما يلي:
if ('getCaptureHandle' in MediaStreamTrack.prototype) {
// getCaptureHandle() is supported.
}
للتحقُّق مما إذا كان "navigator.mediaDevices.setCaptureHandleConfig()" متوافقًا، يُرجى استخدام ما يلي:
if ('setCaptureHandleConfig' in navigator.mediaDevices) {
// navigator.mediaDevices.setCaptureHandleConfig() is supported.
}
الخطوات التالية
في ما يلي نظرة سريعة على ما يمكن توقعه في المستقبل القريب من شأنه تحسين مشاركة الشاشة على الويب:
- ستتيح ميزة التقاط منطقة من الصفحة اقتصاص مقطع فيديو مشتق من لقطة العرض لعلامة التبويب الحالية.
- سيسمح التركيز المشروط لتطبيق الويب الذي يتم التقاط الصور له بتوجيه المتصفح إلى تبديل التركيز إلى سطح العرض الذي تم التقاطه أو تجنُّب هذا التغيير في التركيز.
إضافة ملاحظات
يرغب فريق Chrome ومنتدى معايير الويب في التعرّف على تجاربك في استخدام مؤشر الالتقاط.
أخبِرنا عن التصميم
هل هناك مشكلة في مقبض الالتقاط لا تعمل كما توقعت؟ أو هل هناك طرق أو خصائص مفقودة تحتاج إليها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق على نموذج الأمان؟
- يمكنك الإبلاغ عن مشكلة في المواصفات على GitHub repo، أو إضافة أفكارك إلى مشكلة حالية.
هل هناك مشكلة في التنفيذ؟
هل عثرت على خطأ في تنفيذ Chrome؟ أم أنّ عملية التنفيذ تختلف عن المواصفات؟
- عليك الإبلاغ عن الخطأ على https://new.crbug.com. واحرص على تضمين أكبر قدر ممكن من التفاصيل والتعليمات البسيطة لإعادة إنتاج الخطأ. يعمل Glitch بشكل رائع لمشاركة عمليات إعادة التحميل بسرعة وسهولة.
إظهار الدعم
هل تريد استخدام "مقبض الالتقاط"؟ يساعد الدعم العلني فريق Chrome في تحديد أولويات الميزات ويوضّح لموردي المتصفِّح الآخرين مدى أهمية دعمهم.
يمكنك إرسال تغريدة إلى @ChromiumDev وإخبارنا بمكان استخدامك له وكيفية استخدامك له.
روابط مفيدة
شكر وتقدير
شكرًا جو ميدلي لمراجعة هذه المقالة.