Comment on page

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 Stream
GitHub
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-quickstart
GitHub
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-quickstart
GitHub
How to Get Event Stream
Connect with WebSocket server that gets from API WebSocket
Response event websocket
{
  "analytic_id":"NFV4-FR",
}

Connect to Vanilla Websocket

Migration from Old Streamer to New Streamer

Last modified 1mo ago