Webcam to canvas or data URI with HTML5 and Javascript
10 years ago
This post has been sitting around unfinished since April so I thought I should finish it and get it out there.
In this post I am going to show how you can capture an image from a webcam via JavaScript and convert it to a Data URI which can then be saved in a database or displayed in an IMG tag.
Note: This is more of a proof of concept rather than a best practices example so the code is a bit messy and hacked together from various sources.
I have only tested this on Safari for iOS 6 and latest Chrome with a webcam. It may or may no work in other browsers.
All explanations for the the code and markup are in the code comments, so please read them for more detail.