Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Начало работы с мультимедийными устройствами

При разработке для Интернета стандарт WebRTC предоставляет API для доступа к камерам и микрофонам, подключенным к компьютеру или смартфону. Эти устройства обычно называются MediaDevices и могут быть доступны с помощью JavaScript через объект navigator.mediaDevices , который реализует интерфейс MediaDevices . Из этого объекта мы можем перечислить все подключенные устройства, прослушать изменения устройства (когда устройство подключено или отключено) и открыть устройство для получения медиапотока (см. Ниже).

Наиболее распространенный способ, которым это используется, - через функцию getUserMedia() , которая возвращает обещание, которое разрешается в MediaStream для соответствующих мультимедийных устройств. Эта функция принимает один объект MediaStreamConstraints который определяет наши требования. Например, чтобы просто открыть микрофон и камеру по умолчанию, мы бы сделали следующее.

Использование обещаний

 const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
 

Использование async / await

 const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}
 

Вызов getUserMedia() инициирует запрос разрешений. Если пользователь принимает разрешение, обещание разрешается с помощью MediaStream содержащего одно видео и одну звуковую дорожку. Если в разрешении отказано, PermissionDeniedError . Если не подключено ни одного подходящего устройства, NotFoundError .

Полная справка по API для интерфейса MediaDevices доступна в веб-документах MDN .

Запрос медиа-устройств

В более сложном приложении мы, скорее всего, захотим проверить все подключенные камеры и микрофоны и предоставить соответствующую обратную связь пользователю. Это можно сделать, вызвав функцию enumerateDevices() . Это вернет обещание, которое разрешается в массиве MediaDevicesInfo который описывает каждое известное мультимедийное устройство. Мы можем использовать это для представления пользовательского интерфейса, который позволяет им выбрать тот, который он предпочитает. Каждый MediaDevicesInfo содержит свойство с именем kind со значением audioinput , audiooutput или videoinput , что указывает на то , что тип мультимедийного устройства это.

Использование обещаний

 function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
 

Использование async / await

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
 

Прослушивание изменений устройств

Большинство компьютеров поддерживают подключение различных устройств во время выполнения. Это может быть веб-камера, подключенная через USB, гарнитура Bluetooth или набор внешних динамиков. Чтобы должным образом поддержать это, веб-приложение должно прослушивать изменения медиа-устройств. Это можно сделать, добавив прослушиватель navigator.mediaDevices для события devicechange .

 // Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
 

Медиа ограничения

Объект ограничений, который должен реализовывать интерфейс MediaStreamConstraints , который мы передаем в качестве параметра getUserMedia() позволяет нам открывать мультимедийное устройство, которое соответствует определенному требованию. Это требование может быть очень свободно определено (аудио и / или видео) или очень специфично (минимальное разрешение камеры или точный идентификатор устройства). Рекомендуется, чтобы приложения, использующие API getUserMedia() сначала проверили существующие устройства, а затем deviceId ограничение, соответствующее точному устройству, используя ограничение deviceId . Устройства также, если возможно, будут настроены в соответствии с ограничениями. Мы можем включить подавление эха на микрофонах или установить конкретную или минимальную ширину и высоту видео с камеры.

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
 

Полную документацию по интерфейсу MediaStreamConstraints можно найти в веб-документах MDN .

Локальное воспроизведение

Как только медиа-устройство было открыто и у нас есть MediaStream , мы можем назначить его видео или аудио элементу для локального воспроизведения потока.

 async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
 

HTML- getUserMedia() необходимый для типичного элемента видео, используемого с getUserMedia() , обычно будет иметь атрибуты autoplay и playsinline . Атрибут autoplay вызовет автоматическое воспроизведение новых потоков, назначенных элементу. playsinline позволяет воспроизводить видео в определенных браузерах, а не только в полноэкранном режиме. Также рекомендуется использовать controls="false" для прямых трансляций, если только пользователь не сможет их приостановить.

 <html>
<head><title>Local video playback</video></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>