HTML5 Videostream in Dashboard (INSTAR IP Camera)

[mpxd]

HTML5 Videostream from your IP Camera

Bevore I was only able to add JPG Images or an MJPEG Stream to the Node-RED Dashboard. But INSTAR recently published a set of Javascript files (webassembled FFMPEG) to bring their cameras h.264 video stream in line with Browser requirements.

Issues

1. Audio does not work in Safari - Chrome works fine.
2. The video streams keeps running until you close the browser tab. Which is a little bit annoying, as the videos do need a lot of CPU power.

I think both issues are related - the script contains a function to start and stop the video stream manually. I believe Safari (possibly also Firefox) block audio on automatically started video streams. I guess I will need to add a button to manually start and stop the video.

Setup

1. What I have so far - I added an HTML Template Node for every camera:

2. I added the HTML code provided by INSTAR and copied the JS files into my Node-RED static directory (you need to create a sub directory called /ui) so I can link them into the page:

httpStatic
└── ui
   └── js
      ├── commonff.js
      ├── decworker.js
      ├── g711.js
      ├── hi_h264dec.js
      ├── libffmpeg.js
      ├── libffmpeg.wasm
      ├── NetThread.js
      ├── pcm-player.js
      ├── video-player.js
      └── webgl-player.js

One pitfall here is that the player variable and the activeVideo ID has to be unique for every camera. The following is the example of my 5th camera, which I added in Node-RED. Accordingly, the canvas has the ID activeVideo5 and the player has the name player5. For the next camera I could copy this template node, but had to change these names to activeVideo6 and player6 in ALL places!

<script type="text/javascript" src="js/commonff.js"></script>
<script type="text/javascript" src="js/video-player.js"></script>
<script type="text/javascript" src="js/webgl-player.js"></script>
<script type="text/javascript" src="js/pcm-player.js"></script>
<script type="text/javascript" src="js/g711.js"></script>

<!-- this is the video the video element -->
<canvas id="activeVideo5" width="1280" height="720"></canvas>

<script>

    var cam_host     = '192.168.2.20'; // DDNS or local ip
    var cam_port     = 80; // http port
    var cam_user     = 'admin'; // credentials for guest account recommended
    var cam_pass     = 'instar'; // credentials for guest account recommended
    var cam_stream   = 13; // 11 = FullHD; 12 medium res, 13 small res
    var canvas = document.getElementById("activeVideo5");
    var player5 = null;

    function startvideo(cam_host, cam_port, cam_stream, cam_user, cam_pass){
        // init video player5
        player5 = new HxPlayer();
        self.player5.init({canvas:canvas,width:640,height:352});
        // play video
        player5.playvideo(cam_host, cam_port, cam_stream, cam_user, cam_pass);
    }

    function stopvideo(){
        // stop video
        player5.stopvideo();
        player5 = null;
    } 

    // initialize and play video
    startvideo(cam_host, cam_port, cam_stream, cam_user, cam_pass)

</script>

Node-RED Dashboard

You can now see the h.264 video of all integrated cameras in your Node-RED Dashboard: