Прямая трансляция с веб-камеры с помощью WebSockets и Base64
Эта проблема:
Мы хотим транслировать живое видео с веб-камеры на любого подключенного клиента.
Возможное решение
Отправьте каждый кадр с веб-камеры на сервер веб-сокета, который отправит кадр множеству клиентов.
Предпосылки
- Базовое понимание того, как работают веб-сокеты
- Знание JavaScript и Node.js
- Компьютер / ноутбук с веб-камерой
Приступим к кодированию!
Инициализация
Создайте новый проект и установите библиотеку ws и фреймворк express (экспресс не требуется, но мы будем использовать его для обслуживания стримера и клиента с файлами .html):
mkdir wsServer && cd wsServer && npm init -y && npm i -S ws express && touch index.js client.html streamer.html
Сервер Node.js
Простой HTTP-сервер для обработки конечных точек / client и / streamer
index.js
И с сервером WebSocket:
Большой! Итак, теперь у нас есть работающие (надеюсь) серверы HTTP и WS. Нам нужно реализовать стример и клиент (фактический зритель)
Что делает стример?
- Подключается к нашему серверу WebSocket
- Запрашивает разрешение на доступ к веб-камере
- Отображает видео с веб-камеры в теге
<video/>(необязательно) - Создает кадр, закодированный в base64, с некоторым интервалом (FPS)
- Отправляет строку base64 на сервер с некоторым интервалом (FPS)
streamer.html
Круто, теперь нам нужно реализовать клиента, который будет получать строку base64 и отображать ее в теге <img/>.
Что делает клиент?
- Подключается к нашему серверу WebSocket
- Слушает входящие сообщения (строка base64)
- Добавляет строку base64 в тег
<img/>
client.html
Вот и все!
Почему так тормозит?
Что ж, не следует забывать, что кодирование Base64 менее эффективно, чем необработанный двоичный файл. Если хотите, вы можете использовать GZIP или даже LZ77 для сжатия строки base64, хотя имейте в виду, что у нее может быть не самая лучшая степень сжатия (из-за случайности base64). Тебе решать.
Демо
Демо-сайт: https://base64-live.herokuapp.com/
Репозиторий на Github: webcam-base64-streaming
