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

François Beaufort

Elad Alon

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

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

Пример 1. Если веб-приложение для видеоконференций захватывает веб-приложение для презентации, веб-приложение для видеоконференций может предоставлять пользователю элементы управления для навигации между слайдами. Поскольку элементы управления встроены непосредственно в веб-приложение для видеоконференций, пользователю не нужно постоянно переключаться между вкладкой видеоконференции и представленной вкладкой. Когда это бремя снято, пользователь теперь может более полно сосредоточиться на доставке своей презентации.

Пример 2. Эффект «зеркального зала» возникает, когда захваченная поверхность рендерится обратно в место захвата. Примечательно, что если пользователь решит захватить вкладку, на которой происходит вызов по видеоконференции, а веб-приложение для видеоконференций отображает локальный предварительный просмотр, будет наблюдаться этот ужасный эффект. Используя Capture Handle, можно обнаружить и смягчить самозахват; например, веб-приложение подавляет локальный предварительный просмотр.

Об дескрипторе захвата

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

• Захваченные веб-приложения могут разрешить предоставлять определенную информацию некоторым источникам с помощью 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 для установления связи с захваченным веб-приложением (например, с использованием обмена сообщениями через работника или общую облачную инфраструктуру).

Захватывающая сторона

Веб-приложение захвата содержит видео MediaStreamTrack и может считывать информацию об дескрипторе захвата, вызывая getCaptureHandle() для этого MediaStreamTrack . Этот вызов возвращает null , если дескриптор захвата недоступен или если захватывающему веб-приложению не разрешено его читать. Если дескриптор захвата доступен и записывающее веб-приложение добавлено в permittedOrigins , этот вызов возвращает объект со следующими членами:

• 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).

Образец

Вы можете поиграть с Capture Handle, запустив образец на Glitch. Обязательно ознакомьтесь с исходным кодом .

Демо

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

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

Обнаружение функций

Чтобы проверить, поддерживается ли 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 . Обязательно включите как можно больше деталей и простые инструкции по воспроизведению. Glitch отлично подходит для быстрого и простого обмена репродукциями.

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

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

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

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

• Спецификация
• Объяснитель
• Обзор тегов
• Ошибка хрома
• Запись ChromeStatus.com

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

Спасибо Джо Медли за рецензирование этой статьи.