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

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

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

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

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

ومع ذلك، ماذا يحدث إذا تفاعل مقدم العرض مع تطبيق مؤتمرات الفيديو مع بعض المحتوى، مثل القائمة المنسدلة، في الرسم فوق المحتوى المخصص للالتقاط؟

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

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

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

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

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

السمة 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). سيتم حل Promise الذي تم عرضه باستخدام كائن RestrictionTarget جديد في حال نجاحه. في حال عدم تنفيذ هذا الإجراء، سيتم رفضه في حال سكّ عدد غير معقول من عناصر RestrictionTarget.

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

بخلاف Element، يكون الكائن 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() في أي مقطع فيديو يتم فيه التقاط علامات تبويب، وليس للالتقاط الذاتي فقط. ولكن في الوقت الحالي، ميزة "التقاط العناصر" مفعّلة فقط للالتقاط الذاتي. ولذلك يُنصح بالتحقق مما إذا كان المستخدم قد اختار علامة التبويب الحالية قبل محاولة تقييد المسار. ويمكن إنجاز ذلك باستخدام مقبض الالتقاط. ومن الممكن أيضًا أن تطلب من المتصفح دفع المستخدم نحو التقاط صورة ذاتية باستخدام preferCurrentTab.

الشفافية

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

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

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

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

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

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

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

تفعيل التقاط العناصر

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

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

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

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

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

تجريبي

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

إضافة ملاحظات

يرغب فريق Chrome ومنتدى معايير الويب في التعرّف على تجاربك في استخدام Element Capture.

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

هل هناك مشكلة في ميزة "التقاط المنطقة" ولكنّها لا تعمل على النحو المتوقَّع؟ أو هل هناك طرق أو خصائص مفقودة تحتاج إليها لتنفيذ فكرتك؟ هل لديك سؤال أو تعليق على نموذج الأمان؟

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

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

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

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

روابط مفيدة

• المواصفات
• الشرح
• الرغبة في إجراء التجربة
• إدخال ChromeStatus.com

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

تصوير بول سكوروبسكاس على Unsplash