MediaDevices
============

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

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

Свойства
--------

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

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

`MediaDevices.ondevicechange` (en-US)

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

Методы
------

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

`EventTarget.addEventListener()`

Регистрирует обработчик событий для определённого типа событий.

`MediaDevices.enumerateDevices()`

Получает массив информации о медиа-устройстве ввода-вывода.

`MediaDevices.getSupportedConstraints()` (en-US)

Возвращает объект, соответствующий `MediaTrackSupportedConstraints` (en-US), указывающий, какие ограничительные свойства поддерживаются в интерфейсе `MediaStreamTrack`. Смотри Capabilities and constraints (en-US), чтобы узнать больше об ограничениях и их использовании.

`MediaDevices.getUserMedia()`

С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет `MediaStream`, содержащий входящую видео- и/или звуковую дорожку.


`EventTarget.removeEventListener()`

Удаляет обработчик событий.

Пример
------


```js
"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);
  }
}
```

Спецификации
------------

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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