Совместное использование вкладок, окон и экранов уже возможно на веб-платформе с помощью API захвата экрана . Короче говоря, getDisplayMedia()
позволяет пользователю выбрать экран или часть экрана (например, окно) для захвата в виде медиапотока. Этот поток затем можно записать или поделиться с другими по сети. В этой статье представлены некоторые недавние изменения в API, позволяющие лучше сохранить конфиденциальность и предотвратить случайное раскрытие личной информации.
Вот список элементов управления, которые вы можете использовать для сохранения конфиденциальности совместного использования экрана:
- Параметр
displaySurface
может указывать, что веб-приложение предпочитает предлагать определенный тип поверхности отображения (вкладки, окна или экраны). - Параметр
monitorTypeSurfaces
можно использовать, чтобы запретить пользователю совместное использование всего экрана. - Параметр
surfaceSwitching
указывает, должен ли Chrome разрешать пользователю динамически переключаться между общими вкладками. - Опцию
selfBrowserSurface
можно использовать, чтобы запретить пользователю делиться текущей вкладкой. Это позволяет избежать эффекта «зеркального зала». - Параметр
systemAudio
гарантирует, что Chrome предлагает пользователю только соответствующий аудиозапись.
Изменения в getDisplayMedia()
Следующие изменения были внесены в getDisplayMedia()
.
Параметр displaySurface
Веб-приложения со специализированными пользовательскими маршрутами, которые лучше всего работают при совместном использовании окна или экрана, все равно могут попросить Chrome предлагать окна или экраны более заметными в средстве выбора мультимедиа. Порядок предложений остается неизменным, но соответствующая панель предварительно выбрана.
Значения параметра displaySurface
:
-
"browser"
для вкладок. -
"window"
для окон. -
"monitor"
для экранов.
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
![Снимок экрана средства выбора медиафайлов с предварительно выбранным](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-64dafc4173b.png?authuser=5&hl=ru)
Обратите внимание, что мы не предлагаем возможность предварительного выбора определенного окна или экрана. Это сделано специально, поскольку это дало бы веб-приложению слишком большую власть над пользователем.
Параметр 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",
});
![Скриншот средства выбора медиафайлов без](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-85b3c9b30c4fa.png?authuser=5&hl=ru)
Обратите внимание, что явный monitorTypeSurfaces: "exclude"
является взаимоисключающим с displaySurface: "monitor"
.
Опция surfaceSwitching
Одной из наиболее часто упоминаемых причин совместного использования всего экрана является желание плавно переключаться между общим доступом к различным поверхностям во время сеанса. Чтобы решить эту проблему, Chrome теперь предоставляет кнопку, которая позволяет пользователю динамически переключаться между общим доступом к различным вкладкам. Кнопка «Поделиться этой вкладкой» ранее была доступна для расширений Chrome и теперь может использоваться любым веб-приложением, которое вызывает getDisplayMedia()
.
![Снимок экрана: кнопка, используемая для динамического переключения между общим доступом к различным вкладкам.](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-button-us-5e92f90d179ed.png?authuser=5&hl=ru)
Если для 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 🦶🔫.
});
![Снимок экрана средства выбора медиафайлов, исключая текущую вкладку](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-248b79ead1a5f.png?authuser=5&hl=ru)
Обратите внимание, что явное selfBrowserSurface: "exclude"
является взаимоисключающим с preferCurrentTab: true
.
Опция systemAudio
getDisplayMedia()
позволяет захватывать аудио вместе с видео. Но не все аудио одинаковы. Рассмотрите возможность использования веб-приложений для видеоконференций: – Если пользователь открывает доступ к другой вкладке, имеет смысл также записать звук. - С другой стороны, системный звук включает в себя собственный звук удаленных участников и не должен передаваться им обратно.
В будущем, возможно, появится возможность исключить некоторые источники звука из захвата. Но на данный момент веб-приложения для видеоконференций часто предпочитают просто избегать захвата системного звука. Раньше это можно было сделать, проверив, какую поверхность дисплея выбрал пользователь, и остановив звуковую дорожку, если он решил поделиться экраном. Однако при этом возникает небольшая проблема: некоторые пользователи сбиваются с толку, когда они явно устанавливают флажок для совместного использования системного звука, а затем удаленные участники сообщают им, что звук не поступает.
![Снимки экрана средств выбора мультимедиа с возможностью совместного использования аудио вкладок](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshots-media-picker-5a6ebb73dd84c.jpg?authuser=5&hl=ru)
Установив для 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
- Икс
- Икс
-
systemAudio
доступен в Chrome 105 на рабочем столе.
Поддержка браузера
- 119
- 119
- Икс
- Икс
-
monitorTypeSurfaces
доступен в Chrome 119 для настольных компьютеров.
Обратная связь
Команда Chrome и сообщество веб-стандартистов хотят услышать о вашем опыте использования этих элементов управления общим экраном.
Расскажите о дизайне
Есть ли что-то в этих элементах управления демонстрацией экрана, что работает не так, как вы ожидали? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности?
- Сообщите о проблеме спецификации в репозитории GitHub или добавьте свои мысли к существующей проблеме.
Проблема с реализацией?
Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?
- Сообщите об ошибке на https://new.crbug.com . Обязательно включите как можно больше деталей и простые инструкции по воспроизведению. Glitch хорошо подходит для обмена кодом.
Показать поддержку
Планируете ли вы использовать эти элементы управления общим экраном? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в функциях и показывает другим поставщикам браузеров, насколько важно их поддерживать.
Отправьте твит @ChromiumDev и сообщите нам, где и как вы его используете.
Полезные ссылки
- Спецификация
-
displaySurface
объяснитель - Объяснение
monitorTypeSurfaces
- Объяснение
surfaceSwitching
- объяснение
selfBrowserSurface
- Объяснение
systemAudio
- Обзор тегов
Благодарности
Изображение героя Джона Шнобрича .
Спасибо Рэйчел Эндрю за рецензирование этой статьи.