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

François Beaufort
François Beaufort
GitHub
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().

لقطة شاشة للزرّ المستخدَم للتبديل ديناميكيًا بين مشاركة علامات تبويب مختلفة
زر "مشاركة علامة التبويب هذه بدلاً من ذلك" في Chrome

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

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

لقطات شاشة لأدوات اختيار الوسائط التي تتيح مشاركة صوت علامة التبويب
تتوفّر ميزة مشاركة الصوت في علامة التبويب في لوحة "علامة تبويب Chrome"، ولكن لا تتوفّر في لوحة "الشاشة بأكملها".

من خلال ضبط 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"، ولكن ننصح تطبيقات الويب بضبطها بشكل صريح، لأنّ القيمة التلقائية قد تتغيّر في المستقبل.

عرض توضيحي

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

دعم المتصفح

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

دعم المتصفح

  • Chrome: 105
  • ‫Edge: 105
  • Firefox: غير متوافق
  • Safari: غير متوافق

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

دعم المتصفح

  • Chrome: 119
  • ‫Edge: 119
  • Firefox: غير متوافق
  • Safari: غير متوافق

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

ملاحظات

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

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

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

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

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

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

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

إظهار الدعم

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

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

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

نشكر راشيل أندرو على المراجعة.