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

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

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

لمحة عن تسجيل المنطقة

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

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

المتصفحات المتوافقة

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

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

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

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

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

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

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

شكر وتقدير

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