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

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

عرض توضيحي

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

دعم المتصفح

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

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

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

ملاحظات

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

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

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

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

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

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

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

إظهار الدعم

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

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

روابط مفيدة

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

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

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