دعم المتصفح
- 102
- 102
- x
- x
تم تزويد منصة الويب الآن بـ Capture Handle، وهي آلية تساعد في التعاون بين تسجيل تطبيقات الويب والتقاطها. يتيح مقبض الالتقاط لتطبيق الويب الالتقاط أن يتعرّف على تطبيق الويب الذي تم التقاطه بطريقة مريحة وموثوقة (في حال اشتراك تطبيق الويب الذي تم التقاطه).
وتوضّح بعض الأمثلة المزايا.
المثال 1: إذا كان تطبيق ويب لاجتماعات الفيديو يلتقط تطبيق ويب لعرض تقديمي، يمكن لتطبيق الويب لاجتماعات الفيديو الكشف عن عناصر التحكم للمستخدم في التنقل بين الشرائح. نظرًا لأن عناصر التحكم تكون مضمّنة مباشرةً في تطبيق الويب لمؤتمرات الفيديو، لن يحتاج المستخدم إلى التبديل بشكلٍ متكرر بين علامة التبويب "مؤتمرات الفيديو" وعلامة التبويب المعروضة. مع رفع هذا العبء، أصبح المستخدم الآن حرًا في التركيز بشكل كامل على تقديم عرضه التقديمي.
المثال 2: يحدث تأثير "قاعة المرايا" عندما تتم إعادة عرض سطح تم التقاطه إلى الموقع الجغرافي الذي يتم التقاطه. ومن الجدير بالذكر أنه إذا اختار المستخدم التقاط علامة التبويب التي تجري فيها مكالمة مؤتمر الفيديو، وكان تطبيق الويب لمؤتمرات الفيديو يعرض معاينة محلية، فستتم ملاحظة هذا التأثير المخيف. وباستخدام "الاسم المعرِّف للالتقاط"، يمكن رصد ميزة الالتقاط الذاتي والحدّ منها، على سبيل المثال، من خلال إيقاف تطبيق الويب لميزة المعاينة المحلية.
لمحة عن مقبض الالتقاط
يتألف مقبض الالتقاط من جزأين متكاملَين:
- يمكن لتطبيقات الويب التي تم التقاطها أو تفعيل ميزة عرض معلومات معيَّنة لبعض المصادر من خلال
navigator.mediaDevices.setCaptureHandleConfig(). - ويمكن عندئذٍ التقاط تطبيقات الويب قراءة هذه المعلومات باستخدام
getCaptureHandle()على عناصرMediaStreamTrack.
الجانب الذي تم التقاطه
يمكن لتطبيقات الويب أن تعرض المعلومات لالتقاط تطبيقات الويب. ويتم ذلك من خلال استدعاء navigator.mediaDevices.setCaptureHandleConfig() باستخدام كائن اختياري يتألف من هذه الأعضاء:
handle: يمكن أن يكون أي سلسلة يصل طولها إلى 1024 حرفًا.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، أو إضافة أفكارك إلى مشكلة حالية.
هل تواجه مشكلة في عملية التنفيذ؟
هل واجهت مشكلة في التنفيذ في Chrome؟ أم أن التنفيذ يختلف عن المواصفات؟
- يُرجى الإبلاغ عن الخطأ على https://new.crbug.com. واحرص على تضمين أكبر قدر ممكن من التفاصيل، بالإضافة إلى تعليمات بسيطة لإعادة إنتاج الخطأ. تعمل ميزة الخطأ بشكلٍ رائع لمشاركة النسخ المُعاد إنتاجها بسرعة وسهولة.
إظهار الدعم
هل تخطّط لاستخدام مقبض الالتقاط؟ يساعد الدعم العام فريق Chrome على إعطاء الأولوية للميزات، كما يُظهر لموردي المتصفحات الآخرين مدى أهمية دعمهم لها.
يمكنك إرسال تغريدة إلى @ChromiumDev وإعلامنا بمكان استخدامها وكيفية استخدامها.
روابط مفيدة
شكر وتقدير
شكرًا لـ جو ميدلي على مراجعة هذه المقالة.