عناصر التحكّم في مشاركة الشاشة مع الحفاظ على الخصوصية

François Beaufort

Elad Alon

تتيح واجهة برمجة التطبيقات Screen Capture API مشاركة علامات التبويب والنوافذ والشاشات على منصة الويب. باختصار، تتيح واجهة برمجة التطبيقات getDisplayMedia() للمستخدم اختيار شاشة أو جزء من شاشة (مثل نافذة) لتسجيلها كتدفق وسائط. ويمكن بعد ذلك تسجيل هذا البث أو مشاركته مع الآخرين عبر الشبكة. أجرينا مؤخرًا تغييرات على واجهة برمجة التطبيقات للحفاظ على الخصوصية بشكل أفضل ومنع مشاركة المعلومات الشخصية عن طريق الخطأ.

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

• يمكن أن يشير الخيار displaySurface إلى أنّ تطبيق الويب يفضّل تقديم نوع معيّن من مساحة العرض (علامات التبويب أو النوافذ أو الشاشات).
• يمكن استخدام الخيار monitorTypeSurfaces لمنع المستخدم من مشاركة شاشة كاملة.
• يشير الخيار surfaceSwitching إلى ما إذا كان على Chrome السماح للمستخدم بالتبديل ديناميكيًا بين علامات التبويب المشترَكة.
• يمكن استخدام الخيار selfBrowserSurface لمنع المستخدم من مشاركة علامة التبويب الحالية. يؤدي ذلك إلى تجنُّب تأثير "قصر المرايا".
• يضمن الخيار systemAudio ألا يعرض Chrome للمستخدم سوى خيارات تسجيل الصوت ذات الصلة.

التغييرات على getDisplayMedia()

تم إجراء التغييرات التالية على getDisplayMedia().

الخيار displaySurface

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

قيم الخيار displaySurface هي:

• "browser" لعلامات التبويب
• ‫"window" لنظام التشغيل Windows
• "monitor" للشاشات.

const stream = await navigator.mediaDevices.getDisplayMedia({   // Pre-select the "Window" pane in the media picker.   video: { displaySurface: "window" }, }); 

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

الخيار monitorTypeSurfaces

لحماية الشركات من تسرُّب المعلومات الخاصة بسبب خطأ من الموظف، يمكن لتطبيقات الويب الخاصة باجتماعات الفيديو الآن ضبط monitorTypeSurfaces على "exclude". سيستبعد Chrome بعد ذلك الشاشات في أداة اختيار الوسائط. لتضمينها، اضبطها على "include". في الوقت الحالي، القيمة التلقائية لـ monitorTypeSurfaces هي "include"، ولكن يُنصح تطبيقات الويب بضبطها بشكل صريح، لأنّ القيمة التلقائية قد تتغيّر في المستقبل.

const stream = await navigator.mediaDevices.getDisplayMedia({   video: true,   // Remove the "Entire Screen" pane in the media picker.   monitorTypeSurfaces: "exclude", }); 

يُرجى العِلم أنّ monitorTypeSurfaces: "exclude" الصريح يستبعد displaySurface: "monitor".

الخيار surfaceSwitching

من أبرز الأسباب التي يتم ذكرها لمشاركة الشاشة بأكملها هو الرغبة في التبديل بسلاسة بين مشاركة مساحات عرض مختلفة أثناء الجلسة. لحلّ هذه المشكلة، يعرض Chrome الآن زرًا يتيح للمستخدم التبديل ديناميكيًا بين مشاركة علامات تبويب مختلفة. كان زر "مشاركة علامة التبويب هذه بدلاً من ذلك" متاحًا في السابق لإضافات Chrome، ويمكن الآن لأي تطبيق ويب يستدعي getDisplayMedia() استخدامه.

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

const stream = await navigator.mediaDevices.getDisplayMedia({   video: true,   // Ask Chrome to expose browser-level UX elements that allow   // the user to switch the underlying track at any time,   // initiated by the user and without prior action by the web app.   surfaceSwitching: "include" }); 

الخيار selfBrowserSurface

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

لحماية المستخدمين، يمكن لتطبيقات الويب الخاصة بمؤتمرات الفيديو الآن ضبط selfBrowserSurface على "exclude". بعد ذلك، سيستبعد Chrome علامة التبويب الحالية من قائمة علامات التبويب المقترَحة للمستخدم. لتضمينها، اضبطها على "include". في الوقت الحالي، القيمة التلقائية لـ selfBrowserSurface هي "exclude"، ولكن يُنصح تطبيقات الويب بضبطها بشكل صريح، لأنّ القيمة التلقائية قد تتغيّر في المستقبل.

const stream = await navigator.mediaDevices.getDisplayMedia({   video: true,   selfBrowserSurface: "exclude"  // Avoid 🦶🔫. }); 

يُرجى العِلم أنّ selfBrowserSurface: "exclude" الصريح يستبعد preferCurrentTab: true.

الخيار systemAudio

يتيح لك getDisplayMedia() تسجيل الصوت مع الفيديو. لكنّ جودة الصوت تختلف من جهاز لآخر. تطبيقات الويب لعقد مؤتمرات الفيديو: - إذا شارك المستخدم علامة تبويب أخرى، من المنطقي تسجيل الصوت أيضًا. - من ناحية أخرى، يتضمّن صوت النظام صوت المشاركين عن بُعد، ويجب عدم إرساله إليهم مرة أخرى.

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

من خلال ضبط systemAudio على "exclude"، يمكن لتطبيق الويب تجنُّب إرباك المستخدمين من خلال الإشارات المختلطة. سيقترح Chrome تسجيل الصوت مع علامات التبويب والنوافذ، ولكن ليس مع الشاشات.

const stream = await navigator.mediaDevices.getDisplayMedia({   video: true,   audio: true,           // Ask to capture audio; caveat follows.   systemAudio: "exclude" // Do not offer to capture *system* audio. }); 

في الوقت الحالي، القيمة التلقائية لـ systemAudio هي "include"، ولكن يُنصح تطبيقات الويب بضبطها بشكل صريح، لأنّ القيمة التلقائية قد تتغيّر في المستقبل.

عرض توضيحي

يمكنك تجربة عناصر التحكّم في مشاركة الشاشة هذه من خلال تشغيل العرض التوضيحي.

دعم المتصفح

• تتوفّر displaySurface وsurfaceSwitching وselfBrowserSurface في الإصدار 107 من Chrome على أجهزة الكمبيوتر.

• تتوفّر ميزة systemAudio في الإصدار 105 من Chrome على الكمبيوتر المكتبي.

• تتوفّر ميزة monitorTypeSurfaces في الإصدار 119 من متصفّح Chrome على الكمبيوتر المكتبي.

الملاحظات

يريد فريق Chrome ومنتدى معايير الويب معرفة تجاربك مع عناصر التحكّم في مشاركة الشاشة.

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

• المواصفات
• displaySurface فيديو توضيحي
• monitorTypeSurfaces فيديو توضيحي
• surfaceSwitching فيديو توضيحي
• selfBrowserSurface فيديو توضيحي
• systemAudio فيديو توضيحي
• مراجعة TAG

الإقرارات

نشكر راشيل أندرو على مراجعتها