Accessing Your Webcam in HTML: The Example

12/12/2016 Accessing
Your Webcam in HTML5 | kirupa.com
Accessing Your Webcam in HTML
by kirupa | 9 December 2015
Accessing your webcam via your browser used to involve a...pardon the profanity, a plugin. That's right. In order to
connect to a webcam and gain access to its video stream, you had to rely on something primarily created in Flash or
Silverlight. While that approach certainly worked for browsers that supported plugins, it didn't help for the increasing
number of browsers that aim to be pluginfree. This inability to natively access the webcam without relying on 3rd party
components was certainly a gap in the HTML development story. At least, that was the case until pretty recently.
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. This spec defines, among various other things, how to communicate with a webcam
device using just a little bit of JavaScript. The good news is, despite its newness, various browsers have already
implemented support for accessing the webcam in their latest versions.
Note: Browser Support
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.
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. That's where this tutorial comes in. 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 JavaScript.
Onwards.
The Example
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 getUserMedia function, you have granted permission for your browser to access the webcam,
and you are not on a mobile device like an iPad, iPhone, Androidbased phone, etc. you should see a live version of
yourself (or whatever your webcam is pointing at) in the gray box below:
https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm 1/14
12/12/2016 Accessing Your Webcam in HTML5 | kirupa.com
If you do not give your browser permission to access the webcam, you will not see anything interesting. You will just see a
beautiful gray box with a finely crafted dark gray border.
Google Chrome and HTTPS
If you are on a recent version of Google Chrome, a security change was made recently where a webcam can only be
accessed if the content is served via HTTPS. You can still develop and test locally (or via localhost), but you won't be
able to test it "in the wild" unless you are on a secure HTTPS connection.
If you didn't see a permissions notification, you may have just overlooked it or dismissed it because it appeared when you
loaded the page. Different browsers do different things when they ask you for permission to use the webcam. For
example, here is what Chrome's prompt looks like:
If you denied permission accidentally (or intentionally), just reload this page to get a crack at acing this test again.
Overview of How This Works
To help make the code we will be writing...easier to write, let's look at an overview of how everything works using plain old
English. There are two components that do all the heavy lifting in getting data from your webcam displayed on your
screen. They are the HTML video element and the JavaScript getUserMedia function:
The video element is pretty straightforward in what it does. It is responsible for taking the video stream from your

webcam and actually displaying it on the screen.
The interesting piece is the getUserMedia function. This function allows you to do three things:
i. Specify whether you want to get video data from the webcam, audio data from a microphone, or both.
ii. If the user grants permission to access the webcam, specify a success function to call where you can process the
webcam data further.
iii. If the user does not grant permission to access the webcam or your webcam runs into some other kind of error,
specify a error function to handle the error conditions.
For what we are trying to do, we call the getUserMedia function and tell it to only retrieve the video from the webcam. I

will cover the microphone in the future! Once we retrieve the video, we tell our success function to send the video data to
our video element for display on our screen.
If this sounds pretty straightforward, that's because it actually is pretty. Let's put all of this straightforward Englishsounding
description into HTML and JavaScript in the next section.
Adding the Code
In this section, let's go ahead and display our webcam data to the screen. First, let's add the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background‐color: #666;
}
</style>
</head>

<body>
<div id="container">
<video autoplay="true" id="videoElement">

</video>
</div>
<script>

</script>
</body>
</html>
In a new document, go ahead and add all of the HTML and CSS that you see above. The important thing to note in this
snippet is the video tag:
<video autoplay="true" id="videoElement">

</video>
Our video tag has an id value of videoElement, and its autoplay attribute is set to true. By setting the autoplay

attribute to true, we ensure that our video starts to display automatically once we have our webcam video stream.
If you preview what your page looks like in your browser, what you will see will look as follows:
Yes, this looks pretty plain and boring now. That is because we haven't added the JavaScript that ties together our video
element with your webcam. We'll do that next!
Inside your script tag, add the following code:
var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.

if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
// do something
}
Once you've added this code, save your HTML document and preview your page. Provided you are on a supported
browser, you should see your webcam video stream after you've given your browser permission to access it.
Examining the Code
Now that you have a working example, let's go through our code linebyline to understand how the verbal overview you
saw earlier matches the code that you just added.
Let's start at the very top:
var video = document.querySelector("#videoElement");
We first declare a variable called video , and it is initialized to our video element that lives in the HTML. We get our

paws on the video element by using querySelector and specifying the id selector that targets it.

Next up is our code for accessing the getUserMedia API:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.
The getUserMedia function is currently vendor prefixed. This means that each browser will expect a different variant of

the function to actually work. To address this with the least amount of code, I took a technique I described in my Vendor
Prefixes and JavaScript tutorial where we use the OR operator to check for the existence of a single, valid getUserMedia
function.

Ok, things are getting pretty serious here:
if (navigator.getUserMedia) {
}
Our if statement checks that navigator.getUserMedia does in fact contain something of value. If your browser

doesn't support getUserMedia at all, this check will rightfully fail and prevent the all important call to getUserMedia
from being made.
Speaking of which, that all important call looks like:
This single line does quite a lot of things. By simply calling getUserMedia as a function as we are here, the first thing that

happens is that your browser displays the prompt asking whether you want to give it permission to access your webcam. It
knows how to word the prompt because we declared this function as only being used for video via the first argument
which we set as { video: true } .
If you grant permission, the success callback which we defined as handleVideo gets called. If you deny permission to

access the webcam, videoError (aka the error callback) gets called instead. Let's go ahead and look the two callbacks
that will get called next.

The handleVideo function is called due to its fulltime job as being the success callback for the getUserMedia function
you saw a few lines earlier:
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
The main thing that this function does is set the
https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm property on our element to the webcam's video stream. 6/14
The main thing that this function does is set the src property on our video element to the webcam's video stream.

Because our video element has the autoplay attribute set to true , nothing else really needs to be done to show your
webcam data on the screen.
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 videoError function:
function videoError() {
// do something
}
As you can see, I didn't flesh out what the behavior would be. You can do whatever you want here.
Conclusion
So, there you have it a look at how you can access a user's webcam video stream and display it in the browser. Once
you get the video displayed, you can then do all sorts of things that you can do to videos in general. You can apply crazy
filters, you can take a snapshot and save the image to disk, etc. I may cover some of these in future tutorials.
Getting Help
If you have questions, need some assistance on this topic, or just want to chat post in the comments below or drop by
our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of
knowledgeable and witty people who would be happy to help you out
Share
Did you enjoy reading this and found it useful? If so, please share it with your friends:
If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via email,
facebook, or twitter.
Kirupa Chinnathambi
I like to talk a lot A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You
can learn more about me by going here.
Add Your Comment (or post on the Forums)
143 Comments kirupa.com 
1 Login
 Recommend 9 ⤤ Share Sort by Newest
Join the discussion…
Bashar Subh • 6 days ago
Hi Kirupa,
Thank you a lot for this useful tutorial, I have a problem when I trying to insert this code in wordpress page "just in wordpress" it does't
work I don't know why and the frame appears with a problem in the border
could you help me in that please
Screenshot attached
△ ▽ • Reply • Share ›
kirupa Mod > Bashar Subh • 6 days ago
When you look in your Developer Tools console, do you see any errors? Is your wordpress site accessible via HTTPS?
Bashar Subh > kirupa • 6 days ago
I have tested it on default wordpress theme. not works :(
its just wordpress because when I'm trying in a html page its works fine
Jade • 7 days ago
Thanks Kirupa, really useful tutorial!
I wonder if there's a way to live stream using two usb webcams simultaneously? Your tutorial works well when accessing only one
webcam, and when I searched the solution on stackoverflow, it seems pretty complicated...Do you have some ideas? Thx <3
kirupa Mod > Jade • 6 days ago
Hmm...unfortunately, I don't have an answer for that! :P
jon bell • 8 days ago
Hi Kirupa, great article and demonstration.
Is there a way to make the video feed partly transparent or opaque?
I'd like to use this overlapping other content or a video that is playing and have the content underneath to show through?
If this is possible I dont know what level it needs to be done at..html or script or at the level of the feed or media player.
Any ideas appreciated. Thanks.
JB
kirupa Mod > jon bell • 8 days ago
JB! That is totally possible. You can use the "opacity" CSS property and set a value between 0 (fully transparent) and 1 (fully
opaque/visible). For example, in this example, I can do something like this:
#videoElement {
width: 500px;
height: 375px;
backgroundcolor: #666;
opacity: .5;
}
This causes the video to be 50% transparent :)
jon bell > kirupa
jon bell > kirupa • 7 days ago
That sounds great, and thanks for the css example, very clear.
One of the background elements I want to show through from behind would be a live feed from a webcam or video
camera. As far as you know, would that cause any special issues? Sorry if this question is a bit obscure.
Thank you again for your generous help.
JB
kirupa Mod > jon bell • 7 days ago
That shouldn't cause any issues at all. There *may* be performance issues, but you can quickly see if that is the
case :)
Eddy • 14 days ago
Hello Kirupa,
This article is great. I will use your tutorial to do many videos.
How do we do to take the video and send it to a web server?
Do you have any good tutorial to suggest?
Thank you very much
Eddy
kirupa Mod > Eddy • 14 days ago
The answer to that is a little complicated, for it requires some amount of serverside logic in addition to the clientside calls. I'll
look for a tutorial and update this post once I find one :)
Chris • 19 days ago
Hey!
Webcam should work, but I still see just a grey square, even after allowing access. Https are enabled. And in the Console I have Error:
Not allowed to load local resource: blob:null/47a94d043fb84027a4ffe54ff473586.
Is there any way to fix this?
Thanks!
Виталий Иванов > Chris • a day ago
Hello, Chris. I had a similar problem. For fix this problem you need to run your site on localhost or another server.
Emeline Paüs • a month ago
Hey Kirupa,
Thank you for this tutorial, as it helped me a lot. I would just like to know from the browser of a mobile phone I can use the webcam
mobile with this feature? and if it's possible how can i do please?
Thank you in advance,
Emeline
kirupa Mod > Emeline Paüs • a month ago
Unfortunately, many mobile devices don't allow accessing the webcam via the browser. There is nothing extra you can do about
it. I believe some versions of Android allow webcam access via the browser, but iOS devices still don't.
Sarthak Das • 2 months ago
Hey this website webcam is working but when I copy the code it stops working so i downloaded the webpage
www.kirpua.com/snippets/exampl... and it still wont work im not sure why could you please help me?
kirupa Mod > Sarthak Das • 2 months ago
Are you testing on a server? Or are you testing remotely? If you are testing on a server, do you have https enabled?
Sarthak Das > kirupa • 2 months ago
Im testing it on local host
kirupa Mod > Sarthak Das • 2 months ago
Does your F12 console show you any errors?
Henry • 2 months ago
How can I configure zoom of webcam? Is it not possible for Javascript? Thanks.
kirupa Mod > Henry • 2 months ago
It isn't really possible in the way you might be expecting. There is no way to control the webcam properties to return a zoomed
image, but you can zoom in on the webcam output: https://hacks.mozilla.org/2011... The downside is that this approach is the
same as taking a regular image and making it twice as big in the browser. You will start to see pixelation, blurring, and other
unwanted side effects :(
vinodsobale • 2 months ago
Can we capture image from this video feed and save it on the local disk?
kirupa Mod > vinodsobale • 2 months ago
Sort of there isn't a way to save the result as a video. You can only save individual screenshots from the output, and it is a
manual process.
Aniket More • 3 months ago
can we stream these videos live over lan?
hj park • 3 months ago
hi ..
I realized that your code can access a local webcam what is existing in the same computer with the browser.
if I access the computer what has webcam from the other computer with any browser, I can't access the webcam remotely even with
https on Chrome..
am I right?
kirupa Mod > hj park • 3 months ago
That is correct!
Sasha • 4 months ago
Just pointing out to the OP, that this does work on some android devices as well, like the Nexus 6P in Chrome, for example.
kirupa Mod > Sasha • 3 months ago
Cool! I didn't know that :)
Aditya Bhardwaj • 4 months ago
Yeah. I tried this out and it's working. Thanks!
I also want to save the image and store it somewhere. How would you suggest doing it?
△ ▽ Reply
spotify • 4 months ago
thank you !
but how can we save all of the things that appear on this box on the server ?
kirupa Mod > spotify • 4 months ago
You'll need to have some sort of a serverside script setup to receive (and save) images sent via the browser.
spotify > kirupa • 4 months ago
can you help me about it ?
vaibhav • 4 months ago
not working for me just black box appearing....
kirupa Mod > vaibhav • 4 months ago
Does the example on this page work?
Sam Wilson • 6 months ago
how could i take a snapshot from the webcam?
Aditya Bhardwaj > Sam Wilson • 4 months ago
Try this out
https://developer.mozilla.org/...
Jesina Nipa • 6 months ago
Wow, neat! Usually they are flash based like http://webcameratest.com/
Rishabh Sanghi • 6 months ago
Hey Kirupa,
The webcam on this website is working my laptop (using chrome).
But when I add your code and run it, a blank grey screen appears on Chrome. It does not ask me for the camera access. When I run
the same code on Firefox, it works properly. How can I fix this?
kirupa Mod > Rishabh Sanghi • 6 months ago
Do you have https enabled on your server? Chrome requires https for this API to work properly :)
Rishabh Sanghi > kirupa • 6 months ago
I figured out the problem. getUserMedia only works for https and localhost on chrome.
Akash Sinha • 6 months ago
Can I connect PTZ camera? I need to connect with audio if possible
kirupa Mod > Akash Sinha • 6 months ago
You can use a Web Audio API to record from the microphone, and the camera should work. It's pretty generic, so I would
assume all cameras work :)
Akash Sinha > kirupa • 6 months ago
Our PTZ Camera is IP based Camera. Shall it work on that also?
Our PTZ Camera is IP based Camera. Shall it work on that also?
kirupa Mod > Akash Sinha • 6 months ago
I don't know how it is detected by your operating system. If it is recognized like any normal/attached camera,
then it should be fine. You will have to try it out yourself :)
VV • 6 months ago
I want to use an external webcam instead of the Isight camera. How do select I want to use the external camera for the videostream
instead of isight?
daniel > VV • 6 months ago
in the configs of chrome you can choose the input.
Adrian Perez • 7 months ago
Just to let you know, the camera example embedded in your article works in windows phone 10.
thedairycow > Adrian Perez • 5 months ago
Also in Chrome for Android. Really great info, thank you!
John Richards • 7 months ago
Did you or anyone figure out how to stream the webcam via this code or something close to it?
Jerick Fermo • 7 months ago
is this code is accessible even if upload it online/webhost ,locating my cams (android,iphone,webcams etc)
thank you
Load more comments
✉ Subscribe d Add Disqus to your site Add Disqus Add 🔒 Privacy
BACK TO TOP
HTML5 Canvas: From Noob to Ninja
BUY NOW
Animation in HTML, CSS, and JavaScript
BUY NOW
JavaScript: Absolute Beginner's Guide
BUY NOW
Copyright 2016 Kirupa, Inc.

Accessing Your Webcam in HTML: The Example

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Accessing Your Webcam in HTML: The Example

Uploaded by

Copyright:

Available Formats

12/12/2016 Accessing

The video element is pretty straightforward in what it does. It is responsible for taking the video stream from your

The interesting piece is the getUserMedia function. This function allows you to do three things:

For what we are trying to do, we call the getUserMedia function and tell it to only retrieve the video from the webcam. I

Our video tag has an id value of videoElement, and its autoplay attribute is set to true. By setting the autoplay

Inside your script tag, add the following code:

We first declare a variable called video , and it is initialized to our video element that lives in the HTML. We get our

The getUserMedia function is currently vendor prefixed. This means that each browser will expect a different variant of

Our if statement checks that navigator.getUserMedia does in fact contain something of value. If your browser

This single line does quite a lot of things. By simply calling getUserMedia as a function as we are here, the first thing that

If you grant permission, the success callback which we defined as handleVideo gets called. If you deny permission to

The main thing that this function does is set the src property on our video element to the webcam's video stream.

 Recommend 9 ⤤ Share Sort by Newest

kirupa Mod > Bashar Subh • 6 days ago

kirupa Mod > Jade • 6 days ago

kirupa Mod > jon bell • 8 days ago

kirupa Mod > jon bell • 7 days ago

kirupa Mod > Eddy • 14 days ago

kirupa Mod > Emeline Paüs • a month ago

kirupa Mod > Sarthak Das • 2 months ago

kirupa Mod > Sarthak Das • 2 months ago

kirupa Mod > Henry • 2 months ago

kirupa Mod > vinodsobale • 2 months ago

kirupa Mod > hj park • 3 months ago

kirupa Mod > Sasha • 3 months ago

kirupa Mod > spotify • 4 months ago

kirupa Mod > vaibhav • 4 months ago

kirupa Mod > Rishabh Sanghi • 6 months ago

kirupa Mod > Akash Sinha • 6 months ago

kirupa Mod > Akash Sinha • 6 months ago

✉ Subscribe d Add Disqus to your site Add Disqus Add 🔒 Privacy

You might also like