Решил пробросить картинку с веб камеры, подключенной к компьютеру, на html страницу, которую отображает веб сервер, работающий на этом же компьютере. Для начала решил отладить на Ubuntu, затем перенести на Raspbian.
GStreamer в качестве инструмента для вещания был мной выбран, потому что данная задача - это лишь часть функциональности другой программы, которую я пишу на Си++, поэтому пользоваться отдельными стриминг-серверами не хотелось. На стороне front-end я решил обойтись тегом video HTML5 просто потому, что это решение выглядит проще и аккуратнее, чем использование сторонних плееров.
Итак, для отправки клиенту кода html страницы нам нужен любой веб сервер (хоть Apache - я в силу специфики своей раработки использую Mongoose), который будет отдавать единственную страницу index.html:
Ключевой момент здесь это, конечно, тег video: здесь мы в качетсве источника видео даем порт 8081 на localhost. Параметр autoplay стартует проигрывание видео сразу после загрузки страницы, что нам и нужно. Осталось отправить видеопоток в порт.
Для отладки различных pipeline-ов GStreamer-a я использовал утилиту gst-launch, которая поставляется с ним в комплекте.
Итак, у меня в качестве сервера выступает компьютер Ubuntu с веб камерой. Чтобы переправить картинку с веб камеры на порт 8081 я использовал следующую команду:
Параметры говорят сами за себя: берем видео из /dev/video, задаем его параметры (размер), кодируем, вещаем по tcp через порт 8081 этого же компьютера. Подробнее о плагинах GStreamer и их параметрах можно посмотреть на странице с плагинами: плагины.
Осталось только на клиентской машине открыть браузер, ввести адрес сервера и увидеть изображение с веб камеры, подключенной к серверу.
В следующем посте описан класс на Си++, который реализует данный пайплайн.
Итак, для отправки клиенту кода html страницы нам нужен любой веб сервер (хоть Apache - я в силу специфики своей раработки использую Mongoose), который будет отдавать единственную страницу index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> <div> <video autoplay src="http://127.0.0.1:8081"></video> </div> </body> </html>
Для отладки различных pipeline-ов GStreamer-a я использовал утилиту gst-launch, которая поставляется с ним в комплекте.
Итак, у меня в качестве сервера выступает компьютер Ubuntu с веб камерой. Чтобы переправить картинку с веб камеры на порт 8081 я использовал следующую команду:
gst-launch v4l2src ! video/x-raw-yuv,width=320,height=240 ! ffmpegcolorspace ! theoraenc ! oggmux ! tcpserversink host=127.0.0.1 port=8081
Осталось только на клиентской машине открыть браузер, ввести адрес сервера и увидеть изображение с веб камеры, подключенной к серверу.
В следующем посте описан класс на Си++, который реализует данный пайплайн.
даёшь поток из ванны!
ОтветитьУдалить