getUserMedia not allowed - access to webcam


#1

HI ALL! :slight_smile:

i’ve a problem using getUserMedia, trying to access webcam:

var constraints = {
audio: false,
video: { width: 640, height: 640, frameRate: { ideal: 40, max: 60 } }
};
navigator
.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
//…
})
.catch(function(err) {
console.log(err.name + ": " + err.message, err);
});

it throws exception, the same code on Codepen works.

link:
https://glitch.com/edit/#!/threejs-webcam
suggestions? thanks!


#2

Try taking a look at the exception that it throws. It might turn out to be a problem that you can easily correct.

If you have trouble understanding the exception, you could try posting it here, in case someone else knows what it means.


#3

@spleennooname could you also post the working codepen example as well?


#4

sure, here: https://codepen.io/spleen666/pen/oZPMVe (i’m trying to bind the webcam texture in a-video component )

thx for feedback! :slight_smile:


#5

When I run it looking at developer tools (F12 in Chrome), the console says there is an error on line 42 of index.html. Looking at that line, there is a subtle closure error. “this” inside of the onloadedmetadata callback is NOT the same as “this” inside of the done callback. Therefore this.video does not exist in the onloadedmetadata callback, and this.video.play() fails because this.video is undefined.

This remix has that fixed: https://glitch.com/edit/#!/shocking-whimsey

I’m not clear if that is the specific error you’re referring to, and it doesn’t reproduce all of the codepen, but I suspect that is because the shaders, etc. are missing.


#6

@danroot thank u very much!! :wink: