Mobile First Camera App Template (HTML, CSS, JS and WebRTC)

A mobile first camera template that serves as a starting point for developing a computer vision, AI vision application. Completely web-based (HTML,CSS,JS). It uses WebRTC and is intended for Android 7/8 (Chrome) and iOS 11 (and higher).

Screenshot Mobile Camera Template

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.

Feel free to use it in your next Computer Vision or AI project.

Check out the Demo

Get the code on Github

Requirements

WebRTC is only supported on secure connections. So you need to serve it from https (You can test and debug in Chrome from localhost although (this doesn’t work in Safari).

Because it utilises WebRTC you need a recent (mobile) OS and browser. It should work on Android, Firefox and iOS11 and Safari 11.

Functionalities

– Fullscreen mode
– Take Photo
– Flip Camera (environment / user)
– Supports both portrait and landscape mode

Used Libraries

Used Assets

Good WebRTC resources

Credits and a link to this are always appreciated.

I’m always curious how people end up using my stuff, so feel free to contact me or send a tweet@kasperkamperman.

 

24-04-2018Categories Codelog, Computer Vision