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

Поддержите проект, если он помог вам

Проект продвигается за счёт личных средств и времени авторского коллектива. Если вы нашли здесь то, что искали, то вы можете выразить свою благодарность финансово. Даже небольшой платёж помогает авторам в их труде, сохраняя их вовлечённость и высокую мотивацию чтобы строить открытый мир равных возможностей для всех неравнодушных людей вокруг.