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

Франсуа Бофор
François Beaufort

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

Раньше веб-приложения могли обрезать видеодорожки «вручную». То есть веб-приложения могли напрямую манипулировать каждым кадром. Это не было ни надежным, ни производительным. Region Capture устраняет эти недостатки. Теперь веб-приложение может поручить браузеру выполнить работу от его имени.

О захвате региона

Итак, вы создали веб-сайт с Dynamic Content™. Это лучшее веб-приложение из всех, и люди просто не могут перестать им пользоваться, часто совместно. Возможным следующим шагом является внедрение возможностей виртуальной конференции. Вы решаете пойти этим путем. Вы объединяетесь с существующим поставщиком услуг видеоконференций, внедряя их веб-приложение как кросс-источник iframe. Веб-приложение для видеоконференций захватывает текущую вкладку как видеодорожку и передает ее удаленным участникам.

Скриншот окна браузера с веб-приложением, на котором выделена основная область контента и кросс-источниковый iframe.
Основная область контента выделена синим цветом, а кросс-источниковый iframe — красным.

Не так быстро... Вы ведь не хотите передавать людям их собственные видео, не так ли? Лучше обрезать эту часть. Но как? Встроенный iframe не знает, какой контент вы выставляете и где, поэтому он не может обрезать без некоторой помощи. Теоретически вы могли бы передать предполагаемые координаты. Но что произойдет, если пользователь изменит размер окна? Прокрутит область просмотра? Увеличит или уменьшит масштаб? Взаимодействует со страницей таким образом, что это приведет к изменению макета? Даже если вы отправите новые координаты в захватывающий iframe, проблемы со временем все равно могут привести к неправильной обрезке кадров.

Давайте тогда используем Region Capture. На вашей странице есть Element , возможно, <div> , который содержит основной контент. Назовем его mainContentArea . Вы хотите, чтобы веб-приложение для видеоконференций захватывало и предоставляло удаленный доступ к области, определенной ограничивающим прямоугольником этого элемента. Поэтому вы извлекаете CropTarget из mainContentArea . Вы передаете этот CropTarget в веб-приложение для видеоконференций. После обрезки видеодорожки с помощью этого CropTarget кадры на этой дорожке теперь состоят только из пикселей, которые попадают в ограничивающий прямоугольник mainContentArea . Если mainContentArea меняет размер, форму или местоположение, видеодорожка следует за ним, не требуя никаких дополнительных входных данных от любого веб-приложения.

Давайте еще раз рассмотрим эти шаги:

Вы определяете CropTarget в своем веб-приложении, вызывая CropTarget.fromElement() с выбранным вами элементом в качестве входных данных.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Вы передаете CropTarget в веб-приложение для видеоконференций.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

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

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

И вуаля! Готово.

Глубокое погружение

Обнаружение особенностей

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

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Выведение CropTarget

Давайте сосредоточимся на элементе с именем mainContentArea . Чтобы вывести из него CropTarget , вызовите CropTarget.fromElement(mainContentArea) . Возвращенное Promise будет разрешено с новым объектом CropTarget в случае успеха. В противном случае оно будет отклонено, если вы создали необоснованно большое количество объектов CropTarget .

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

В отличие от Element , объект CropTarget является сериализуемым . Его можно передать в другой документ, например, с помощью Window.postMessage() .

Обрезка

При захвате вкладки видеодорожка создается как BrowserCaptureMediaStreamTrack , который является подклассом MediaStreamTrack . Этот подкласс предоставляет cropTo() . Вызовите track.cropTo(cropTarget) для начала обрезки по контурам mainContentArea (элемент, из которого был получен cropTarget).

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

В случае неудачи Promise будет отклонен. Это произойдет, если:

  • CropTarget был создан на другой вкладке. (Пока что — следите за обновлениями.)
  • CropTarget был получен из элемента, который больше не существует.
  • У трека есть клоны . (См. выпуск 1509418. )
  • Текущая дорожка не является видеодорожкой самозахвата; см. ниже.

Метод cropTo() доступен на любой видеодорожке с захватом вкладки, а не только для самозахвата. Поэтому рекомендуется проверить, выбрал ли пользователь текущую вкладку, прежде чем пытаться обрезать дорожку. Это можно сделать с помощью Capture Handle . Также можно попросить браузер подтолкнуть пользователя к самозахвату с помощью preferCurrentTab .

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Чтобы вернуться в необрезанное состояние, вызовите cropTo() со значением null .

// Stop cropping.
await track.cropTo(null);

Окклюзионный и окклюдированный контент

Для Region Capture важны только положение и размер цели, а не z-index . Пиксели, перекрывающие цель, будут захвачены. Перекрытые части цели не будут захвачены.

Это следствие того, что Region Capture по сути является обрезкой. Одной из альтернатив, которая станет собственным будущим API, является Element-level Capture; то есть захват только пикселей, связанных с целью, независимо от окклюзии. Такой API имеет другой набор требований безопасности и конфиденциальности, чем простая обрезка.

Изображение различных результатов для API захвата региона и захвата на уровне элемента.
Поведение Region Capture при перекрытии контента.

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

Region Capture позволяет веб-приложению, которое уже наблюдает за всеми пикселями на вкладке, добровольно удалять некоторые из этих пикселей. Это запатентованно безопасно, поскольку никакая новая информация не может быть получена.

Region Capture можно использовать для ограничения информации, отправляемой удаленным участникам. Например, вы хотите поделиться некоторыми слайдами, но не заметками докладчика.

Скриншот окна браузера, содержащего слайды и заметки докладчика.
Веб-приложение, содержащее слайды и заметки докладчика.
Удалённый обмен заметками крайне нежелателен. Захват метки региона.

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

Chrome рисует синюю рамку вокруг краев захваченных вкладок. При кадрировании Chrome обычно рисует синюю рамку вокруг обрезанной цели.

Демо

Вы можете поиграть с Region Capture, запустив демо-версию .

Поддержка браузера

Browser Support

  • Хром: 104.
  • Край: 104.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

Функция Region Capture доступна только на настольных компьютерах, начиная с Chrome 104.

Что дальше?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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