I'm developing an application that processes images. Having a HTML front-end I have to capture images from the webcam (using video tag) and send them to the server continuously. Then images are going to be analyzed and when the objects are detected (x, y, z) points are going to be send back to the client.
I have 2 approximations now:
1.- Capture frames constantly (using an invisible canvas and previously loading there the frame) and send them to the server with Base64 encoding. (E.g Capture frames from video with HTML5 and JavaScript)
Pros:
- Easy to implement.
Cons:
- Very slow. Many images are going to be sent continuously and should be handled very fastly. (In this case images has to be saved when they arrive and deleted after processing)
2.- Send video stream and process all frames in the server.
Pros:
- Data is sent very fast.
Cons:
- Complex. I don't know how to implement it.
Any tips in how can I make it?
First of all you should not use Websockets because it is a workaround. You should better use WebRTC which will capture frames directly from a web cam, then it will encode frames in VP8 codec and send to server.
Therefore on server-side you can decode the picture using libvp8 and recognize desired objects. So all what you need is a server which is able to receive a WebRTC stream and access to the decoded picture for further processing.