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.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ru/web/api/media_capture_and_streams_api/index.md)
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Интерфейс MediaDevices
предоставляет доступ к подключённым медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.
Свойства
Наследует свойство родителя EventTarget
.
Обработчики событий
MediaDevices.ondevicechange
-
Это обработчик события
unsupported templ: event. Это событие доставляется в объектMediaDevices
когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.
Методы
Наследуемый метод родителя EventTarget
.
EventTarget.addEventListener()
-
Регистрирует обработчик событий для определённого типа событий.
MediaDevices.enumerateDevices()
-
Получает массив информации о медиа-устройстве ввода-вывода.
MediaDevices.getSupportedConstraints()
-
Возвращает объект, соответствующий
MediaTrackSupportedConstraints
, указывающий, какие ограничительные свойства поддерживаются в интерфейсеMediaStreamTrack
. Смотри Capabilities and constraints, чтобы узнать больше об ограничениях и их использовании. 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);
}
}
Спецификации
Specification |
---|
Media Capture and Streams # mediadevices |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Media Capture and Streams API: API, частью которого является этот интерфейс.
- WebRTC API
Navigator.mediaDevices
: Возвращает ссылку на объектMediaDevices
, который можно использовать для доступа к устройствам.- CameraCaptureJS: HTML5 захват и воспроизведение видео с помощью
MediaDevices
и MediaStream Recording API (исходный код на GitHub)