0

I figured out how to stream video from the camera on the Raspberry Pi, and how to receive and view it in the browser with an URL like:

http://picamhq:8080/?action=stream

The type of video is M-JPEG, and info on mjpeg-streamer is here.

Now, as the browser is capable to play this video stream, I expect that should also work inside a HTML web page. The advantage would be that such web page can additionally show some buttons to start and stop the streamer, and to change parameters, such as camera settings.

I looked into several answers of questions like How to embed streaming Video (rtmp) in HTML, but that is not about embedding the video in a html page.

I tried with a video tag like:

<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>

Unfortunately, this does not work. The web page shows a dark rectangle where the video should play, and it seems to take forever to load the entire stream, which of course is not productive, as the stream will never end. Besides, I want low latency :-)

Then I looked at info like this SO question on live html streaming which talks about lots of complex stuff. Does that mean that the nice and simple mjpeg-streamer cannot make a stream that is compatible with the html video tag? And that a stream that the browser can play, does not necessarily work inside a html page?

Roland
  • 4,619
  • 7
  • 49
  • 81

2 Answers2

2

The solution you are using is not actually streaming video it is sending a stream of individual JPEG images.

From the documentation:

  • This plugin streams JPEG data from input plugins via HTTP

If you look at a demo site for MJPEG_Streamer you can see this also as the output from the stream is displayed in an 'img' tag rather than a 'video' tag:

<p id="streamwrap" class="xform-p">
        <img id="streamimage" class="xform" src="/?action=stream">
</p>

(from: http://hashey.dip.jp:8090/stream.html - note the demo does not appear to be sending a stream at the time of writing).

You could convert this stream to video or for your requirements you might just need to add control to start and stop making requests to get the current image from the stream.

Mick
  • 24,231
  • 1
  • 54
  • 120
  • Unbelievable how a problem that I saw as complicated can be solved this simple! Thanks! By the way, if I just found a way to download the stream as a series of jpeg images to disk, because the actual application for this cam is on a telescope, and I will need a lot of images for "stacking" to increase image quality . . . – Roland Dec 23 '20 at 23:05
1

I'm not an expert on the start/stop thing (you can control the camera with ajax calls to the raspberry webserver, i assume), but how about using an iframe for display?

<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
Roland
  • 4,619
  • 7
  • 49
  • 81
L. Gerhardt
  • 127
  • 7
  • 1
    This actually worked. However, somewhere I heared that iframes are to be avoided, so I prefer the IMG solution as the more logical method. The iframe also shows a border, and scroll bars, so it seems not to scale the image content like the IMG tag. But for others, the iframe might be useful, and it is always good to know several ways to solve a problem. Thanks! – Roland Dec 23 '20 at 22:58