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

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

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