How to activate a webcam from a desktop browser
In this article, we will explain a way to allow users to take a picture using their webcam stream on a web page through their browser. Please note that this method only works on modern browsers, including Chrome, Opera and Firefox.
Desktop browsers VS mobile versions
Desktop browsers, at this time, have fallen way behind their mobile versions in terms of integration and interaction with devices such as webcams. As a matter of fact, there is no way yet for a desktop browser to access anything else than the computer explorer using a file input while on a mobile it would ask which application to use that would be able to send a picture (like in the screenshot below).
Desktop browsers can also handle webcam
Happily for us, some browsers (such as Chrome, Opera and Firefox) are closing up the gap between mobile and desktop. They provide an easy way to handle webcam stream via the “getUserMedia” API.
Let’s note that this API, starting from Chrome 47, requires a secure HTTPS connexion to work. In that regard, an SSL certificate (such as Let’s Encrypt) will be needed.
How to implement webcam in desktop web page?
Let’s take the following example of a basic HTML page with Bootstrap for page layout :
Now, let’s implement the webcam API to play it into a video HTML tag:
Since we require a computer device, a pop-up will ask the user to allow the device to be used. If the user allows it, we are now able to take a snapshot from this video stream and render it into a canvas. Let’s not forget to check if the stream has data by using the readyState before drawing :
Do you want to know more about Wassa?
Find us on:
