Захват медиа и ограничения

Раздел WebRTC, посвященный медиа, охватывает доступ к оборудованию, способному захватывать видео и аудио, такому как камеры и микрофоны, а также принципы работы медиапотоков. Он также охватывает отображение медиаданных, то есть то, как приложение может выполнять захват экрана.

Медиа-устройства

Доступ ко всем камерам и микрофонам, поддерживаемым браузером, и управление ими осуществляется через объект navigator.mediaDevices . Приложения могут получать текущий список подключенных устройств и отслеживать изменения, поскольку многие камеры и микрофоны подключаются по USB и могут быть подключены и отключены в течение жизненного цикла приложения. Поскольку состояние медиаустройства может измениться в любой момент, рекомендуется, чтобы приложения регистрировали изменения устройств для корректной обработки изменений.

Ограничения

При доступе к медиаустройствам рекомендуется предоставлять как можно более подробные ограничения. Хотя открыть камеру и микрофон по умолчанию можно с помощью простого ограничения, это может привести к получению медиапотока, далекого от оптимального для приложения.

Конкретные ограничения определяются в объекте MediaTrackConstraint : одно для аудио и одно для видео. Атрибуты этого объекта имеют тип ConstraintLong , ConstraintBoolean , ConstraintDouble или ConstraintDOMString . Это может быть конкретное значение (например, число, логическое значение или строка), диапазон ( LongRange или DoubleRange с минимальным и максимальным значениями) или объект с ideal или exact определением. Для заданного значения браузер попытается выбрать максимально близкое значение. Для диапазона будет использовано лучшее значение из этого диапазона. Если указано exact , будут возвращены только медиапотоки, точно соответствующие этому ограничению.

Около

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

Диапазон

// Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}

Точный

// Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}

Чтобы определить фактическую конфигурацию определенной дорожки медиапотока, мы можем вызвать MediaStreamTrack.getSettings() , который возвращает текущие примененные MediaTrackSettings .

Также можно обновить ограничения дорожки с открытого медиаустройства, вызвав applyConstraints() для дорожки. Это позволяет приложению перенастроить медиаустройство без предварительного закрытия существующего потока.

Дисплейные медиа

Приложение, которому требуется возможность захвата и записи экрана, должно использовать Display Media API. Функция getDisplayMedia() (входящая в состав navigator.mediaDevices аналогична getUserMedia() и используется для открытия содержимого дисплея (или его части, например, окна). Возвращаемый MediaStream работает так же, как и при использовании getUserMedia() .

Ограничения для getDisplayMedia() отличаются от ограничений, используемых для обычного видео- или аудиовхода.

{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}

Приведённый выше фрагмент кода показывает, как работают специальные ограничения для записи экрана. Обратите внимание, что они могут поддерживаться не всеми браузерами с поддержкой Display Media.

Потоки и треки

MediaStream представляет собой поток медиаконтента, состоящий из аудио- и видеодорожек ( MediaStreamTrack ). Вы можете получить все дорожки из MediaStream , вызвав MediaStream.getTracks() , который возвращает массив объектов MediaStreamTrack .

MediaStreamTrack

У MediaStreamTrack есть свойство kind , которое может быть либо audio , либо video , что указывает на тип медиаконтента, который он представляет. Звук каждой дорожки можно отключить, переключив её свойство enabled . У дорожки есть логическое свойство remote , которое указывает, является ли её источником RTCPeerConnection и исходит ли она от удалённого однорангового узла.