kevinGodell / mse-live-player

Testing ground for various video streaming techniques.
MIT License
43 stars 17 forks source link

Video won't play immediately on Internet Explorer. #2

Closed rkaalsdn closed 6 years ago

rkaalsdn commented 6 years ago

Hi I really appreciate you sharing this project.

I was having a lot of trouble trying to stream a rtsp input to HTML and this project helped a lot.

One problem I found was that when I try to stream to Internet Explorer, the video won't play right away. The time on the controls would keep ticking but the video is all blank.

I have to wait about 1~5 minutes until the video feed shows up. The video however is not in sync with the others and it is delayed by the amount I had to wait.

Is it an I.E thing that I has to buffer that much before it plays? or would there be a fix for it?

I haven't changed much of your code except the compare.js's database and the app.get part.

Also I am trying to not use the media source extensions but only playing with mp4 and m3u8.

Thanks in advance!

kevinGodell commented 6 years ago

Hi. Did it work ok in any other browser? I havent done much testing on internet explorer because I dont have windows 8 readily available, but the time I tried it, my 14 cameras streamed good.

If you can, see if that camera plays good on chrome, then we can deduce that it is the browser itself? I dont't have any buffering setup since my attempt was to make it as a live player only with no pausing or rewinding, etc.

The other thing to consider is the settings in your camera. If the segments are coming out in large duration chunks, then that is how they will be relayed to the browser. Can you view the m3u8 directly in browser and paste the contents here? I am curious about the size of the chunks and it should be shown there, I hope.

There are other things to consider, such as are the cameras local and on the same network as the server, or are we dealing with a remote location where bandwidth may be a factor. Let me know if you can discover any more details.

rkaalsdn commented 6 years ago

Thank you for the reply!

Everything works great on other browsers. Although on edge the mp4 would give me the same result as the I.E but playing with m3u8 is smooth. But of course I.E does not support m3u8 so I have no other choice but to use mp4.

Could you tell me how to get the results of the chunk size? You say that it should be show there but I'm kind of new to this stuff so I'm not sure where to look.

My rtsp stream is coming from a public cctv which anyone can have a look at but I do not have the control over the camera settings :/.

I also happened to notice there is stuttering when I use media source extensions on I.E and edge. However the video will show up right away, and because of this I'm guessing the problem leans more towards the chunk size not the bandwidth. Also I'm testing on my local machine so bandwidth shouldn't be much of a problem right? (i think)

But if you could tell me where to see the chunk size, I'll check and post it here.

Thank you!

kevinGodell commented 6 years ago

When viewing the video in browser after running the compare.js page, I think i have some links on right side that linked directly to m3u8 playlist. If you can view playlist file, it lists the duration of each segment. Also, if the link to the cam is public and you want to share it with me, I could test it from here and see what size the segments are .

About playing it as regular mp4, my illustration was to show how it is better to use media source extension INSTEAD of regular mp4. Unfortunately, playback like that would require you to do some javascript coding to detect video loading and trigger it to play, etc. I am not really 100% sure about the browser playback mechanism for internet explorer, sorry.

Let me know if I have misunderstood your situation.

rkaalsdn commented 6 years ago

Hi,

I downloaded the m3u8 from the link on the right side and the result is the following

EXTM3U

EXT-X-VERSION:7

EXT-X-ALLOW-CACHE:NO

EXT-X-TARGETDURATION:1

EXT-X-MEDIA-SEQUENCE:268

EXT-X-MAP:URI="init-n224.mp4"

EXTINF:1.101000,

n224268.m4s

EXTINF:1.004000,

n224269.m4s

EXTINF:1.022000,

n224270.m4s

I have several rtsp streams that i'm testing and I'll share all of the with you.

rtsp://streaming3.webcam.nl:80/n224/n224.stream rtsp://217.17.220.110/axis-media/media.amp rtsp://streaming3.webcam.nl:80/n319/n319.stream rtsp://streaming3.webcam.nl:80/n794b/n794b.stream rtsp://streaming3.webcam.nl:80/n325/n325.stream

The m3u8 result I got is the first rtsp stream from the list I gave you above.

I don't know much about browser playback at all so I guess I'll have to look into that. Right now I don't even fully understand your code so maybe I'll first study your code more thoroughly haha.

Right now I went with the option of having a button which would toggle the video tag so that first it would try the m3u8 and mp4 videos and if the video is blank I'll give the user the option to press the button and swap it to the media source extension version. Although it will be stuttering for I.E, at least they can see the video. But I think it needs some fixes as the connection persists after switching from the mp4 video to media source and the client is asking for two streams of the same video.

Thank you!

kevinGodell commented 6 years ago

hi @rkaalsdn I was busy recently starting a new app. It probably wont look good on internet explorer as they probably don't support css grids, but maybe you can try it. For now, it only works with rtsp input, but soon i will add more input types. It will take the single stream and output 6 different video streaming types for comparison that are compatible in most modern browsers. The binaries for the project are found here https://github.com/kevinGodell/rtsp-cam-tester/releases

kevinGodell commented 6 years ago

There has been no activity here for a while so I am going to close this. Your can check out the latest version of ffmpeg-streamer in action at http://kevin.shinobi.video:3000/