Элемент video
Если вы разрабатываете сайт и веб-сервер, который будет отдавать страницу с элементом video для вывода изображения с веб-камеры нходится на вашем же компьютере, то можно тестировать и через HTTP. Для рабочего сайта всегда надо использовать HTTPS.
Запрашиваем элемент, в котором будет выводится наш видеопоток.
var video = document.querySelector('video');
Указываем ограничения для видеопотока (тут разрешение видеопотока 640х480 и звук).
var constraints = {
video: {
mandatory: {
maxWidth: 640,
maxHeight: 480
}
},
audio: true
};
Пробуем подключиться к камере. В первом случае (используйте его) используется вариант с Promise, а во втором варианте (закомментирован), устаревшая версия, использующая аргументы с функциями обратного вызова successCallback и errorCallback для успешного и не очень вариантов подключения к видеопотоку с камеры.
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
console.log(error);
});
// УСТАРЕВШИЙ ВАРИАНТ получения потока с функциями обратного вызова для случая успешного завершения или при возникновении
// ошибки.
//navigator.getUserMedia(constraints, successCallback, errorCallback);
//function successCallback(stream) {
// Указываем тегу video источник видеопотока.
//video.src = window.URL.createObjectURL(stream);
// Если у элемента video нет атрибута autoplay, то необходимо начать показ видеопотока, иначе там будет статичная картинка.
//video.play();
//}
//function errorCallback(error) {
//console.log("navigator.getUserMedia error: ", error);
//}
При работе функции successCallback в консоль JS вылезает предупреждение:
[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018.
Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.
Наслаждаемся выводом собственного изображения.
Ошибки
Подключился к локальному сайту для разработки через HTTP:
navigator.getUserMedia error: DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
Обязательно подключение через защищённый протокол HTTPS!
Загрузил на сайт с сертификатом (самоподписанный сертификат). Подключился через HTTPS:
navigator.getUserMedia error: DOMException: Requested device not found
ОС: Mac OS X 10.10.5 Yosemite
Browser: Chrome Версия 69.0.3497.100 (Официальная сборка), (64 бит)
Приложение НЕ может получить доступ к камере FaceTime.
Проблема решилась после перезагрузки мака.
Успешное подключение
Подключился через HTTPS со смартфона с Android. Перед подключением камеры был запрос разрешения на доступ к камере.
Видео показывает отлично.
ОС: Android 7.1.1
Browser: Chrome Версия 69.0.3497.100
Node.js
Сервер, который работает работает с WebSocket-ами.
Node.jsПоддержите проект, если он помог вам
Проект продвигается за счёт личных средств и времени авторского коллектива. Если вы нашли здесь то, что искали, то вы можете выразить свою благодарность финансово. Даже небольшой платёж помогает авторам в их труде, сохраняя их вовлечённость и высокую мотивацию чтобы строить открытый мир равных возможностей для всех неравнодушных людей вокруг.