مشاركة أفضل لعلامات التبويب باستخدام مقبض الالتقاط

François Beaufort

Elad Alon

تتضمّن منصة الويب الآن Capture Handle، وهي آلية تساعد في التعاون بين تطبيقات الويب التي يتم تسجيلها وتلك التي يتم تسجيلها. يسمح الاسم المعرِّف لتطبيق الويب الذي يُجري عملية الالتقاط بتحديد تطبيق الويب الذي يتم التقاطه بشكل مريح وواثق (إذا وافق تطبيق الويب الذي يتم التقاطه على ذلك).

في ما يلي بعض الأمثلة التي توضّح المزايا.

المثال 1: إذا كان تطبيق ويب لمؤتمرات الفيديو يُسجّل تطبيق ويب لعرض تقديمي، يمكن لتطبيق ويب لمؤتمرات الفيديو عرض عناصر تحكّم للمستخدم للتنقّل بين الشرائح. وبما أنّ عناصر التحكّم مضمّنة مباشرةً في تطبيق الويب لمكالمات الفيديو، لا يحتاج المستخدم إلى التبديل بشكل متكرّر بين علامة التبويب لمكالمة الفيديو وعلامة التبويب المعروضة. بعد إزالة هذا العبء، يمكن للمستخدم الآن التركيز بشكل كامل على تقديم العرض التقديمي.

المثال 2: يحدث تأثير "قاعة المرايا" عند عرض سطح تم التقاطه مرة أخرى في الموقع الذي يتم التقاطه منه. ويُرجى العِلم أنّه إذا اختار المستخدم تسجيل علامة التبويب التي يتم فيها إجراء مكالمة عبر مؤتمر الفيديو، وعرض تطبيق الويب لمؤتمرات الفيديو معاينة محلية، سيظهر هذا التأثير المخيف. باستخدام Capture Handle، يمكن رصد عمليات الالتقاط الذاتي والحدّ منها، على سبيل المثال، من خلال تطبيق الويب الذي يوقف المعاينة المحلية.

لمحة عن الاسم المعرِّف لتطبيق Capture

يتألّف الاسم المعرِّف لالتقاط المحتوى من جزأين متكاملَين:

• يمكن لتطبيقات الويب التي تمّ رصدها تفعيل عرض معلومات معيّنة لبعض المصادر باستخدام 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 فقط).

عيّنة

يمكنك تجربة Capture Handle من خلال تشغيل النموذج على Glitch. احرص على الاطّلاع على رمز المصدر.

العروض التوضيحية

تتوفّر بعض العروض التوضيحية على الرابطَين التاليَين:

• جهاز التحكّم عن بُعد
• رصد الالتقاط الذاتي

رصد الميزات

للتحقّق مما إذا كان getCaptureHandle() متوافقًا، استخدِم:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

للتحقّق مما إذا كان navigator.mediaDevices.setCaptureHandleConfig() متوافقًا، استخدِم:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

الخطوات التالية

إليك نظرة سريعة على الميزات التي ستتوفّر في المستقبل القريب لتحسين ميزة مشاركة الشاشة على الويب:

• تتيح ميزة التقاط منطقة اقتصاص مقطع صوتي في فيديو تم إنشاؤه من خلال التقاط شاشة علامة التبويب الحالية.
• سيسمح التركيز الشَرطي لتطبيق الويب الذي يُجري عملية الالتقاط بإرشاد المتصفّح إلى تبديل التركيز إلى سطح العرض الذي تم التقاطه أو تجنُّب تغيير التركيز هذا.

الملاحظات

يريد فريق Chrome ومجتمع معايير الويب معرفة تجاربك مع Capture Handle.

إخبارنا بالتصميم

هل هناك مشكلة في اسم معرِّف الالتقاط لا تعمل على النحو المتوقّع؟ أو هل هناك طرق أو سمات غير متوفّرة تحتاجها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق بشأن نموذج الأمان؟

• يمكنك الإبلاغ عن مشكلة في المواصفات على مستودع GitHub، أو إضافة أفكارك إلى مشكلة حالية.

هل هناك مشكلة في التنفيذ؟

هل رصدت خطأ في عملية تنفيذ Chrome؟ أم أنّ عملية التنفيذ مختلفة عن المواصفات؟

• يمكنك الإبلاغ عن الخطأ على الرابط https://new.crbug.com. احرص على تضمين أكبر قدر ممكن من التفاصيل وتعليمات بسيطة لإعادة إنتاج الخطأ.

إظهار الدعم

هل تخطّط لاستخدام اسم معرِّف لالتقاط المحتوى؟ يساعد دعمك العلني فريق Chrome في تحديد أولويات الميزات ويُظهر لموفّري المتصفّحات الآخرين مدى أهمية توفير هذه الميزات.

يمكنك إرسال تغريدة إلى ‎@ChromiumDev وإعلامنا بمكان استخدامك لهذه الميزة وطريقة استخدامها.

روابط مفيدة

• المواصفات
• الشرح
• مراجعة العلامة
• خطأ في Chromium
• إدخال ChromeStatus.com

الشكر والتقدير

نشكر Joe Medley على مراجعة هذه المقالة.