تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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 فقط).

عيّنة

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

إظهار الدعم

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

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

روابط مفيدة

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

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