Улучшенный обмен вкладками с помощью Capture Handle

François Beaufort

Elad Alon

Веб-платформа теперь поставляется с функцией Capture Handle — механизмом, облегчающим взаимодействие между веб-приложениями, осуществляющими захват данных, и самими захватываемыми веб-приложениями. Capture Handle позволяет веб-приложению, осуществляющему захват данных, эргономично и уверенно идентифицировать захватываемое веб-приложение (если захватываемое веб-приложение дало на это согласие).

Несколько примеров иллюстрируют преимущества.

Example 1: If a video conferencing web app is capturing a presentation web app, the video conferencing web app can expose controls to the user for navigating between slides. Because the controls are embedded directly in the video conferencing web app, the user doesn't have to repeatedly switch between the video conferencing tab and the presented tab. With this burden lifted, the user is now free to concentrate more fully on the delivery of their presentation.

Example 2: The "hall of mirrors" effect occurs when a captured surface is rendered back to the location being captured. Notably, if the user chooses to capture the tab in which a video conferencing call is taking place, and the video conferencing web app renders a local preview, this dreaded effect will be observed. Using Capture Handle, self-capture can be detected and mitigated; for example, by the web app suppressing the local preview.

О функции захвата

Рукоятка захвата состоит из двух взаимодополняющих частей:

• Захваченные веб-приложения могут разрешить передачу определенной информации некоторым источникам с помощью navigator.mediaDevices.setCaptureHandleConfig() .
• Затем веб-приложения, осуществляющие захват потоков, могут считывать эту информацию с помощью getCaptureHandle() для объектов MediaStreamTrack .

Захваченная сторона

Веб-приложения могут предоставлять информацию потенциальным веб-приложениям, осуществляющим захват данных. Это делается путем вызова navigator.mediaDevices.setCaptureHandleConfig() с необязательным объектом, состоящим из следующих членов:

• handle : может быть любой строкой длиной до 1024 символов.
• exposeOrigin : Если true , то источник захваченного веб-приложения может быть раскрыт захватывающим веб-приложениям.
• permittedOrigins : Допустимые значения: (i) пустой массив, (ii) массив, содержащий единственный элемент "*" , или (iii) массив источников. Если permittedOrigins содержит единственный элемент "*" , то CaptureHandle доступен для наблюдения всем веб-приложениям, осуществляющим захват. В противном случае он доступен только веб-приложениям, осуществляющим захват, источник которых находится в permittedOrigins .

В следующем примере показано, как предоставить любому веб-приложению, осуществляющему захват данных, доступ к случайно сгенерированному UUID в качестве дескриптора и источника.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Обратите внимание, что захватываемое веб-приложение не знает, захватывается ли оно. За исключением случаев, когда захватывающее веб-приложение использует информацию CaptureHandle для установления связи с захватываемым веб-приложением (например, с помощью обмена сообщениями через рабочий процесс или общую облачную инфраструктуру).

Сторона захвата

The capturing web app holds a video MediaStreamTrack , and can read the capture handle information by calling getCaptureHandle() on that MediaStreamTrack . This call returns null if no capture handle is available, or if the capturing web app is not permitted to read it. If a capture handle is available, and the capturing web app is added to permittedOrigins , this call returns an object with the following members:

• handle : строковое значение, установленное захваченным веб-приложением с помощью navigator.mediaDevices.setCaptureHandleConfig() .
• origin : Источник захваченного веб-приложения, если exposeOrigin установлен в true . В противном случае он не определен.

В следующем примере показано, как считать информацию об идентификаторе захвата из видеодорожки.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Отслеживайте изменения CaptureHandle , прослушивая события "capturehandlechange" на объекте MediaStreamTrack . Изменения происходят, когда:

• Захваченное веб-приложение вызывает navigator.mediaDevices.setCaptureHandleConfig() .
• В захваченном веб-приложении осуществляется навигация между документами .

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Безопасность и конфиденциальность

Теоретически, сегодня возможно взаимодействие между веб-приложениями, осуществляющими захват и захват, например, путем встраивания «магических пикселей» в захватываемое веб-приложение или QR-кодов в видеопоток. Capture Handle предлагает более простой, надежный и безопасный механизм. Он также позволяет захватываемому веб-приложению выбирать аудиторию — либо отдельные источники, либо весь интернет.

Обратите внимание, что navigator.mediaDevices.setCaptureHandleConfig() доступен только для основных фреймов верхнего уровня в защищенных контекстах просмотра (только HTTPS).

Образец

Вы можете поэкспериментировать с функцией захвата объекта, запустив пример .

Демонстрации

Некоторые демоверсии доступны по адресу:

• Пульт дистанционного управления
• Обнаружение самозахвата

Обнаружение признаков

Чтобы проверить, поддерживается ли getCaptureHandle() , используйте:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Чтобы проверить, поддерживается ли navigator.mediaDevices.setCaptureHandleConfig() , используйте:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Что дальше?

Вот краткий обзор того, что можно ожидать в ближайшем будущем и что улучшит демонстрацию экрана в интернете:

• Функция захвата области позволит обрезать видеодорожку, полученную в результате захвата экрана текущей вкладки.
• Функция «Условная фокусировка» позволит веб-приложению, осуществляющему захват изображения, дать браузеру указание либо переключить фокус на захваченную поверхность экрана, либо избежать такого изменения фокуса.

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

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

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

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

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

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

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

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

Проявите поддержку

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

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

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

• Спецификация
• Пояснительная записка
• Обзор TAG
• Ошибка Chromium
• Запись на ChromeStatus.com

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

Благодарим Джо Медли за рецензирование этой статьи.