if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
navigator.mediaDevices
.getUserMedia({ video: true })
.then(function(stream) {
var vid = document.createElement('video');
vid.src = stream;
console.log(vid);
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}
);
It asks for permission, and the camera icon shows up, but of course, the video itself doesn't appear. I assumed it would work if I added a <video> to the page body. What's wrong with this approach, please?