Ui_mp4frag in uibuilder

I have just got back into my project for creating a cctv and power usage home monitoring solution and got my head around the absolutely brilliant work that @kevinGodell has produced with the mp4frag and ui_mp4frag nodes.

I have managed to get a stream from rtsp working in the ui after reading through the details on an earlier thread from last year year but as a newbie to node-red still can't find an answer on how to hook this up using uibuilder which I am using to show other information also.

Has anyone done this and can give me a clue which will get me going in the right direction?

many thanks.

Never done anything like that myself. Have you looked at this code example for showing a stream using Vue using an M3U8 playlist?

M3U8 playlists using hls.js/vue.js - CodeSandbox

I have been waiting for someone to try using mp4frag without ui_mp4frag....

As you probably already figured out, node-red-contrib-ui-mp4frag is dependent on node-red-dashboard, while node-red-contrib-mp4frag is not.

Depending on which browser you are targeting, there are a couple of options to get quick results. For safari on desktop or mobile, you can point a video element src directly to the hls.m3u8 path. If using firefox or chrome, you can set the src to video.mp4 (not recommended for multiple video streams). The best results would be to include an external library, possibly hls.js, and use it to handle the hls.m3u8.

As for the socket,io video player that is incorporated into ui_mp4frag, unfortunately I have not had a chance to separate that code into its own lib so that it could be used elsewhere.

If you manage to get the hls.m3u8 to play, take care when setting the size and extra values. i would start off with size 10 and extra 5. 10 segments will be referenced in the playlist, while 5 past segments will be held in memory. This is because sometimes hls.js player is slow to request a segment that may already be off the playlist.


Thanks for such a swift response and giving me the details of what how to bolt everything together. I'm using Chrome on a Raspberry Pi in this instance but also looking to give it a go on my Jetson Nano later.

I have managed to get a stable stream from an IP Cam RTSP feed using your example flow and settings in the Exec node for ffmpeg and then created a very quick and dirty instance of uibuilder so that I could establish it would work ok.

I have created two video elements in the uibuilder index.html, one is using hls.js to load the source "../mp4frag/c789707b.f70c5/hls.m3u8" (from my ip can rtsp stream via mp4frag) with a simple scriopt in the index.js and the other a standard html5 video tag with the src pointing to the bugs example mp4frag video.mp4.

Both are running well and although early days in testing things a great success so far so a massive thank you in helping me find a working solution and the obvious time you have invested in getting this so far.

1 Like

If you are using the exec node in spawn mode, then you may be interested in a node made specifically for using ffmpeg, Node-red-contrib-ffmpeg-spawn. It is currently experimental and the documentation is not perfect, but it may suit your needs.

1 Like

OK thanks I'll take a look.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.