getUserMedia() very simple demo

#WebRTC

Элемент 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

var vgaButton = document.querySelector("button#vga"); var qvgaButton = document.querySelector("button#qvga"); var hdButton = document.querySelector("button#hd");

// Разные браузеры делают запросы на доступ к оборудованию по разному. Приведём к общему виду. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; console.log(navigator.getUserMedia);

// Устанавливаем ограничения. Нам нужен только видеопоток. var constraints = { audio: false, video: true };

// Запрашиваем элемент, в который будет выводится видеопоток. var video = document.querySelector('video');

// Локальная переменная stream var stream;

// Функция обратного вызова, выплняющаяся при удачном подключении к видеокамере. // В локальную переменную stream попадает объект MediaStream. function successCallback(gotStream) { console.log(gotStream);

var element = document.getElementById('media_stream_id');
element.textContent = 'MediaStream id = ' + gotStream.id;

stream = gotStream;

//console.log(window);

// if (window.URL) { // // Deprecate and Remove URL.createObjectURL for MediaStream video.src = window.URL.createObjectURL(stream); // } // else { // video.src = stream; // }

// Мы всё настроили. Пора показать поток с камеры.
video.play();

}

// Функция обратного вызова, которая будет вызываться при сбое подключения к видеокамере. function errorCallback(error) { console.log("navigator.getUserMedia error: ", error); }

//var enumeratorPromise = navigator.mediaDevices.enumerateDevices(); //console.log(enumeratorPromise);

//navigator.mediaDevices.getUserMedia(constraints).then((stream) => {video.srcObject = stream});

// Constraints object for low resolution video var qvgaConstraints = { video: { mandatory: { maxWidth: 320, maxHeight: 240 } } }; // Constraints object for standard resolution video var vgaConstraints = { video: { mandatory: { maxWidth: 640, maxHeight: 480 } } }; // Constraints object for high resolution video var hdConstraints = { video: { mandatory: { minWidth: 1280, minHeight: 960 } } };

navigator.getUserMedia(vgaConstraints, successCallback, errorCallback); // Associate actions with buttons: qvgaButton.onclick = function(){getMedia(qvgaConstraints)}; vgaButton.onclick = function(){getMedia(vgaConstraints)}; hdButton.onclick = function(){getMedia(hdConstraints)}; // Simple wrapper for getUserMedia() with constraints object as // an input parameter function getMedia(constraints) { console.log('Test' + stream); if (!!stream) { video.src = null; stream.stop(); }

navigator.getUserMedia(constraints, successCallback, errorCallback);

}