Not able to access webcam (Javascript)?

Question

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>
<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>
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
 console.log("error");
}
</script>
</body>
</html>

Prompts to allow webcam here, at `file:` protocol and stacksnippets at firefox — guest271314, Oct 12 '16 at 06:37

score 2 · Accepted Answer · answered Oct 12 '16 at 06:36

2

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.

answered Oct 12 '16 at 06:36

geekonaut

5,714
2
28
30

But isnt the file scheme included in list of secure origins? – Dhruv Chadha Oct 12 '16 at 06:50
Yes, and in fact it works from the local file system as well as http://localhost for me - but that may depend on your operating system and what not, so the safe bet is HTTPS. – geekonaut Oct 12 '16 at 06:55
How to work fine in android chrome browser? I test the jsbin link. It shows "error" in the console. – Zhihau Shiu Feb 23 '18 at 09:19
The Code on JSBin is over a year old and uses outdated APIs - see MDN for the recent APIs to use instead: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices – geekonaut Feb 23 '18 at 10:44

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

If you are trying at chromium, chrome at file: protocol, close all chromium, chrome instances, then re-launch chromium, chrome with --allow-file-access-from-files flag to allow browser access to files at local filesystem. See also Jquery load() only working in firefox?

edited May 23 '17 at 12:33

Community

1
1

answered Oct 12 '16 at 06:44

guest271314

1
15
104
177

Why are these changes not recommended? – Dhruv Chadha Oct 12 '16 at 06:52
@DhruvChadha For security reasons. The flag does not have to be set permanently. You can create different launchers for using different flags and without any flags set. You can also launch chrome or chromium from `terminal` `$ google-chrome --allow-file-access-from-files` or `$ chromium-browser --allow-file-access-from-files`, where when instance is closed at `terminal` or at browser the flag will not be permanently set at desktop or other launcher – guest271314 Oct 12 '16 at 06:55

Not able to access webcam (Javascript)?

2 Answers2