1

I'm trying to display a continuous video stream (live-stream) in a browser.

Description:

My client reported a video stream doesn't work in the Chrome browser. I thought it will be an easy case, I even tried to write a demo, to prove streaming should be available with just HTML5 native video tag: https://github.com/mishaszu/streaming-video-demo

No problems with random video but: the particular video stream on client-side doesn't work. With html code:

<video id="video-block" width="320" height="200" autoplay>
  <source src="url/to/my/video" type="video/mp4">
</video>

it shows loader for a while and dies.

What I know about the stream:
1. Codec used: H264-MPEG-4 AVC (part 10) (avc1)
2. It's a live stream, not a file, so I can't use command like MP4Box from a terminal with it
3. Because it's live stream it probably doesn't have "end of file"
4. I know it's not broken because VLC is able to display it
5. I tried native HTML 5 video tag with all Media type strings (just in case to check all codecs for mp4)

As I mentioned trying different mime types didn't help, I also tried to use MediaSource but I am really not sure how to use it with a live stream, as all information I found made assumptions:
a) waiting for resolve promise and then appends buffer
b) adding the event listener for updateend to appends buffer

I think in the case of a live stream it won't work.

Conclusion:

I found a lot of information about how a streamed file might contain metadata (at the beginning of the file or at the end)... and I ended up with a conclusion that maybe I do not fully understand what's going on.

Questions:

What's the proper way to handle the mp4 live stream?
If a native HTML video tag should support the live stream, how to debug it?
I thought that maybe I should look for something like HLS but for mp4 format?

Mishaszu
  • 79
  • 7
  • Hello, what do you exactly mean with "*the particular video stream on client-side doesn't work*"? – k3llydev Nov 19 '19 at 21:48
  • `"I found a lot of information about how a streamed file might contain metadata (at the beginning of the file or at the end)."` This is false for live. for live, fragmented mp4 is used, where part of the metadata is at the beginning, or in a separate initialization fragment, and the rest is spread out per fragment – szatmary Nov 19 '19 at 23:10
  • @k3llydev sorry, maybe I made a bit confusion. The video is available only in the client's network, so I can't debug it locally (I have access to the client's Chrome browser, but I can't run it with a flag). By `doesn't work` I mean it doesn't play the video (also doesn't log any error or Http network error), it shows only black background. – Mishaszu Nov 19 '19 at 23:51
  • @szatmary I wasn't aware of that but still, if it's a live stream I guess browser should obtain an unknown number of fragments. Not sure why VLC is able to display it and the browser doesn't. Is it possible that the browser can't get metadata (is it possible to check if metadata exists from javascript lvl)? – Mishaszu Nov 19 '19 at 23:51
  • Without knowing what the URL is I can only guess. The browser needs additional information, usually encoded in a a manifest or playlist. If you don't know the format, there is no way for me to eaither, unless you can provide a public link. What is the file extension in the URL? mp4? m3u8? mpd? and what player are you using in the browser? hls.js? video.js? raw mse? – szatmary Nov 20 '19 at 03:27
  • It's a private link and I can't provide it. URL doesn't have any extension, I assumed it's `mp4` because of codecs used `H264-MPEG-4 AVC (part 10) (avc1)`. As I mentioned I use the native player with a native HTML5 video tag. I also tried hls.js but it seems it doesn't work. – Mishaszu Nov 20 '19 at 11:25

1 Answers1

1

I've went through the same - I needed to mux an incoming live stream from rtsp to HTML5 video, and sadly this may become non-trivial.

So, for a live stream you need a fragmented mp4 (check this SO question if you do not know what that is:). The is the isobmff specification, which sets rules on what boxes should be present in the stream. From my experience though browsers have their own quirks (had to debug chrome/firefox to find them) when it comes to a live stream. Chrome has chrome://media-internals/ tab, which shows the errors for all loaded players - this can help debugging as well.

So my shortlist to solve this would be: 1) If you say that VLC plays the stream, open the Messages window in VLC ( Tools -> Messages ), set severity to debug, and you should see the mp4 box info in there as the stream comes in, verify that moof boxes are present 2a) Load the stream in chrome, open chrome://media-internals/ in a new tab and inspect errors 2b) Chrome uses ffmpeg underneath, so you could try playing the stream with ffplay as well and check for any errors. 2c) You are actually incorrect about mp4box - you could simply load a number of starting bytes from the stream, save to a file and use mp4box or other tools on that (at worst it should complain about some corrupted boxes at the end if you cut a box short)

If none of 2a/2b/2c provide any relevant error info that you can fix yourself, update the question with the outputs from these, so that others have more info.

Rudolfs Bundulis
  • 11,636
  • 6
  • 33
  • 71