VLC video on dashboard

Dashboard
1

Hi,

I managed to stream video as in this tutorial. How do i get it on nodered dashboard? I can’t run on browser http://localhost:8160. I can run view from other vlc player on my windows 10.

https://platypus-boats.readthedocs.io/en/latest/source/rpi/video/video-streaming-vlc.html

2

If is directly a mp4 video you can played directly on the browser with this template:

[{"id":"548ff659.084888","type":"ui_template","z":"328ae15f.d1f4fe","group":"ade11151.0d757","name":"Video link","order":2,"width":0,"height":0,"format":"<div height=\"70\" style=\"height: 70px;\">\n<a href=\"/video.mp4\" target=\"_blank\">Open video</a>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1180,"y":960,"wires":[[]]},{"id":"ade11151.0d757","type":"ui_group","z":"","name":"Video Capture","tab":"fdb20eab.f5e4f","order":6,"disp":true,"width":"6"},{"id":"fdb20eab.f5e4f","type":"ui_tab","z":"","name":"NVR","icon":"videocam","order":9}]

If is a video from a camera then I’m using motioneye to push it to an http and then use another different template.

Regards

3

Hi,

As I have 4 TV streams, please could someone help me to present them all (ideally have all them running at the same time, (not as a link) but with an option to switch the sound to choose which one of the 4 can be heard.

I assume it’s a slight modification of the above code, and maybe requires frames to be added, but as I’m not familiar with coding, I’m struggling to work it out,

http://192.168.1.217:5004/tuner1/v1?transcode=internet240
http://192.168.1.217:5004/tuner1/v2?transcode=internet240
http://192.168.1.217:5004/tuner1/v3?transcode=internet240
http://192.168.1.217:5004/tuner1/v4?transcode=internet240

Many thanks

4

Hi @nodecentral,
You will need to give more information about the TV streams (audio & video), otherwise people won't be able to assist you.
And also explain a bit what you have tried already. Because there are a number of other discussions about video in the dashboard, so I assume you have already searched these to find a solution?
Bart

5

Hi @BartButenaers

Thanks for responding, I wasn’t sure what else to add, but here goes - I have a Quattro Tuner HDHomerun device, which give me 4 separate streams of TV - and (as an example) I can see any one in VLC via the urls I posted above/earlier. (My goal is to make the streams visible on the dashboard)

What, i’ve tried so far is as follows, which i’ve borrowed from other posts/forums - i’m doing all of this on an iPad if that’s in anyway a factor.

(1)

<iframe style="width:600px; height:375px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://192.168.1.217:5004/tuner1/v4?transcode=internet240"></iframe>

(2)

<!DOCTYPE html>
    <html>
    <title>VLC Mozilla plugin test page</title>
    <body>
    <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
       width="320"
       height="240"
       target="http://192.168.1.217:5004/tuner1/v4?transcode=internet240"
       id="vlc" />
    <script type="text/javascript">
    <!--
    var vlc = document.getElementById("vlc");
vlc.audio.toggleMute();
//-->
</script>
</body>
</html>

Neither of them result in an stream appearing on the dashboard.

6

The problem is that the URL's are only accessible in your local network, so we cannot get any information from them. Would like to know what kind of data they offer (mp4 ...).

VLC supports lots of codecs. It might be useful to navigate to the following menu:

image

There you can see some extra information:

image

Then you can share a screenshot from the 'codec' tabsheet with us ...

7

This looks to be where using an iPad lets me down, as I don’t seem to have that option on the iPad version of VLC.

If it helps, I did a bit of surfing and it’s looks like mpeg TS could be it, if that helps ?

8

what happens if you try those url's directly in the browser?

9

When I try it on the iPad (iOS Safari) , it seems to download an mpg file of the stream, but the same URL plays the stream fine/real time in VLC, hence I wanted to post here within this thread to see how I could maybe make use of VLC, with NR on the iPad.

image
3082CC81-9BFE-4E34-A18B-2C8FE1565542.jpeg1645×962 77.2 KB

10

For iOS you need a stream:

  • H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats
  • H.264 video, up to 768 Kbps, 320 by 240 pixels, 30 frames per second, Baseline Profile up to Level 1.3 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats
  • MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats

The "normal" hdhomerun does not provide H.264 encoding, only the "Extend" version. The code used above only works for desktops and/or browsers that support plugins, safari on iOS does not (not VLC anyway).

VLC app has an decoder/encoder build in, which is why it plays.

11

Never used mpeg-TS, only mjpeg. Since you cannot decode it in your browser, my best guess is that you need to decode it inside Node-RED (before you send the images to the dashboard) using:

  • ffmpeg (via Exec-node)
  • jsmpeg for a full javascript solution (i.e. without any dependencies that you need to install). But will need some programming skills to get this integrated into Node-RED ...
  • Others ?

[EDIT] You can also use jsmpeg in your browser (i.e. the dashboard), if you don't want to decode the image in your NodeJs (server-side) Node-RED flow.

But I'm afraid I cannot assist you further with this ...

12

jsmpeg for a full javascript solution (i.e. without any dependencies that you need to install).

wow that is some impressive stuff, wasm is coming along.

13

Many Thanks all,

That jsmpeg option does indeed sound interesting, I followed the link, but it looks a little over my head too, hopefully someone on this forum is already using it, or something similar.

14

Never used it, but the example (on the above link I gave you) looks 'very' short to me...

Normally you should put the the jsmpeg.min.js file somewhere in your Node-RED setup, but for a first test you could point your ```script```` tag directly to Github (to download it from there).

So I think you have to put the following in a dashboard template node:

<script src="https://raw.githubusercontent.com/phoboslab/jsmpeg/master/jsmpeg.min.js"></script>
<div class="jsmpeg" data-url="http://192.168.1.217:5004/tuner1/v1?transcode=internet240"></div>

Not sure whether it matters that you are playing a infinite stream, instead of a finite file. You can see on his readme page that he supports 'progressive' mode ...

15

many thanks @BartButenaers

I’ve tried the above and also a slight variation, with the jsmpeg.min.js downloaded locally (which on the Docker i’m using looks to be "/usr/src/node-red", but sadly no joy either with that option.

<script src="/jsmpeg.min.js"></script> <div class="jsmpeg" data-url="http://192.168.1.217:5004/tuner1/v1?transcode=internet240"></div>

Here’s the dashboard UI i’ve created, where i’m looking to show the 4 separate TV streams.

image
image2732×580 154 KB

16

I assume you are pretty sure that your dashboard web app can load the file from there?

Do you have any errors in the browser's console log or errors in the 'network' traffic of your browser? Perhaps the min.js file cannot be loaded, or something else that is going wrong ...

17

I’ll admit, I’m not sure - it’s only an assumption as that’s the location that seems to be the default folder used when I want to write to or read local file content.

I got that by using the Exec node and sent ‘pwd’ to tell me my current Working Directory, when using Node Red.

18

Did you try it with the code from @BartButenaers suggestion (ie the file from github directly) and did that work ?

19

I'm not quite sure whether your dashboard can access that folder? But anyway, would like to start with a simple case. Just try to load the library from the internet. Because when that library cannot decode your stream, we are back to zero anyway ...

20

Hi @BartButenaers

Sorry for not being clearer earlier, i’ve tried both variations (internet and local) but neither seem to return any streams via the dashboard.