MediaDevices
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 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()-
Удаляет обработчик событий.
Пример
"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 |
Совместимость с браузерами
Смотрите также
- Media Capture and Streams API: API, частью которого является этот интерфейс.
- WebRTC API
Navigator.mediaDevices: Возвращает ссылку на объектMediaDevices, который можно использовать для доступа к устройствам.- CameraCaptureJS: HTML5 захват и воспроизведение видео с помощью
MediaDevicesи MediaStream Recording API (исходный код на GitHub)