Visionaire
Search…
Developer Guide

How to Get Restream Visualization

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:
1
<div
2
class="nodeflux-streamer"
3
data-url="http://127.0.0.1:4004/mjpeg/0/de2ea3d628ca1034/NFV4-FR"
4
style="
5
width: 569px;
6
height: 320px">
7
</div>
Copied!

How to draw bounding box

The bounding box will automatically be drawn when displaying visualization. Because the bounding box will be included in the header at stream response as SVG.

How to get event stream

    Connect with websocket server that get from API websocket
    Response event websocket
1
{
2
"analytic_id":"NFV4-FR",
3
"image_jpeg":"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",
4
"node_num":0,
5
"pipeline_data":{
6
"confidence_detection":0.9935107827186584,
7
"face_id":"97596758003023873",
8
"similarity":0.05809289216995239,
9
"status":"UNKNOWN",
10
"variation":"10847857150729923139"
11
},
12
"primary_text":"UNKNOWN",
13
"secondary_text":"",
14
"stream_address":"rtsp://10.7.2.50:554/VOD/4-Polda_Bali_GATE_MOTOR_001_2019-08-01-15-06-53_2019-08-01-15-34-26_cut1.mp4",
15
"stream_id":"1ad1feaabecbfa3c",
16
"timestamp":1607421893
17
}
Copied!
Last modified 9mo ago