Вывод видео с карты видео захвата в тег <video> html?

Есть устройство, к нему подключаем карту видео захвата (пока с ней, но в идеале напрямую через vga). Устройство и карта на стороне клиента. Как мне вывести видео в тег <video>?

Правильно ли я себе представляю работу такого ресурса:

• Есть клиент, на котором устанавливается сервер
• Есть удалённый сервер(ресурс), на котором есть html элемент для проигрывания онлайн видео
• При переходе клиента в броузере на удалённый сервер он подгружает инструмент для просмотра онлайн видео (html страницу)
• Загруженная страница с удалённого сервера делает запрос к локальному серверу (сервер на стороне клиента, например OpenServer) по определённому порту (Например: 127.0.0.1:3333) при помощи библиотеки hls.js
• Локальный сервер отдаёт файлы .m3u8, предварительно закодировав их.

В итоге видео идущее с карты захвата можно просматривать в режиме онлайн.

UPD Накидал скриптик с html:

Выводит видео с карты видео захвата AverMedia DVD EZMaker 7 C039. Операционная система Ubuntu 18.04. Работает только в Chrome. В FF выдаёт ошибку:

MediaStreamError { name: "AbortError", message: "Starting video failed", constraint: "", stack: "" }

    const video = document.querySelector('#videoElement'); 
    navigator.mediaDevices.getUserMedia({ 
        audio: false, 
        video: true, 
    }).then(stream => { 
        video.srcObject = stream; 
    }).catch( error => { 
        console.error(error); 
    });

#container { 
  padding: 10px; 
  border: 1px solid grey; 
} 
video{ 
  border: 1px solid grey; 
}

<div id="container"> 
    <video autoplay="true" id="videoElement"> 
 
    </video> 
</div>