# HTML5 Videostream in Dashboard (INSTAR IP Camera)

**URL:** https://discourse.nodered.org/t/html5-videostream-in-dashboard-instar-ip-camera/37337
**Category:** Share Your Projects
**Created:** [11 December 2020 06:52 UTC](https://discourse.nodered.org/t/html5-videostream-in-dashboard-instar-ip-camera/37337 "2020-12-11T06:52:48Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![mpxd](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mpxd/32/2028_2.png) [@mpxd](https://discourse.nodered.org/u/mpxd)
#### Post date: [11 December 2020 06:52 UTC](https://discourse.nodered.org/t/html5-videostream-in-dashboard-instar-ip-camera/37337/1 "2020-12-11T06:52:48Z")

</div>

# 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)](https://wiki.instar.com/Advanced_User/Website_Integration/HTML5_Stream_Full_HD_Cameras/) 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:

 ![HTML5_Node-RED_Dashboard_02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9a8321288b8d3117432f7769dcfe7033df116fa.png)

1. 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:

```bash
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

```

 ![HTML5_Node-RED_Dashboard_03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/3/c34ecb3d0643c8aa6809ea1dbf2bbfb10389ac46.png)

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**!

```auto
<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:

 ![HTML5_Node-RED_Dashboard_04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/097e5e508e3b155ae15e7b15dc2757f396a45bea.jpeg)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [9 February 2021 06:52 UTC](https://discourse.nodered.org/t/html5-videostream-in-dashboard-instar-ip-camera/37337/2 "2021-02-09T06:52:55Z")

</div>

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