MediaDevices
Experimental
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Интерфейс MediaDevices
предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.
Свойства
Наследует свойство родителя EventTarget
.
Обработчики событий
MediaDevices.ondevicechange
- Это обработчик события
devicechange
. Это событие доставляется в объекMediaDevices
когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.
Методы
Наследуемый метод родителя EventTarget
.
EventTarget.addEventListener()
- Регистрирует обработчик событий для определенного типа событий.
MediaDevices.enumerateDevices()
- Получает массив информации о медиа-устройстве ввода-вывода.
MediaDevices.getSupportedConstraints()
- Возвращает объект, соответствующий
MediaTrackSupportedConstraints
, указывающий, какие ограничительные свойства поддерживаются в интерфейсеMediaStreamTrack
. Смотри Capabilities and constraints в Media Capture and Streams API (Media Stream), чтобы узнать больше об ограничениях и их использовании. MediaDevices.getUserMedia()
- С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет
MediaStream
, содержащий входящую видео- и/или звуковую дорожку.
EventTarget.removeEventListener()
- Удаляет обработчик событий.
Пример
'use strict';
// Помещаем переменные в глобальную область видимости, чтобы сделать их доступными для консоли браузера
var video = document.querySelector('video');
var constraints = window.constraints = {
audio: false,
video: true
};
var errorElement = document.querySelector('#errorMsg');
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Получил поток с ограничениями:', constraints);
console.log('Использую видео-устройство: ' + videoTracks[0].label);
stream.onended = function() {
console.log('Трансляция закончилась');
};
window.stream = stream; // Делаем переменную доступной для консоли браузера
video.srcObject = stream;
})
.catch(function(error) {
if (error.name === 'ConstraintNotSatisfiedError') {
errorMsg('Разрешение ' + constraints.video.width.exact + 'x' +
constraints.video.height.exact + ' px не поддерживается устройством.');
} else if (error.name === 'PermissionDeniedError') {
errorMsg('Разрешения на использование камеры и микрофона не были предоставлены. ' +
'Вам нужно разрешить странице доступ к вашим устройствам,' +
' чтобы демо-версия работала.');
}
errorMsg('getUserMedia error: ' + error.name, error);
});
function errorMsg(msg, error) {
errorElement.innerHTML += '<p>' + msg + '</p>';
if (typeof error !== 'undefined') {
console.error(error);
}
}
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
Media Capture and Streams Определение 'MediaDevices' в этой спецификации. |
Кандидат в рекомендации | Основная спецификация |
Совместимость с браузерами
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Microsoft Edge | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|---|
Basic support | (Да) | (Да) | 36.0 (36.0) | Нет | ? | Нет | Нет |
enumerateDevices() |
51.0 | ? | ? | Нет | ? | Нет | Нет |
getSupportedConstraints() |
(Да) | ? | 50 (50) | Нет | ? | Нет | Нет |
ondevicechange and devicechange events |
(Да) | ? | 51 (51)[1] | Нет | ? | Нет | Нет |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|---|
Basic support | Нет | Нет | (Да) | 36.0 (36.0) | 2.2 | Нет | Нет | Нет | Нет |
enumerateDevices() |
Нет | Нет | ? | ? | ? | Нет | Нет | Нет | Нет |
getSupportedConstraints() |
Нет | Нет | ? | 50.0 (50) | ? | Нет | Нет | Нет | Нет |
[1] Поддержка события devicechange
и MediaDevices.ondevicechange
появилась Firefox 51, но только для Mac и по умолчанию отключена. Её можно включить, установив параметру media.ondevicechange.enabled
значение ИСТИНА. Для Linux и Windows поддержка добавлена и включена по умолчанию с Firefox 52.
Смотрите также
- Media Capture and Streams API: API, частью которого является этот интерфейс.
- WebRTC API
Navigator.mediaDevices
: Возвращает ссылку на объектMediaDevices
, который можно использовать для доступа к устройствам.- CameraCaptureJS: HTML5 захват и воспроизведение видео с помощью
MediaDevices
и MediaStream Recording API (исходный код на GitHub)