Dhruv Chadha Dhruv Chadha - 10 months ago 162
Javascript Question

Not able to access webcam (Javascript)?

I am learning to use getUserMedia() to access webcam in javascript. But i am getting an error -

Not allowed to load local resource: blob:null/3485f5b8-46c1-4a40-946a-8de2588720f0

I searched on the net but they said that i needed an https connection or something, file urls are not allowed, but i didn't completely understand what is going on.

the code is -

<!DOCTYPE html>
<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>

#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
#videoElement {
width: 500px;
height: 375px;
background-color: #666;

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

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

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

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

function videoError(e) {
// do something

Answer Source

For privacy and security reasons, Google decided to allow certain features only to "secure" origins, i.e. getUserMedia is only available on websites using HTTPS.

For more of the reasoning you can read their article on this.

Your code is fine and works fine when used via HTTPS, the easiest way to do that during development is probably jsbin.