Медиа-часть 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() для дорожки. Это позволяет приложению повторно настроить мультимедийное устройство без предварительного закрытия существующего потока.
Медиа-дисплей
Приложение, которое хочет иметь возможность выполнять захват и запись экрана, должно использовать API Display Media. Функция getDisplayMedia() (которая является частью navigator.mediaDevices аналогична getUserMedia() и используется для открытия содержимого дисплея (или его части, например окна). Возвращенный MediaStream работает то же, что и при использовании getUserMedia() .
Ограничения для getDisplayMedia() отличаются от тех, которые используются для обычного ввода видео или звука.
{
video: {
cursor: 'always' | 'motion' | 'never',
displaySurface: 'application' | 'browser' | 'monitor' | 'window'
}
}
Приведенный выше фрагмент кода показывает, как работают специальные ограничения для записи экрана. Обратите внимание, что они могут поддерживаться не всеми браузерами, поддерживающими отображение мультимедиа.
Потоки и треки
MediaStream представляет поток мультимедийного контента, который состоит из дорожек ( MediaStreamTrack ) аудио и видео. Вы можете получить все дорожки из MediaStream , вызвав MediaStream.getTracks() , который возвращает массив объектов MediaStreamTrack .
МедиаСтримТрек
MediaStreamTrack имеет свойство kind — audio или video , указывающее тип мультимедиа, который он представляет. Каждый трек можно отключить, переключив его enabled свойство. Трек имеет логическое свойство remote , которое указывает, получен ли он из RTCPeerConnection и исходит ли он от удаленного узла.