Google стремится к продвижению расового равенства для чернокожего населения. Смотри как.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

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

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

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

Использование Promises

 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);
    });
 

Использование асинхронного / 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 , что указывает на то , что тип мультимедийного устройства это.

Использование Promises

 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));
 

Использование асинхронного / 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() позволяет открыть медиа - устройство , которое соответствует определенному требованию. Это требование может быть очень свободно определенно (аудио и / или видео), или очень специфический (минимальное разрешение камеры или точный идентификатор устройства). Рекомендуются , чтобы приложения , которые используют getUserMedia() API сначала проверить существующие устройства , а затем задает ограничение , которое соответствует точному устройству с использованием 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() , как правило , имеют атрибуты autoplay и playsinline . autoplay атрибут будет вызывать новые потоки , назначенные элемент для автоматического воспроизведения. playsinline атрибут позволяет видео для воспроизведения рядного, а не только в полном объеме, на некоторых мобильных браузерах. Также рекомендуется использовать controls="false" для живых потоков, если пользователь не должен быть в состоянии приостановить их.

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