A HTML5, JS, CSS Camera interface template. Feel free to use it in your next Computer Vision or AI project.
Release 17-05-2020: Replaced DetectRTC with own code to solve a bug on iOS 13.4.1
I like to experiment with Computer Vision and AI API's (like Azure Cognetive Services, Google Cloud Vision, IBM Watson) to see if I can utilise them for some ideas.
The most easy way to test those scripts and APIs them is by directly making a photo and sending image data to the API/script, instead of uploading files. I didn't find a fast mobile first camera template for HTML5 as a starting point for my prototypes, so I developed one myself. The interface setup is mainly inspired by the standard Android and iOS Cameras.
The template doesn't do anything with the image(canvas) data yet, I'll leave that up to you. If you need help with integrations or app development (PHP, Vue), feel free to contact me.
Feel free to use it in your next Computer Vision or AI project.
WebRTC is only supported on secure connections. So you need to serve it from https. You can test and debug in Chrome from localhost though (this doesn't work in Safari).
A recent OS and browser. It should work on recent Phones and OS-es. If it isn't, please let me know (issue) (including a suggestion to fix it). Also add the debugging info in the console.
Check the demo