I'm getting an error to while handling the camera input using navigator.getUsermedia. What should I do to solve this?
Here is the code:
var video = document.querySelector('#camera-stream'),
image = document.querySelector('#snap'),
start_camera = document.querySelector('#start-camera'),
controls = document.querySelector('.controls'),
take_photo_btn = document.querySelector('#take-photo'),
delete_photo_btn = document.querySelector('#delete-photo'),
download_photo_btn = document.querySelector('#download-photo'),
error_message = document.querySelector('#error-message');
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream){
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.src = window.URL.createObjectURL(stream);
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err){
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}
It seems that my browser does not have support for navigator.getUsermedia but I have already tried this in all the browser like Opera, Chrome, Brave, Mozilla and Edge but the result is always the same.
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream){
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.src = window.URL.createObjectURL(stream);
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err){
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}
It's possible you are using http, rather than https, to serve your web page and Javascript. getUserMedia() doesn't work except from localhost, 127.0.0.1, ::1, or any https server.
Browsers implement this restriction by concealing the .getUserMedia() function.
Why? Because cybercreeps. The browser developer security people (Chromium, Firefox, Safari) have plugged security holes that allow bad people to use the cameras and microphones on your machine and mine without our permission. Restricting getUserMedia() operations to https-only pages makes it harder for bad people to use so-called "man in the middle" attacks to trick people into violating their own privacy.
It makes for a pain in the axx neck for developers: to deploy media apps we need https servers. But Heroku and Glitch provide simple-to-use platforms for testing code beyond localhost.
Here is the one I usually use
const getUserMedia =
navigator.mediaDevices.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;