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:
<divclass="nodeflux-streamer"data-url="http://127.0.0.1:4004/mjpeg/0/de2ea3d628ca1034/NFV4-FR"style="width: 569px;height: 320px"></div>
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.
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}