VisionAIre
Search
K

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.

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>

2. For Crowd Estimation

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

How to Get Event Stream

  • Connect with WebSocket server that gets from API WebSocket
  • Response event websocket
{
"analytic_id":"NFV4-FR",
}