Home / Tutorials / Camera and Video Control with HTML5

Camera and Video Control with HTML5

Being able to access the camera within the browser without using third party software is an incredible advancement.  Paired with canvas and a bit of JavaScript, the camera has become quickly and easily accessible.  Not only it the camera accessible, but since canvas is ultra-flexible, we’ll be able to add sexy Instagram-style image filters in the future.  For now, however, simply accessing the camera in our browser moves us miles ahead.  Have fun taking images within your browser!

The method for getting access to camera was initially navigator.getUserMedianavigator.mediaDevices.getUserMedia.

Browser vendors have recently ruled that getUserMedia should only work on https: protocol. You’ll need a SSL certificate for this API to work.

Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API, providing developers access to the user’s camera.  Let me show you how to get simple camera access from within your browser!

The HTML for Camera Control

Please read my note about the HTML structure below:

Each of these elements should be created once confirmation of camera support is confirmed, but for the sake of this tutorial, I wanted to show you what the elements look like with basic HTML.  Do note that the dimensions we’re working with are 640×480.

The JavaScript for Camera Control

Since the HTML elements above are already created, the JavaScript portion will look smaller than you think:

Once it’s been established that the browser supports navigator.mediaDevices.getUserMedia, a simple method sets the video element’s src to the user’s live camera/webcam.  Calling the play method of the video then starts the element’s live streaming video connection.  That’s all that’s required to connect your camera to the browser!

Taking a photo is only marginally more difficult.  Simply add a click listener to a generic button and and draw an image from video!

 

About cmadmin

Web Developer & Designer | Android App Developer

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH