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

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.
}

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

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

ملاحظات

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

إطلاعنا على التصميم

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

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

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