MediaDevices

Базовая Широко поддерживается *

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2017 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS) в некоторых или во всех поддерживающих браузерах.

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

Свойства экземпляра

Наследует свойства от своего родительского интерфейса, EventTarget.

Методы экземпляра

Наследует методы от своего родительского интерфейса, EventTarget.

enumerateDevices(): Получает массив информации об устройствах ввода и вывода медиа, доступных в системе.
getSupportedConstraints(): Возвращает объект, соответствующий MediaTrackSupportedConstraints, указывающий, какие свойства с ограничениями поддерживаются в интерфейсе MediaStreamTrack. См. API потоков медиа, чтобы узнать больше об ограничениях и о том, как их использовать.
getDisplayMedia(): Предлагает пользователю выбрать дисплей или часть дисплея (например, окно) для захвата в качестве MediaStream в целях совместного использования или записи. Возвращает промис, который разрешается в MediaStream.
getUserMedia(): С разрешения пользователя, с помощью всплывающего окна, включает камеру и/или микрофон в системе и предоставляет MediaStream, содержащий видеопоток и/или аудиопоток с входными данными.
selectAudioOutput() Экспериментальный: Предлагает пользователю выбрать определенное устройство аудиовывода.

События

devicechange: Срабатывает при подключении или отключении устройства ввода или вывода медиа к компьютеру пользователя.

Пример

// Put variables in global scope to make them available to the browser console.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

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

Спецификация
Захват медиа и потоков # mediadevices

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

	Рабочий стол					Мобильное устройство
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`MediaDevices`	47	12	33	30	11	47	36	30	11	5.0	47
`devicechange_event`	57	12	52	34	11	Нет	52	Нет	11	Нет	Нет
`enumerateDevices`	47	12	116 `enumerateDevices()` перечисляет как устройства ввода, так и вывода. Ранее возвращались только устройства ввода. 39 `enumerateDevices()` возвращает только устройства ввода.	34	11	47	116 `enumerateDevices()` перечисляет как устройства ввода, так и вывода. Ранее возвращались только устройства ввода. 39 `enumerateDevices()` возвращает только устройства ввода.	34	11	5.0	47
`getDisplayMedia`	72	79 17–79 Доступен в качестве члена `Navigator` вместо `MediaDevices`.	66 33–66 С Firefox 33 можно захватывать данные экрана с помощью `getUserMedia()` с ограничением `video` под названием `mediaSource`. До версии 52 использовался настраиваемый клиентом список разрешённых сайтов.	60	13	Нет В Chrome Android с версии 72 по 88 этот метод был доступен, но всегда завершался с ошибкой `NotAllowedError`. См. баг 40418135.	Нет В Firefox для Android с версии 66 по 79 этот метод был доступен, но всегда завершался с ошибкой `NotAllowedError`.	Нет В Opera Android с версии 51 по 88 этот метод был доступен, но всегда завершался с ошибкой `NotAllowedError`. См. баг 40418135.	Нет	Нет В Samsung Internet с версии 11.0 по 88 этот метод был доступен, но всегда завершался с ошибкой `NotAllowedError`. См. баг 40418135.	Нет В WebView Android с версии 72 по 88 этот метод был доступен, но всегда завершался с ошибкой `NotAllowedError`. См. баг 40418135.
`getSupportedConstraints`	53	12	44	40	11	52	50	41	11	6.0	53
`getUserMedia`	53 Если вам нужна эта возможность до версии 53, обратитесь к `navigator.webkitGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.	12	36 ["Если вам нужна эта возможность до версии 36, обратитесь к `navigator.mozGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.", "До Firefox 55 `getUserMedia()` неверно возвращал `NotSupportedError`, когда список ограничений был пустым или все ограничения были установлены на `false`. Начиная с Firefox 55, в этой ситуации теперь правильно вызывается обработчик ошибок с `TypeError`.", "При использовании специфичного для Firefox ограничения `video` под названием `mediaSource` для запроса захвата экрана, Firefox 66 и более поздние версии рассматривают значения `screen` и `window` как вызывающие отображение списка экранов и окон.", "Начиная с Firefox 66, `getUserMedia()` больше нельзя использовать в защищённых `<iframe>` или `data` URL, введённых пользователем в адресной строке."]	40 Если вам нужна эта возможность до версии 40, обратитесь к `navigator.webkitGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.	11	53 Если вам нужна эта возможность до версии 53, обратитесь к `navigator.webkitGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.	36 ["Если вам нужна эта возможность до версии 36, обратитесь к `navigator.mozGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.", "До Firefox для Android 55 `getUserMedia()` неверно возвращал `NotSupportedError`, когда список ограничений был пустым или все ограничения были установлены на `false`. Начиная с Firefox для Android 55, в этой ситуации теперь правильно вызывается обработчик ошибок с `TypeError`.", "При использовании специфичного для Firefox для Android ограничения `video` под названием `mediaSource` для запроса захвата экрана, Firefox для Android 66 и более поздние версии рассматривают значения `screen` и `window` как вызывающие отображение списка экранов и окон.", "Начиная с Firefox для Android 66, `getUserMedia()` больше нельзя использовать в защищённых `<iframe>` или `data` URL, введённых пользователем в адресной строке."]	41 Если вам нужна эта возможность до версии 41, обратитесь к `navigator.webkitGetUserMedia`, префиксной форме устаревшего `navigator.getUserMedia` API.	11	6.0	53
`selectAudioOutput`	Нет	Нет	116	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет
`setCaptureHandleConfig`	102	102	Нет	88	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

API захвата медиа и потоков: API, частью которого является этот интерфейс.
API захвата экрана: API, определяющее метод getDisplayMedia().
API WebRTC
Navigator.mediaDevices: Возвращает ссылку на объект MediaDevices, который можно использовать для доступа к устройствам.
CameraCaptureJS: Захват и воспроизведение HTML видео с помощью MediaDevices и API записи MediaStream
OpenLang: Веб-приложение HTML-видеолаборатории с использованием MediaDevices и API записи MediaStream для записи видео

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices