So...while the rest of the world is getting upgraded to browsers that support native webcam access, now is a great time for you to get ahead of the program and learn all about it. By the time you reach the bottom of this page, you will have learned how to take your webcam's video stream and display it using only some HTML and Java Script. Before proceeding further, let's first take a look at an example that is identical to what you will be creating.
If you are on a browser that supports the function, you have granted permission for your browser to access the webcam, and you are not on a mobile device like an i Pad, i Phone, Android-based phone, etc.
In cases when there is an error in getting the video stream or the user refused to give your code permission to access the webcam, the error callback will get called.
In our case, that is handled by the As you can see, I didn't flesh out what the behavior would be. So, there you have it - a look at how you can access a user's webcam video stream and display it in the browser.
If this sounds pretty straightforward, that's because it actually is pretty.
Let's put all of this straightforward English-sounding description into HTML and Java Script in the next section.
This inability to natively access the webcam without relying on 3rd party components was certainly a gap in the HTML development story. The W3C has been attempting to fill this gap by encouraging browser vendors to implement the proposals outlined in the Media Capture and Streams spec.
Because accessing the webcam natively is a recent introduction, check out caniuse's statistics to see the level of support it has among the major browsers.) In writing this tutorial, I used the latest version of Google's Chrome where everything works swimmingly.
In this section, let's go ahead and display our webcam data to the screen.