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!

Advanced Installation

APIs

Last modified 9mo ago

Copy link

Contents

How to Get Restream Visualization

How to draw bounding box

How to get event stream