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

François Beaufort

Elad Alon

تسمح منصة الويب حاليًا لتطبيق الويب بالتقاط مسار فيديو لعلامة التبويب الحالية. تتوفر هذه الميزة الآن مع ميزة Region Capture، وهي آلية لاقتصاص مقاطع الفيديو هذه. يحدِّد تطبيق الويب جزءًا من علامة التبويب الحالية كمنطقة اهتمامها، ويقتصّ المتصفّح جميع وحدات البكسل خارج هذه المنطقة.

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

لمحة عن ميزة Region Capture

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

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

لنستخدم ميزة تسجيل المناطق في هذه الحالة. هناك Element على صفحتك، وقد يكون <div> يحتوي على المحتوى الرئيسي. لِنسميها mainContentArea. تريد أن يلتقط تطبيق الويب لمؤتمرات الفيديو المنطقة التي يحددها مربع حدود هذا العنصر ويشاركها عن بُعد. إذًا، يمكنك اشتقاق CropTarget من mainContentArea. لقد مررت CropTarget هذا إلى تطبيق الويب لاجتماعات الفيديو. بعد اقتصاص مقطع الفيديو باستخدام CropTarget هذا، تتألف اللقطات في هذا المقطع الصوتي الآن فقط من وحدات البكسل التي تقع ضمن مربّع حدود mainContentArea. إذا تم تغيير حجم الفيديو أو شكله أو موقعه الجغرافي من قِبل "mainContentArea"، ستتم متابعة مسار الفيديو بدون الحاجة إلى أي إدخال إضافي من أيّ من تطبيقَي الويب.

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

يمكنك تحديد CropTarget في تطبيق الويب من خلال استدعاء CropTarget.fromElement() بالعنصر الذي تختاره كإدخال.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

يمكنك تمرير "CropTarget" إلى تطبيق الويب لعقد اجتماعات الفيديو.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

يطلب تطبيق الويب لعقد اجتماعات الفيديو من المتصفّح اقتصاص المقطع الصوتي وفقًا للمنطقة التي حدّدتها "CropTarget"، وذلك من خلال استدعاء الرمز cropTo() في مسار الالتقاط الذاتي للفيديو مع تحديد هدف الاقتصاص من تطبيق الويب الرئيسي.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

تهانينا. لقد انتهيتَ.

نظرة تفصيلية

رصد الميزات

لمعرفة ما إذا كانت "CropTarget.fromElement()" متاحة، استخدِم:

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

الحصول على هدف اقتصاص

دعنا نركز على العنصر المسمى mainContentArea. لاستخراج CropTarget منها، يمكنك الاتصال بالرقم CropTarget.fromElement(mainContentArea). سيتم التعامل مع الوعد الذي تم إرجاعه باستخدام عنصر CropTarget جديد في حال نجاحه. في حال عدم استيفاء هذا الشرط، سيتم رفضه إذا استخدَمت عددًا غير معقول من العناصر في CropTarget.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

على عكس Element، يمكن إجراء عملية تسلسلية للكائن CropTarget. على سبيل المثال، يمكن تمريرها إلى مستند آخر باستخدام Window.postMessage().

الاقتصاص

عند التسجيل باستخدام علامات تبويب، يتم إنشاء مثيل لمقطع الفيديو كـ BrowserCaptureMediaStreamTrack، وهي فئة فرعية من MediaStreamTrack. تعرض هذه الفئة الفرعية cropTo(). يمكنك طلب track.cropTo(cropTarget) لبدء الاقتصاص حسب مخطط mainContentArea (العنصر الذي تم اشتقاق استهدافه من قِسم).

في حال نجحت عملية الإلغاء، سيتم التعامل مع الوعد بضمان أن جميع إطارات الفيديو اللاحقة ستتألف من وحدات البكسل التي تقع ضمن مربّع إحاطة mainContentArea.

وفي حال عدم نجاح العملية، سيتم رفض الوعد. يحدث هذا في الحالات التالية:

• تم إنشاء CropTarget في علامة تبويب أخرى. (في الوقت الحالي - ابق متأهبًا.)
• تم اشتقاق CropTarget من عنصر لم يعُد متوفّرًا.
• يحتوي المقطع الصوتي على نسخ. (راجِع المشكلة 1509418.)
• المقطع الصوتي الحالي ليس مقطع فيديو بالتقاط ذاتي؛ انظر أدناه.

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

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

للعودة إلى الحالة التي لم يتم اقتصاصها، يمكنك الاتصال بـ cropTo() مع null.

// Stop cropping.
await track.cropTo(null);

إغراق المحتوى وإخفاؤه

بالنسبة إلى ميزة "التقاط المنطقة"، يُرجى ملاحظة موضع المسألة وحجمها فقط، وليس z-index. سيتم التقاط وحدات البكسل التي لا تظهر بالهدف. ولن يتم تسجيل الأجزاء المحصورة من الهدف.

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

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

تسمح ميزة Region Capture لتطبيق الويب الذي يسجّل كل وحدات البكسل في علامة التبويب طوعًا بإزالة بعض وحدات البكسل هذه. إنه آمن تمامًا، لأنه لا يمكن الحصول على معلومات جديدة.

يمكن استخدام ميزة "تسجيل المناطق" لتحديد المعلومات التي يتم إرسالها إلى المشاركين عن بُعد. على سبيل المثال، ربما تريد مشاركة بعض الشرائح، ولكن ليس ملاحظات المحاضر.

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

يرسم Chrome حدًا أزرق حول حواف علامات التبويب الملتقطة. عند الاقتصاص، يرسم Chrome بشكل عام الحد الأزرق حول الهدف الذي تم اقتصاصه.

عرض توضيحي

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

دعم المتصفح

تتوفّر ميزة "تسجيل المناطق" من Chrome 104 على أجهزة الكمبيوتر المكتبي فقط.

الخطوات التالية

إليك لمحة سريعة عمّا يمكن توقّعه في المستقبل القريب والذي سيعمل على تحسين مشاركة الشاشة على الويب:

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

ملاحظات

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

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

شكر وتقدير

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