如何将树莓派的实时流嵌入到html网页中

Question

i recently posted about a rapberry pi project that im working on regarding a RC robot using a pi as a brain and i was trying to make a GUI for it.

my question got shut down!

so here is another one. i have decided to go with a web GUI.

im teaching myself html, CSS and javascript and Jquery along the way.

however my first problem has been how to embeb a live feed of my raspberry camera onto my web page.

i thought this was going to be very easy, it probably would have been if browsers or (at least chrome,my browser) still supported the vlc plug-in.

i have spent the day googling various ways to embed my live stream onto a web page with no success.

the thing most places are pushing towards is using some form of .mjepg file to stream to the web page but im having now hope with this either. one website suggested using U4VL but i can seem to download it onto my pi. im assuming as the post was from 2013 that U4VL doesnt exist anymore.

is there anything similar to either vlc embedded streaming or the U4VL .mjpeg driver out there that will do the same job nowadays??

many thanks.

Answer 1

I can think of a few ways to accomplish this with H264 instead of MJPEG. One way would be to use ffmpeg or gstreamer or VLC to write a HLS/Mpeg-Dash stream to a file location visible to the web server. You can then incorporate the stream to your page using a Html5 video tag. Example with raspi, Logitech camera, and ffmpeg

An alternative method maybe to leverage WebRTC. Example with raspi camera and gstreamer .