Медиа-часть 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'
}
}
Фрагмент кода выше показывает, как работают специальные ограничения для записи экрана. Обратите внимание, что они могут не поддерживаться всеми браузерами, поддерживающими отображение мультимедиа.
Стримы и треки
MediaStream представляет собой поток мультимедийного содержимого, состоящего из дорожек ( MediaStreamTrack ) аудио и видео. Вы можете получить все дорожки из MediaStream , вызвав MediaStream.getTracks() , который возвращает массив объектов MediaStreamTrack .
Медиастримтрек
MediaStreamTrack имеет свойство kind , которое может быть audio или video , указывающим тип мультимедиа, который он представляет. Каждую дорожку можно enabled , переключив ее свойство enable. У дорожки есть логическое свойство remote , указывающее, является ли она источником RTCPeerConnection и исходит от удаленного однорангового узла.