MediaDevices

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

* Some parts of this feature may have varying levels of support.

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

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

Свойства

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

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

MediaDevices.ondevicechange

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

Методы

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

EventTarget.addEventListener()

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

MediaDevices.enumerateDevices()

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

MediaDevices.getSupportedConstraints()

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

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDevices
devicechange event
enumerateDevices
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental
getSupportedConstraints
getUserMedia
Secure context required
selectAudioOutput
Experimental
setCaptureHandleConfig
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

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