Элементы управления демонстрацией экрана с сохранением конфиденциальности

François Beaufort

Elad Alon

Совместное использование вкладок, окон и экранов уже возможно на веб-платформе с помощью 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" },
});

Обратите внимание, что мы не предлагаем возможность предварительного выбора определенного окна или экрана. Это сделано специально, поскольку это дало бы веб-приложению слишком большую власть над пользователем.

Параметр 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 для настольных компьютеров.

• systemAudio доступен в Chrome 105 на рабочем столе.

• monitorTypeSurfaces доступен в Chrome 119 для настольных компьютеров.

Обратная связь

Команда Chrome и сообщество веб-стандартов хотят услышать о вашем опыте использования этих элементов управления общим экраном.

Расскажите о дизайне

Есть ли что-то в этих элементах управления демонстрацией экрана, что работает не так, как вы ожидали? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности?

• Сообщите о проблеме спецификации в репозитории GitHub или добавьте свои мысли к существующей проблеме.

Проблема с реализацией?

Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?

• Сообщите об ошибке на https://new.crbug.com . Обязательно включите как можно больше деталей и простые инструкции по воспроизведению. Glitch хорошо подходит для обмена кодом.

Показать поддержку

Планируете ли вы использовать эти элементы управления общим экраном? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в функциях и показывает другим поставщикам браузеров, насколько важно их поддерживать.

Отправьте твит @ChromiumDev и сообщите нам, где и как вы его используете.

Полезные ссылки

• Спецификация
• displaySurface объяснитель
• Объяснение monitorTypeSurfaces
• Объяснение surfaceSwitching
• объяснение selfBrowserSurface
• Объяснение systemAudio
• Обзор тегов

Благодарности

Изображение героя Джона Шнобрича .

Спасибо Рэйчел Эндрю за рецензирование этой статьи.