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

أخبرنا عن التصميم

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

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