How to draw a bounding box in a video around a person or object using JavaScript and MIP SDK Mobile?

MIP
, , ,
1

I have an AngularJS application and I am using MIP SDK Mobile. I am integrating my app with analytical video using SavVi from Agent VI. SavVi sends me the data of a generated alert, including the coordinates of the polygons that I want to draw in the video obtained through Milestone.

My question is how to draw a bounding box in a video around a person or object using JavaScript? The following image shows an example of what I want to show in my AngularJS application:

https://imgur.com/U1aUhG0

I know there is an example called BoundingBoxMetadataProvider, but in this case I need an example with JavaScript code.

Does anyone have any idea how to draw the bounding box in this case? Where could I find a example?

Thank you.

2

Hi Aimee,

If you already has the information about the bounding box, drawing over the video is not a complex task.

In general you you should have ‘Canvas’, get 2D drawing context and draw.

You could find inspirations at:

https://www.w3schools.com/tags/canvas_rect.asp

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

https://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/

https://stackoverflow.com/questions/26902084/html5-canvas-how-to-draw-rectangle-over-image-in-canvas

You most probably already do have a canvas, where you present your image of the video.

If you do not have the bounding box will be a little bit harder, as you should fetch analytics event and/or alarm in order to get them.

Alarms are possible to be received from the MoS.

3

Hi Petar,

Thanks for answering one of my questions again, I really appreciate it. The links you gave me were very useful. You were right, I already had a canvas to present the video image so I used a second canvas to draw the bounding box. I am a beginner in frontend technologies and did not know about the existence of the HTML canvas element and the possibility of drawing on it via JavaScript.

4

@Lorraine Rodriguez​ Hi Aimee, I also have the same requirement as yours.

Would you mind sharing that how you implemented it?

It would be great help to me.

Thanks in advance.