MediaDevices

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Интерфейс MediaDevices предоставляет доступ к подключённым медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.

Свойства

Наследует свойство родителя EventTarget.

Обработчики событий

MediaDevices.ondevicechange (en-US): Это обработчик события devicechange. Это событие доставляется в объект MediaDevices когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.

Методы

Наследуемый метод родителя EventTarget.

EventTarget.addEventListener(): Регистрирует обработчик событий для определённого типа событий.
MediaDevices.enumerateDevices(): Получает массив информации о медиа-устройстве ввода-вывода.
MediaDevices.getSupportedConstraints() (en-US): Возвращает объект, соответствующий MediaTrackSupportedConstraints (en-US), указывающий, какие ограничительные свойства поддерживаются в интерфейсе 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' в этой спецификации.	Кандидат в рекомендации	Основная спецификация

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Media Capture and Streams API: API, частью которого является этот интерфейс.
WebRTC API
Navigator.mediaDevices: Возвращает ссылку на объект MediaDevices, который можно использовать для доступа к устройствам.
CameraCaptureJS: HTML5 захват и воспроизведение видео с помощью MediaDevices и MediaStream Recording API (исходный код на GitHub)