Приложение веб и андроид для передачи прямого потока видео и аудио с андроид устройств на веб сайт в локальной сети, используя сокеты и WebRTC.
Веб сайт на Next.js, TypeScript, React + shadcn-ui, и http/socket сервер который автоматически запускается при запуске сайта.
Сайт запускается на локальном компьютере.
Далее приложение написанное на Flutter для Android платформы, устройство должно быть подключено к сети, в которой работает сайт.
При подключении андроида к серверу, он передает необходимые настройки камеры, при выборе устройства на сайте - андроид и веб обмениваются WebRTC офферами, ice кандидатами и начинается просмотр.
Дополнительный функционал на веб сайте:
1. При нажатии на 'y' - сбрасывает запись и/или записанное видео.
2. 'u' - начать запись видео до 30-ти секунд. При повторном нажатии во время записи - останавливает запись. После остановки главный плеер меняется с прямой трансляции на записанное видео.
3. 'i' - предыдущий кадр при просмотре записанного видео.
4. 'o' - следующий кадр при просмотре записанного видео.
P.S. На вложении два разных изображения, слева полноценные настройки, а правее полный размер вебсайта. Соединено при помощи imagemagick.
Веб сайт на Next.js, TypeScript, React + shadcn-ui, и http/socket сервер который автоматически запускается при запуске сайта.
Сайт запускается на локальном компьютере.
Далее приложение написанное на Flutter для Android платформы, устройство должно быть подключено к сети, в которой работает сайт.
При подключении андроида к серверу, он передает необходимые настройки камеры, при выборе устройства на сайте - андроид и веб обмениваются WebRTC офферами, ice кандидатами и начинается просмотр.
Дополнительный функционал на веб сайте:
1. При нажатии на 'y' - сбрасывает запись и/или записанное видео.
2. 'u' - начать запись видео до 30-ти секунд. При повторном нажатии во время записи - останавливает запись. После остановки главный плеер меняется с прямой трансляции на записанное видео.
3. 'i' - предыдущий кадр при просмотре записанного видео.
4. 'o' - следующий кадр при просмотре записанного видео.
P.S. На вложении два разных изображения, слева полноценные настройки, а правее полный размер вебсайта. Соединено при помощи imagemagick.