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

فرانسوا بوفورت
فرانسوا بوفورت
GitHub
إيلاد ألون
"إيلاد ألون"
GitHub

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

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

دعم المتصفح

  • 107
  • 107
  • x
  • 11.1

المصدر

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

دعم المتصفح

  • 105
  • 105
  • x
  • x

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

دعم المتصفح

  • 119
  • 119
  • x
  • x

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

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

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

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

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

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

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

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

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

إظهار الدعم

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

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

شكر وتقدير

صورة رئيسية من تصوير جون شنوبريتش

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