Source code of Vanilla Dashboard to help you understand how Vanilla works. You can also customize it.
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:
Import , then put with visualstreamer.js in the same folder.
Connect with WebSocket server that gets from API WebSocket
Response event websocket
Library content :
How yo use new visual streamer :
Get the new library from this link : https://github.com/nodefluxio/docker-stream-quickstart/tree/main/client/public/library/jsmpeg
Copy the library to your public folder so the path will be ( public/library/jsmpeg )
Open index.html on your public folder
Import file jsmpeg.min.js inside head tag
And then import file jsmegVisualStreamer.js after body tag
After that you can use the component, component example :
Notes :
Class nodeflux-stremer is required
For MPEG1 we are using websocket protocol instead http protocol
And then for starting visualisation you can use this command :
Library API :
ws://{ip}:{host}/mp1streamer/:node_num/:stream_id/:analytic_id
param:
- node_num = node number
- stream_id = stream id
- analytic_id = analytic id
query:
- preset: only choose 1 preset
- 240p
- 360p
- 480p
- 720p
- 1080pws://{ip}:{host}/mp1streamer/:node_num/:stream_id/:analytic_id
param:
- node_num = node number
- stream_id = stream id
- analytic_id = analytic id
query:
- logic = can only choose 1 logic when showing the stream
- counting
- dweling
- densityws://{ip}:{host}/mp1streamer/:node_num/:stream_id/:analytic_id?preset=320p&logic=counting<script src="/library/jsmpeg/jsmpeg.min.js"></script>showVisualisation
This function will be use for starting visualisation component
stopVisualisation
This function will be use for stop all visualisation component
<div
class="nodeflux-streamer"
data-url="http://127.0.0.1:4004/mjpeg/0/de2ea3d628ca1034/NFV4-FR"
style="
width: 569px;
height: 320px">
</div>{
"analytic_id":"NFV4-FR",
}<script src="/library/jsmpeg/jsmpegVisualStreamer.js"></script><div
class="nodeflux-streamer"
data-url="ws://127.0.0.1:4004/mpeg1/0/de2ea3d628ca1034/NFV4-FR?preset=720p"
style="width: 569px; height: 320px">
</div> showVisualisation();
3. Make sure to copy all the #canvas styling, image for preview can be but inside of the canvas element as children component. for example:
4. Call initialCanvas function on windows onload, or when there are any ROI Type change
initialCanvas needs two parameters, namely for callback and roi_type respectively. callback will be called after region or line created, returning object with values:
this function will remove all the lines. accepting callback params for user to be able to call their own function when resetting all lines and region
receive id as params. this id can be filled with lineNumber from the initialCanvas callback. onDeleteLine will be used to delete lines, while onDeleteRegion will be used to delete area/region.
receive id as params. this id can be filled with lineNumber from the initialCanvas callback. only applicable to roi_type line. will reverse the line direction
<div id="canvas">
<img src={source} />
</div>{
points: array_of_coordinates,
area: name_of_area,
color: color_of_lines,
lineNumber: index_of_roi (starts from 1)
}
