RTSP security camera in uniGUI

[lfgarrido]

Hey guys I trying to make uniGUI reproduce RTSP (Real Time Streaming Protocol) common in IP Security Cameras or DVRs

My first attempt was take a snapshop from RTSP url that gave me a jpg as return, and then I could reproduce like a video with a ajax.

But not every IP Camera or DVR have a snapshot function, so I decided to use FFPMEG for convert RTSP to m3u8

 

Server execute a comand like:

ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://192.168.15.30:554/11 -flags +cgop -g 30 -hls_flags delete_segments .\stream.m3u8

 

And then I have streamX.ts files, where X is constant updating every segment like [stream1.ts, stream2.ts, stream3.ts, stream4.ts, etc...]

 

In ServerModule > Custom Files > Add https://cdn.jsdelivr.net/npm/hls.js@latest

In Server Module Create

procedure TUniServerModule.UniGUIServerModuleCreate(Sender: TObject);
begin
  MimeTable.AddMimeType('m3u8', 'application/x-mpegURL');
  MimeTable.AddMimeType('ts', 'video/MP2T');
end;

 

In a UniHTMLFrame I put this:

<video id="video" autoplay="true" controls="controls"></video>
<script>
   if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        hls.loadSource("files/stream.m3u8");
      });
   }
</script>
 

But uniGUI cannot recognize update stream.m3u8 update, I mean streamX.ts changes name every time.

It work just for a couple moment as show below

 

[lfgarrido]

The problem is that I can play only 10 seconds using uniGUI.

Please pay attention in:

 hls.loadSource("files/stream.m3u8");

If I change for another internal webserver like apache (wamp) it works for example:

 hls.loadSource("http://localhost/rtsp/stream.m3u8");

or another online stream like:

 hls.loadSource("https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8");

 

I created a simple test case attached, and I will appreciatte any help

You will need to put ffmpeg.exe  in /files (from https://www.ffmpeg.org/download.html)

 

 

uniRTSP.zip

[lfgarrido]

Sorry to insist but I really need it.

Can anyone tell me why I can't see more than 10 seconds of video through uniGUI?

I appreciate any help @Sherzod @Farshad Mohajeri

[Sherzod]

On 5/24/2020 at 12:34 PM, lfgarrido said:

I created a simple test case attached, and I will appreciatte any help

OK we will try to analyze. 

[Sherzod]

9 hours ago, lfgarrido said:

Sorry to insist but I really need it.

Can anyone tell me why I can't see more than 10 seconds of video through uniGUI?

 I appreciate any help @Sherzod @Farshad Mohajeri

Hello,

You should use stream player I guess.

[lfgarrido]

6 hours ago, Sherzod said:

Hello,

You should use stream player I guess.

Thanks for your reply, I already using a stream player from https://cdn.jsdelivr.net/npm/hls.js@latest

Also I'm using FFMPEG for convert RTSP to .m3u8 list and .ts files that can be played on this HSL.JS video stream player.

My problem is when I set resouce video to /files uniGUI directory > hls.loadSource("files/stream.m3u8"); I just can play only 10 seconds.

But if I set resource video to some other wamp/apache like hls.loadSource("http://localhost/rtsp/stream.m3u8"); or other online path it work perfectly

The FFMPEG parameters that I using, generate a new .ts file per second keeping a list with 10 files each cicle.

But when I start this Stand Alone uniGUI project, I just can play only 10 files, even the FFMPEG keeping update the new files uniGUI cannot see the new ones.

[Sherzod]

4 hours ago, lfgarrido said:

My problem is when I set resouce video to /files uniGUI directory > hls.loadSource("files/stream.m3u8"); I just can play only 10 seconds.

There may be a problem with caching, more needs to be analyzed.

[vlkc]

hi, disable cache in browser

[Fred Montier]

On 8/20/2020 at 12:47 PM, vlkc said:

hi, disable cache in browser

HI

What cache parameter did you disable and work for?