Tengo una página web donde quiero que el usuario tome una foto con la cámara de su computadora portátil/teléfono. Una vez que hace clic en un botón, se muestra un modal y el siguiente js iniciará la transmisión de la cámara para tomar la foto:
function startStreaming() { if (null != cameraStream) { var track = cameraStream.getTracks()[0]; track.stop(); stream.load(); cameraStream = null; } //const audioSource = audioInputSelect.value; const videoSource = videoSelect.value; const constraints = { //audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, video: { deviceId: videoSource ? { exact: videoSource } : undefined } }; navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError); var mediaSupport = 'mediaDevices' in navigator; if (mediaSupport && null == cameraStream) { const videoSource = videoSelect.value; const constraints = { video: { deviceId: videoSource ? { exact: videoSource } : undefined } }; navigator.mediaDevices.getUserMedia(constraints) .then(function (mediaStream) { cameraStream = mediaStream; stream.srcObject = mediaStream; stream.play(); }) .catch(handleError); } else { alert('Your browser does not support media devices.'); return; } }Esto es desencadenado por
$('#photoStudio').on('show.bs.modal', function (event) { navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError); startStreaming(); });Luego, cuando cierro el modal, quiero detener la transmisión, pero el indicador LED al lado de mi cámara todavía está encendido)
$('#photoStudio').on('hide.bs.modal', function (event) { stopStreaming(); }); donde stopStreaming() es:
function stopStreaming() { if (null != cameraStream) { var track = cameraStream.getTracks()[0]; track.stop(); stream.load(); cameraStream = null; } }No recibo ningún tipo de error y no puedo encontrar una manera de depurar por qué la cámara aún está funcionando. ¿Me estoy perdiendo algo en la función stopStreaming?
Si alguna pista no se ha detenido, su cámara seguirá activa. En su función stopStreaming , solo detiene la primera pista en la matriz devuelta.
Si, en cambio, itera a través de las pistas, puede encontrar algunas que no está actualmente:
function stopStreaming() { if (null != cameraStream) { var tracks = cameraStream.getTracks(); // stop all the tracks, not just the first tracks.forEach((track) => { track.stop(); }); stream.load(); cameraStream = null; } }this.camera_stream.getTracks().forEach((track) => { console.log(track); track.stop(); **track.enabled = false** }); video.load() this.camera_stream = null