1

I have been asked to add a live stream video to an existing website. The stream URL is, say, http://192.168.1.2/, and I can view it in VLC. The container is MPEG-TS, and the codec shown by VLC is Codec: H264 - MPEG-4 AVC (part 10) (h264), and from what I read, this should be supported by all major browsers.

My current HTML code is simply this:

<video width="100%" height="auto" autoplay controls>
    <source src="http://192.168.1.2/" type="video/mp4">
</video>

But this does not show anything. In both Chrome and Edge, I can see the video player with a spinning circle, and the F12 Network tab shows that some data is being downloaded from the stream (roughly 1 MB in 24 seconds, then it stops).

Firefox almost immediately shows a message No video with supported format and MIME type found, and downloads nothing. There is a warning in the console: HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource http://192.168.1.2/ failed. The stream response does have that content-type header, but I'm not sure if that would prevent playing it. I assume that Firefox is more picky than Edge and Chrome.

My question is: Is it actually possible to show streaming video in a video element? And if not, is there an alternative? I tried to use fetch and assign the result to video.src, but the first step already fails because of CORS restrictions. However, if this is a feasible approach, I could ask the owner of the stream to add support for that.

Berend
  • 780
  • 7
  • 19

1 Answers1

2

Yes, you can show streaming video in a video element, provided you're using a separate javascript library to demux the incoming stream (Some examples are hls.js and flv.js ). Really only iOS devices support live streaming in a native <video> element by itself (HLS video).

You can sort out what kind of stream is incoming by using ffprobe or maybe by looking at the Content-Type of the http request you're making. application/octet-stream is a generic content type, so I wouldn't be certain you're actually grabbing the real content in that request.

Lastly, you'll likely be dealing with CORS/mixed-content issues for anything live streaming (unless you're loading a mjpeg stream...which you aren't if you've got H.264 video). You'll need to get that sorted out.

Luke
  • 919
  • 5
  • 8
  • Thanks, very informative. It turned out that the container used is MPEG-TS, which apparently is not (widely) supported by browsers natively, but it looks like hls.js would take care of that too. – Berend Jan 11 '22 at 08:56