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

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). سيتم حلّ الوعد الذي تم إرجاعه باستخدام عنصر 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 منه).

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

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

• تم إنشاء 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. سيتمّ تسجيل وحدات البكسل التي تحجب الهدف. ولن يتم التقاط الأجزاء المُحجوبة من الهدف.

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

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

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

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

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

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

عرض توضيحي

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

دعم المتصفح

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

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

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

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

ملاحظات

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

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

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

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