I am trying to build a web-page that capture the user's media stream ( take a picture of ID card and such documents..) on phone and on computers, then allow the user to crop the image in order to remove unwanted parts, then send the picture of the document to an ocr server to be treated.
I know this is a lot of work. I have found many page that work on computers but not om my phone ( android) I couldn't figure the crop part yet and I don't know how to send it to the server of the website I would like to use to OCR it.
If you have anything that will help I am eternally grateful
getUserMedia() works inconsistently on different browsers and devices, as you have discovered. (Compatibility is a notorious pain in the neck in this area.) You can use the sample at this URL to test the basic snapshot functionality. https://webrtc.github.io/samples/src/content/getusermedia/canvas/
That example code places its result in an ordinary 2d canvas (canvases actually work on multiple browsers.)
I won't attempt to describe the cropping operation here, other than to say it works with canvas elements, and places its result in another canvas. You can find plenty of implementations with a simple web search.
In Javascript, once you have the croppedCanvas with the desired image, you use toBlob() like this:
var quality = 0.8
croppedCanvas.toBlob(
function callback (blob) {
/* POST the blob here */
},
'image/jpg',
quality);
In the callback you get a Blob object containing the encoded (jpegged) image. You can then, from within the callback, POST it to your server with an ajax or fetch operation.
I fear your question covers many topics, so I haven't written sample code for everything. But this should get you started. (I had to crawl through all this recently myself, and it is a struggle to figure it all out.)