Есть устройство, к нему подключаем карту видео захвата (пока с ней, но в идеале напрямую через 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>