[SOLUCIONADO] Apagar dispositivo WebCam

hcrisel · #1 (**permalink**) 26/02/2014, 17:11

Hola te escribo este post para ver si podés darme una mano.

El código HTML que les agregué activa una WebCam con lo básico.

Mi problema es el siguiente:
Cuando desactivo, desconecto, apago la webcam; logro esconderla del navegador, pero sigue prendida. Este es mi problema.
Yo desearía cerrar totalmente el stream. Pero no logro hacerlo. Le ponga lo que le ponga me sigue mostrando la figura de color verde de la WebCam en el Navegador y si pincho en ella me dice que: "Esta compartiendo el dispositivo con mi pagina".

Te agradezco cualquier orientación que puedas darme.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
 
<html>
    <head>
        <title>Cámara Web con HTML5</title>
        <meta charset="UTF-8">
        <style>
            *{margin:0px; padding:0px;}
            body { background-color:RGB(215,201,168); } 
        </style>
    </head>
 
<body> <!-- onload="onLoad()"> -->
    <video id="webcam" style="display:none"></video>
    <br>
    <input type="button" onclick="conectar()" value="Selecciona WebCam"/>
    <input type="button" onclick="desconecta()" value="Desconectar"/>
</body>
 
<script>
        estadoVideo = false;
 
        function hasGetUserMedia() {
            navigator.getUserMedia = navigator.getUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.msGetUserMedia;
            if (navigator.getUserMedia) {return true;} else {return false;}
        }
        
        function hasURL() {
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
            if (window.URL && window.URL.createObjectURL) {return true;} else {return false;}
        }
            
        function error(e) { alert("Fallo en la aplicación. "+e); }
        
        function setStream(stream) {
            var webcam = document.getElementById("webcam");
            webcam.src = window.URL.createObjectURL(stream);
            webcam.setAttribute("width", 160)
            webcam.setAttribute("heigth", 120)
            webcam.style.display="block";
            webcam.play();
        }
        
        function conectar() {
            if (!hasGetUserMedia() || !hasURL()) {alert("Tu navegador no soporta getUserMedia()"); return false;}
            navigator.getUserMedia( {video: true, audio: false}, setStream, error );
            estadoVideo = true;
            return true;
        }
 
// Este es mi problema
        function desconecta() {  if(estadoVideo == false) {return};
            estadoVideo = false;
            // window.URL.revokeObjectURL(objectURL);
            webcam.mozSrcObject=null;
            webcam.src="";
//                webcam.removeChild(video);
            webcam.style.display="none";
//            webcam.pause();
            webcam.stop();
        }
    </script>
 
</html>

Como ven en la última función le ponga lo que sea el resultado es el mismo.

quimfv · #2 (**permalink**) 27/02/2014, 02:03

Código Javascript:

Ver originalfunction setStream(stream) {
            var webcam....
}
 
....
 
function desconecta() {  if(estadoVideo == false) {return};
            estadoVideo = false;
            // window.URL.revokeObjectURL(objectURL);
            webcam....
}

webcam es una variable local de la función setStream luego dificilmente puedes acceder a ella des de otra función... no? No te esta dando un error por variable no definida?

No puedo intentarlo aqui pero

Código Javascript:

Ver originalvar estadoVideo = false;
       ///Ahora será una variable accesible por todas las funciones
       var webcam = document.getElementById("webcam");
 
        function hasGetUserMedia() {
            navigator.getUserMedia = navigator.getUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.msGetUserMedia;
            if (navigator.getUserMedia) {return true;} else {return false;}
        }
        
        function hasURL() {
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
            if (window.URL && window.URL.createObjectURL) {return true;} else {return false;}
        }
            
        function error(e) { alert("Fallo en la aplicación. "+e); }
        
        function setStream(stream) {
            /////////////Ojo que he comentado esto ----> var webcam = document.getElementById("webcam");
            webcam.src = window.URL.createObjectURL(stream);
            webcam.setAttribute("width", 160)
            webcam.setAttribute("heigth", 120)
            webcam.style.display="block";
            webcam.play();
        }
        
        function conectar() {
            if (!hasGetUserMedia() || !hasURL()) {alert("Tu navegador no soporta getUserMedia()"); return false;}
            navigator.getUserMedia( {video: true, audio: false}, setStream, error );
            estadoVideo = true;
            return true;
        }
 
// Este es mi problema
        function desconecta() {  if(estadoVideo == false) {return};
            estadoVideo = false;
            // window.URL.revokeObjectURL(objectURL);
            webcam.mozSrcObject=null;
            webcam.src="";
//                webcam.removeChild(video);
            webcam.style.display="none";
//            webcam.pause();
            webcam.stop();
        }

hcrisel · #3 (**permalink**) 27/02/2014, 03:34

B. Días Quimfv

Gracias por tu tiempo.
Con respecto a la definición de la variable WebCam no me daba ningún error. Pese a todo hice el cambio que me sugeriste, pero sigue mostrando que el dispositivo esta conectado.

Que tengas un buen día.

hcrisel · #4 (**permalink**) 28/02/2014, 16:15

bueno re-escribí todo y es evidente que tendría algo mal escrito. Todo anda bien ahora.