Jump to content

RTSP security camera in uniGUI


lfgarrido

Recommended Posts

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

 

image.thumb.png.f3591c262ae90a590d2d622b05783f14.png

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...
  • 8 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...