Q: I found your instructions for integrating the video stream into the Node-RED Dashboard. The new Full HD cameras now support a HTML5 video stream. Is it possible to use it directly in Node-RED?
A: You can download a collection of files here that you can use to embed the HTML5 video stream from your camera into a web page. You can also use these files together with the Node-RED Dashboard.
To do this, activate the directory for static files (httpStatic) in the
settings.js file of Node-RED - in my case a directory was already set there
/data/api. You can choose any directory you like. Just make sure that the directory exists and Node-RED has access to this directory:
In this folder, create a new
/ui' subfolder, and copy the js' folder from the provided Zip Container to this folder:
api └── 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
Next you have to take one HTML Template Node (belongs to the Node-RED Dashboard Nodes) for each camera you want to include and fill it as follows:
Please note that each camera requires a separate instance of the player. 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
player6 in ALL places!
You can now see the h.264 video of all integrated cameras in your Node-RED Dashboard: