Как встроить потоковое видео с Raspberry Pi в html?
Я понял, как транслировать видео с камеры на Raspberry Pi, а также как получать и просматривать его в браузере с URL-адресом вида:
http://picamhq:8080/?action=stream
Тип видео — M-JPEG, а информация о mjpeg-streamer — здесь.
Теперь, когда браузер может воспроизводить этот видеопоток, я ожидаю, что он также должен работать внутри веб-страницы HTML. Преимуществом будет то, что такая веб-страница может дополнительно отображать некоторые кнопки для запуска и остановки стримера, а также для изменения параметров, таких как настройки камеры.
Я просмотрел несколько ответов на такие вопросы, как Как встроить потоковое видео (rtmp) в HTML, но речь не идет о встраивании видео в html-страницу.
Я пробовал с тегом видео, например:
<video width = "320" height = "240" autoplay controls>
<source src = "http://picamhq:8080/?action=stream" type = "video/mjpeg">
Your browser does not support the video tag.
</video>
К сожалению, это не работает. Веб-страница показывает темный прямоугольник, где должно воспроизводиться видео, и кажется, что загрузка всего потока занимает целую вечность, что, конечно, непродуктивно, так как поток никогда не закончится. Кроме того, я хочу низкую задержку :-)
Затем я просмотрел такую информацию, как этот НАСТОЛЬКО вопрос о прямой трансляции html, в котором говорится о множестве сложных вещей. Означает ли это, что хороший и простой mjpeg-streamer не может создать поток, совместимый с тегом html video? И что поток, который может воспроизводить браузер, не обязательно работает внутри html-страницы?
Ответы 2
Я не эксперт по запуску / остановке (я полагаю, вы можете управлять камерой с помощью ajax-вызовов к веб-серверу Raspberry), но как насчет использования iframe для отображения?
<iframe width = "640" height = "355" src = "http://picamhq:8080/?action=stream">
</iframe>
Решение, которое вы используете, на самом деле не является потоковым видео, оно отправляет поток отдельных изображений JPEG.
Из документации:
- Этот плагин передает данные JPEG из входных плагинов через HTTP.
Если вы посмотрите на демонстрационный сайт для MJPEG_Streamer, вы также увидите это, поскольку вывод потока отображается в теге «img», а не в теге «video»:
<p id = "streamwrap" class = "xform-p">
<img id = "streamimage" class = "xform" src = "/?action=stream">
</p>
(из: http://hashey.dip.jp:8090/stream.html — обратите внимание, что демо не отправляет поток на момент написания).
Вы можете преобразовать этот поток в видео или для ваших требований вам может понадобиться добавить элемент управления, чтобы запускать и останавливать запросы на получение текущего изображения из потока.
Невероятно, как проблема, которую я считал сложной, может быть решена так просто! Спасибо! Кстати, если бы я только что нашел способ загрузить поток в виде серии изображений jpeg на диск, потому что фактическое приложение для этой камеры находится на телескопе, и мне нужно будет много изображений для «укладки», чтобы увеличить изображение качество . . .
Это действительно сработало. Однако где-то я слышал, что iframe следует избегать, поэтому я предпочитаю решение IMG как более логичный метод. iframe также показывает границу и полосы прокрутки, поэтому кажется, что он не масштабирует содержимое изображения, как тег IMG. Но для других iframe может быть полезен, и всегда полезно знать несколько способов решения проблемы. Спасибо!