تسجيل بث فيديو من أي عنصر

François Beaufort
François Beaufort
GitHub
Elad Alon

باستخدام واجهة برمجة التطبيقات لميزة "التقاط الشاشة"، يمكنك التقاط صورة لعلامة التبويب الحالية بالكامل. تتيح لك واجهة برمجة التطبيقات Element Capture API تسجيل عنصر HTML معيّن. ويحوّل هذا الإجراء عملية تسجيل لعلامة التبويب بأكملها إلى عملية تسجيل لشجرة فرعية معيّنة من نموذج DOM، مع تسجيل العناصر المباشرة فقط للعنصر المستهدَف. بمعنى آخر، تعمل هذه الميزة على اقتصاص المحتوى وإخفائه وتزيله.

لماذا يجب استخدام ميزة "التقاط العناصر"؟

يمكن أن يساعدك النظر في متطلبات تطبيق مؤتمرات الفيديو في معرفة الحالات التي تكون فيها ميزة "التقاط العناصر" مفيدة. إذا كان لديك تطبيق لمكالمات الفيديو يتيح لك تضمين تطبيقات تابعة لجهات خارجية في إطار iframe، قد تحتاج أحيانًا إلى تسجيل إطار iframe هذا كفيديو وإرساله إلى المشاركين عن بُعد.

لقطة شاشة لمكالمة فيديو في Chrome
يستخدم "إلاد" تطبيقًا تابعًا لجهة خارجية في مكالمة عبر مؤتمر فيديو مع "فاروق".

سيؤدي الاتصال بالرقم getDisplayMedia() والسماح للمستخدم باختيار علامة التبويب الحالية إلى نقل علامة التبويب الحالية بالكامل. من المرجّح أن يؤدي ذلك إلى إعادة إرسال الفيديو الخاص بالمستخدمين إليهم. يمكنك اقتصاص هذا الجزء باستخدام ميزة التقاط منطقة.

ولكن ماذا لو تفاعل المُقدّم مع تطبيق مكالمات الفيديو وظهر بعض المحتوى، مثل قائمة منسدلة، فوق المحتوى المراد تسجيله؟

لقطة شاشة لقائمة منسدلة تحجب المحتوى المراد تسجيله
ستظهر قائمة منسدلة فوق المحتوى المخصّص للتصوير.

لن يساعدك خيار "التقاط منطقة" في حلّ هذه المشكلة. قد يظهر جزء من القائمة المنسدلة على شاشات المشاركين عن بُعد.

لقطة شاشة لقائمة منسدلة تم التقاطها
تظهر القائمة المنسدلة التي أنشأها "إياد" أعلى المحتوى الذي تلقّاه "فاروق".

تؤدي حقيقة أنّ ميزة "التقاط منطقة" تلتقط أجزاء من العناصر بهذه الطريقة (المعروفة باسم المحتوى الذي يحجب الرؤية) إلى حدوث مشاكل متعدّدة:

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

تحلّ واجهة برمجة التطبيقات Element Capture API جميع هذه المشاكل، من خلال السماح لك باستهداف العنصر الذي تريد مشاركته.

لقطة شاشة للعنصر المستهدَف بدون قائمة منسدلة في العرض
لا تظهر لـ "فاروق" القائمة المنسدلة التي أنشأها "إياد".

كيف يمكنني استخدام ميزة "التقاط العناصر"؟

captureTarget هو عنصر على صفحتك يحتوي على المحتوى الذي يريد المستخدم تسجيله. تريد من تطبيق الويب لاجتماعات الفيديو التقاط صورة captureTarget ومشاركتها مع المشاركين عن بُعد. إذًا، يمكنك اشتقاق RestrictionTarget من captureTarget. بعد حظر مقطع الفيديو باستخدام هذا RestrictionTarget، تتألف اللقطات في مقطع الفيديو هذا الآن من وحدات البكسل التي تشكّل جزءًا من captureTarget وعناصر DOM المباشرة المشتقة منه فقط.

إذا تغيّر حجم captureTarget أو شكله أو موقعه، يتبعه مقطع الفيديو بدون الحاجة إلى أي إدخال إضافي من أي تطبيق ويب. وبالمثل، لا يتطلّب حجب المحتوى الذي يظهر أو يختفي أو يتحرك أي معالجة خاصة.

راجع هذه الخطوات مرة أخرى:

ابدأ بالسماح للمستخدم بتسجيل علامة التبويب الحالية.

// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

حدِّد RestrictionTarget من خلال استدعاء RestrictionTarget.fromElement() مع إدخال عنصر من اختيارك.

// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

بعد ذلك، اطلب restrictTo() في مسار الفيديو باستخدام RestrictionTarget كمدخل. بعد حلّ الوعد الأخير، سيتم حظر جميع اللقطات اللاحقة.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

// Enjoy! Transmit remotely.

نظرة تفصيلية

رصد الميزات

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

if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
  // Deriving a restriction target is supported.
}

اشتقاق RestrictionTarget

ركِّز على العنصر المُسمى captureTarget. لاستخراج RestrictionTarget منه، اتصل RestrictionTarget.fromElement(captureTarget). سيتم التعامل مع الوعد الذي تم إرجاعه باستخدام عنصر RestrictionTarget جديد في حال نجاحه. وإلا سيتم رفضها إذا أنشأت عددًا غير معقول من عناصر RestrictionTarget.

const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

على عكس العنصر، يمكن تسلسل عنصر RestrictionTarget. ويمكن تمريرها إلى مستند آخر باستخدام Window.postMessage()، على سبيل المثال.

تقييد

عند تسجيل علامة تبويب، يعرض مقطع الفيديو الرمز restrictTo(). عند التقاط علامة التبويب الحالية، يكون من الصالح استدعاء restrictTo() باستخدام null أو أي RestrictionTarget مشتق من عنصر ضمن علامة التبويب الحالية.

طلبات restrictTo(restrictionTarget) لتحويل مسار الفيديو إلى لقطة من captureTarget، كما لو تم رسمها بنفسها، بغض النظر عن بقية عناصر DOM يتم أيضًا التقاط أي عناصر تابعة لـ captureTarget، ويتم استبعاد الأشقاء من captureTarget من الالتقاط. ونتيجةً لذلك، تظهر أيّ لقطات يتم عرضها على المقطع الصوتي كما لو تم اقتصاصها لتتلاءم مع حدود captureTarget، ويتمّ أيضًا إزالة أيّ محتوى يحجب الرؤية أو يتم حجبه.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

طلبات restrictTo(null) لإعادة المقطع الصوتي إلى حالته الأصلية

// Stop restricting.
await track.restrictTo(null);

إذا نجحت المكالمة إلى restrictTo()، يتم حلّ الوعد الذي تم إرجاعه عندما يمكن ضمان أنّ جميع لقطات الفيديو اللاحقة ستقتصر على captureTarget.

وفي حال عدم نجاح العملية، سيتم رفض الوعد. قد تؤدي إحدى الحالات التالية إلى عدم نجاح المكالمة إلى restrictTo():

  • إذا تم صياغة restrictionTarget في علامة تبويب غير علامة التبويب التي يتم تسجيلها. (يُرجى العِلم أنّه باستخدام الزر "مشاركة علامة التبويب هذه بدلاً من ذلك"، يمكن للمستخدمين تغيير علامة التبويب التي يتم التقاطها في أي وقت).
  • إذا تمّ اشتقاق restrictionTarget من عنصر لم يعُد متوفّرًا.
  • إذا كان المقطع الصوتي يتضمّن نُسخًا طبق الأصل (راجِع المشكلة 1509418).
  • إذا لم يكن المقطع الصوتي الحالي مقطع فيديو تم تسجيله ذاتيًا
  • إذا كان العنصر الذي تم اشتقاق restrictionTarget منه غير مؤهّل للتقييد

اعتبارات حول الالتقاط الذاتي

عندما يطلب تطبيق getDisplayMedia() ويختار المستخدم التقاط علامة تبويب التطبيق، نُطلق على ذلك اسم "الالتقاط الذاتي".

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

الشفافية

لا تتضمّن لقطات الفيديو التي يحصل عليها التطبيق من خلال getDisplayMedia() قناة شفافة. إذا ضبط تطبيق هدفًا للتسجيل شفافًا جزئيًا، قد يؤدي إزالة قناة الشفافية إلى بعض النتائج المحتمَلة:

  • قد تتغير الألوان. قد تبدو العناصر المستهدَفة الشفافة جزئيًا والمرسومة على خلفية فاتحة أغمق عند إزالة قناة ألفا، وقد تبدو العناصر المرسومة على خلفية داكنة أفتح.
  • ستظهر الألوان التي كانت غير مرئية أو غير محسوسة للمستخدم عند ضبط قناة الشفافية على الحد الأقصى، بعد إزالة قناة الشفافية. على سبيل المثال، قد يؤدي ذلك إلى ظهور مناطق سوداء غير متوقّعة في اللقطات التي تم التقاطها، إذا كانت الأقسام الشفافة تحتوي على رمز RGBA rgba(0, 0, 0, 0).
لقطة شاشة لنتيجة استهداف التقاط شفاف غير مستطيل
في بث الفيديو المستهدَف للتسجيل الشفاف غير المستطيل (على اليمين)، يكون الإطار المستطيل للخلفية السوداء يحتوي على دائرة زرقاء غير شفافة.

استهدافات الالتقاط غير المؤهّلة

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

من الاعتبارات المهمة للتأكّد من أهلية العنصر للتقييد أنّه يجب أن يشكّل سياق التكديس الخاص به. لضمان ذلك، يمكنك تحديد سمة CSS isolation، وضبطها على isolate.

<div id="captureTarget" style="isolation: isolate;"></iframe>

يُرجى العِلم أنّه يمكن للعنصر المستهدف التبديل بين أن يكون مؤهَّلاً وغير مؤهَّل للحظر في أي مرحلة عشوائية، على سبيل المثال إذا غيّر التطبيق خصائص CSS الخاصة به. ويعود الأمر للتطبيق في استخدام استهدافات معقولة لالتقاط البيانات وتجنُّب تغيير خصائصها بشكل غير متوقّع. إذا أصبح العنصر المستهدَف غير مؤهَّل، لن يتم ببساطة عرض لقطات جديدة في المقطع الصوتي إلى أن يصبح العنصر المستهدَف مؤهَّلاً مرة أخرى للتقييد.

تفعيل ميزة "التقاط العناصر"

تتوفّر واجهة Element Capture API في متصفّح Chrome على أجهزة الكمبيوتر المكتبي خلف علامة Element Capture ويمكن تفعيلها على chrome://flags/#element-capture.

ستتم أيضًا طرح هذه الميزة في إصدار تجريبي من الإصدار 121 من Chrome على أجهزة الكمبيوتر المكتبي، ما يتيح للمطوّرين تفعيل الميزة لزوّار مواقعهم الإلكترونية من أجل جمع البيانات من المستخدمين الفعليين. اطّلِع على البدء في استخدام الفترات التجريبية للإصدارات الأصلية للحصول على مزيد من المعلومات حول الفترات التجريبية للإصدارات الأصلية.

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

لفهم المفاضلات الأمنية، اطّلِع على قسم الاعتبارات المتعلّقة بالخصوصية والأمان في مواصفات Element Capture.

يرسم متصفّح Chrome حدًا أزرق حول حواف علامات التبويب التي تم التقاطها.

عرض توضيحي

يمكنك تجربة ميزة "التقاط العناصر" من خلال تشغيل الإصدار التجريبي على Glitch. احرص على الاطّلاع على رمز المصدر.

ملاحظات

يريد فريق Chrome ومجتمع معايير الويب معرفة تجاربك مع ميزة "التقاط العناصر".

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

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

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

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

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

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

خدمات الإقرار

صورة Paul Skorupskas على Unsplash