HTML5 Videostream from your IP Camera
- Audio does not work in Safari - Chrome works fine.
- 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.
- What I have so far - I added an HTML Template Node for every camera:
- 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
player6 in ALL places!
You can now see the h.264 video of all integrated cameras in your Node-RED Dashboard: