Recibo un error mientras manejo la entrada de la cámara usando navigator.getUsermedia . ¿Qué debo hacer para solucionar esto? Aquí está el código:
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); } ); } Parece que mi navegador no tiene soporte para navigator.getUsermedia pero ya probé esto en todos los navegadores como Opera, Chrome, Brave, Mozilla y Edge pero el resultado es siempre el mismo.
// 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); } ); }Es posible que esté utilizando http, en lugar de https, para servir su página web y Javascript. getUserMedia() no funciona excepto desde localhost, 127.0.0.1, ::1 o cualquier servidor https.
Los navegadores implementan esta restricción ocultando la función .getUserMedia().
¿Por qué? Porque los cibercreeps. El personal de seguridad del desarrollador del navegador (Chromium, Firefox, Safari) ha tapado agujeros de seguridad que permiten que personas malintencionadas usen las cámaras y los micrófonos de su máquina y la mía sin nuestro permiso. Restringir las operaciones getUserMedia() a páginas solo https hace que sea más difícil para las personas malintencionadas utilizar los llamados ataques de "intermediarios" para engañar a las personas para que violen su propia privacidad.
Es un dolor de cabeza para los desarrolladores: para implementar aplicaciones de medios necesitamos servidores https. Pero Heroku y Glitch brindan plataformas fáciles de usar para probar código más allá del host local.
Aquí está el que suelo usar
const getUserMedia = navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;