MediaDevices

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

Интерфейс 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' в этой спецификации.
Кандидат в рекомендации Основная спецификация

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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.

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