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

François Beaufort

Elad Alon

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

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

لمحة عن ميزة "التقاط المنطقة"

لنفترض أنّك أنشأت موقعًا إلكترونيًا باستخدام 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.

Et voilà! لقد انتهيت.

نظرة تفصيلية

رصد الميزات

للتحقّق مما إذا كان الرمز CropTarget.fromElement() متاحًا، استخدِم ما يلي:

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

استنتاج CropTarget

لنركّز على العنصر المسمّى mainContentArea. لاستخراج CropTarget منه، استدعِ الدالة CropTarget.fromElement(mainContentArea). سيتم حلّ Promise الذي تم إرجاعه باستخدام عنصر CropTarget جديد في حال نجاح العملية. سيتم رفضها في حال سكّ عدد غير معقول من عناصر CropTarget.

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

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

الاقتصاص

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

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

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

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

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

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

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

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

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

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

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

عرض توضيحي

يمكنك تجربة ميزة "التقاط المنطقة" من خلال تشغيل العرض التوضيحي.

دعم المتصفح

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

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

في ما يلي نظرة سريعة على الميزات القادمة التي ستساهم في تحسين تجربة مشاركة الشاشة على الويب:

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

الملاحظات

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

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

الإقرارات

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