Create your own visualization

Sample Code - Vanilla Dashboard

Source code of Vanilla Dashboard to help you understand how Vanilla works. You can also customize it.

GitHub - nodefluxio/docker-stream-quickstart: Built-in dashboard for Visionaire Docker StreamGitHub

Get Restream Visualization

1. Exclude Crowd Estimation

Import visualstreamer.js, then apply nodeflux-streamer class on <div> component. This <div> component must have fixed width and height. Add stream URL to data-url attributes. Component example:

<div 
    class="nodeflux-streamer" 
    data-url="http://127.0.0.1:4004/mjpeg/0/de2ea3d628ca1034/NFV4-FR" 
    style=" 
    width: 569px; 
    height: 320px">
</div>

docker-stream-quickstart/visualstreamer.js at main · nodefluxio/docker-stream-quickstartGitHub

2. For Crowd Estimation

Import heatmap.min.js, then put with visualstreamer.js in the same folder.

docker-stream-quickstart/heatmap.min.js at main · nodefluxio/docker-stream-quickstartGitHub

How to Get Event Stream

• Connect with WebSocket server that gets from API WebSocket

• Response event websocket

{
  "analytic_id":"NFV4-FR",
}