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:

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

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

{
"analytic_id":"NFV4-FR",
"image_jpeg":"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",
"node_num":0,
"pipeline_data":{
"confidence_detection":0.9935107827186584,
"face_id":"97596758003023873",
"similarity":0.05809289216995239,
"status":"UNKNOWN",
"variation":"10847857150729923139"
},
"primary_text":"UNKNOWN",
"secondary_text":"",
"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",
"stream_id":"1ad1feaabecbfa3c",
"timestamp":1607421893
}