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

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.

Code was updated 17th of May 2020 (some fixes for iOS 13.4.1)

Check out the Demo

Get the code on Github


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.


– 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 page 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.