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

François Beaufort

Elad Alon

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

توضّح بعض الأمثلة الفوائد.

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

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

لمحة عن مقبض الالتقاط

يتألف Capture Handle من جزأين متكاملَين:

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

الأمان والخصوصية

من الناحية النظرية، يمكن حاليًا التعاون بين تطبيقات الويب التي يتم التقاطها وتلك التي يتم التقاطها من خلال تضمين "وحدات بكسل سحرية" في تطبيق الويب الذي يتم التقاطه أو تضمين رموز استجابة سريعة في بث الفيديو مثلاً. تقدّم ميزة Capture Handle آلية أبسط وأكثر موثوقية وأمانًا. ويسمح أيضًا لتطبيق الويب الذي تم التقاطه باختيار الجمهور، إما اختيار المصادر أو الويب بأكمله.

يُرجى العِلم أنّ navigator.mediaDevices.setCaptureHandleConfig() لا تتوفّر إلا للإطارات الرئيسية ذات المستوى الأعلى في سياقات التصفّح الآمن (HTTPS فقط).

عيّنة

يمكنك تجربة Capture Handle من خلال تشغيل العينة.

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

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

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

رصد الميزات

للتحقّق مما إذا كان الرمز 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. احرص على تضمين أكبر قدر ممكن من التفاصيل وتعليمات بسيطة لإعادة إنتاج الخطأ.

إظهار الدعم

هل تخطّط لاستخدام Capture Handle؟ يساعد دعمك العلني فريق Chrome في تحديد أولويات الميزات، ويوضّح لمورّدي المتصفّحات الآخرين مدى أهمية توفيرها.

أرسِل تغريدة إلى ‎@ChromiumDev وأخبرنا عن مكان استخدامك لها وكيفية استخدامها.

روابط مفيدة

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

الإقرارات

نشكر جو ميدلي على مراجعة هذه المقالة.