We are getting access to camera using getUserMedia() using different MediaTrack constraints and settings and then take a picture using takePhoto(). As of now, we are displaying the image on a canvas. It would be useful to save the image somewhere (maybe filesystem, like WICG's nativefilesystem) and then we can browse through the gallery. For filters/ we display using cv.imshow(), so we need to explore cv2.imwrite('result.png',img) on browsers.

Similarly for loading images from gallery to camera app, atleast on Android we can use the File/Photo Picker or the Photo/Video Picker which Kenneth reported.

• Barcode / QR code scanning
  { ZBar / Zxing } needed ?

• Document Scanner - Page/Book/ ID / receipts
  {edge_detection -> find contour -> four_point_transform }

• CreditCard Scanner
  simple OCR {alpha numeric} no need to manually enter CC details.

• OCR / Text Recognition
  { tesseract has a JavaScript fork}

The Shape Detection API can be a good reference point as we are trying out similar things using OpencvJS+WASM.

Thank you for this great project !

The image processed by the docScanner has lower resolution compared to the standard document scanners

Do you think if we tweak the Opencv functions would enhance the quality of the processed image ?

When clicking the camera button, a small round photo appears at the bottom left of the frame.
If I click that, nothing happens.
Would be nice to be able to save them.

Also:
it would be good to implement also a pinch to zoom.

Front-end assets like HTML, CSS and especially images are getting bigger in size and number. I guess we should start to modularize and use imports. Webpack's dependency graph can then be used to split code and enhance lazy loading. Rollup looks a good choice also. Let's start using the ES6 modules.

Let's make a modern web app from just some bunch of HTML and JS code. Let's PWA -ify this, and use Lighthouse and other Audit tools to check the metrics.

It'd make sense to merge the exposureTime and focusDistance examples together, provide two <input type="range"> controls that operate on the same media stream.

We have a lot of images which are downloaded from the internet, but we should cache them for a situation when there might be low or no connectivity. Maybe give Workbox a try. If we decide on Webpack, I guess there is workbox-webpack-plugin and we can preload the app-shell.

WebCamera needs to be updated to work with an opencv build that uses the latest emscripten versions. We've got a fork with a quick fix for that, have a look here. With the new opencv build, cv is a promise that needs to be resolved first.

its working fine from local .
but when we are host it on server so it's not able to start client web cam.