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