0

Estoy haciendo uso de las apis para acceder a la webcam, todo funciona bien, el problema es que al ejecutar la función que apaga la webcam, a veces la apaga enseguida pero otras veces tarda alrededor de un minuto y algunas veces mas no se apaga, la función se llama stopWebcam, entonces mi pregunta es ¿como podría apagarla después de ejecutar la función? , en el siguiente link dejo el codigo funcionando, ya que aqui no se ejecuta por el tipo de protocolo que se utiliza

//----start webcam functions----
const self = this;
	self.hasWebCam = () => {
		navigator.getMedia = ( navigator.getUserMedia || // use the proper vendor prefix
		navigator.webkitGetUserMedia ||
		navigator.mozGetUserMedia ||
		navigator.msGetUserMedia);

		navigator.getMedia({video: true}, function() {
			self.webCamPermissions();//tiene webcam
		}, function() {
			self.unavalable = false;//no tiene webcam
			console.log('La camara no disponible o no tiene permisos')
		});
	}
	
	self.webCamPermissions = () => {
		self.canvas = document.querySelector('#canvas');
		self.context = self.canvas.getContext('2d');
		self.video = document.getElementById('video');

		if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
				self.video.srcObject = stream;
				self.video.play();
			});
			self.unavalable = true;
		}
		else if (navigator.getUserMedia) { // Standard
			navigator.getUserMedia({ video: true }, function (stream) {
				self.video.src = stream;
				self.video.play();
			}, errBack);
			self.unavalable = true;
		} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
			navigator.webkitGetUserMedia({ video: true }, function (stream) {
				self.video.src = window.webkitURL.createObjectURL(stream);
				self.video.play();
			}, errBack);
			self.unavalable = true;
		} else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
			navigator.mozGetUserMedia({ video: true }, function (stream) {
				self.video.srcObject = stream;
				self.video.play();
			}, errBack);
			self.unavalable = true;
		}
	}

	self.takePicture = () => {
		self.context.drawImage(self.video, 0, 0, 640, 480);
		self.context.fillStyle = "rgba(255,255,255,1)";
		self.context.font = 30 + "px Arial";
		
		self.context.fillText(new Date(), 30, 30);
		self.img = self.canvas.toDataURL("image/png");//base 64
    console.log(self.img)
    document.getElementById("imgSalida")  .setAttribute(
        'src', self.img
    );
		
	}

	self.stopCam = () => {
		if(self.unavalable){
			self.video.srcObject.getTracks().forEach(function(track) {
				track.stop();
			  });
		}
	}
  
  self.dataURLtoFile = (dataurl, filename) => {
 		var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal"
											data-target="#modalCart1"
											onclick="hasWebCam()">Fotografia</button>
                      
                      
<div class="modal fade" id="modalCart1" tabindex="-1" role="dialog"
											aria-labelledby="exampleModalLabel" aria-hidden="true">
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<!--Header-->
													<div class="modal-header bg-primary">
														<h4 class="modal-title" id="myModalLabel">Tomar fotografía</h4>
														<button type="button" class="close" data-dismiss="modal" onclick="stopCam()"
															aria-label="Close">
															<span aria-hidden="true">×</span>
														</button>
													</div>
													<!--Body-->
													<div class="modal-body">
														<div class="box-body">
															<video id="video" class="col-md-12 col-xs-12"></video>
														</div>
													</div>
													<!--Footer-->
													<div class="modal-footer">
														<button type="button" class="btn btn-outline-primary"
															data-dismiss="modal" onclick="stopCam()">Cancelar</button>
														<button type="button" class="btn btn-primary"
															data-ng-click="takePicture()">Tomar</button>
														<button type="button" class="btn btn-success"
															data-dismiss="modal" onclick="stopCam()">Guardar</button>
													</div>
												</div>
											</div>
										</div>

<canvas style="display: none" id="canvas" width="640" height="480"	></canvas>

<img id="imgSalida" style="max-width: 20em; margin: auto; display: block;" src="" />

1 respuesta 1

1

Veo que antes de llamar al getUserMedia() haces una llamada previa para comprobar si tiene webcam, estas creando un stream que nunca cierras y por ello se queda encendida la cámara, te pongo el JS modificado que evita que la cámara se quede encendida.

Como ya hacías la primera llamada para conseguir la webcam, simplemente le pasamos el stream a la función en lugar de llamar una segunda vez.

//----start webcam functions----
const self = this;
self.hasWebCam = () => {
  navigator.getMedia = ( navigator.getUserMedia || // use the proper vendor prefix
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia);

  navigator.getMedia({video: true}, function(stream) {
    self.webCamPermissions(stream);//tiene webcam
  }, function() {
    self.unavalable = false;//no tiene webcam
    console.log('La camara no disponible o no tiene permisos')
  });
}

self.webCamPermissions = stream => {
  self.canvas = document.querySelector('#canvas');
  self.context = self.canvas.getContext('2d');
  self.video = document.getElementById('video');

  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    self.video.srcObject = stream;
    self.video.play();
    self.unavalable = true;
  }
  else if (navigator.getUserMedia) { // Standard
    self.video.src = stream;
    self.video.play();
    self.unavalable = true;
  } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
    self.video.src = window.webkitURL.createObjectURL(stream);
    self.video.play();
    self.unavalable = true;
  } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
    self.video.srcObject = stream;
    self.video.play();
    self.unavalable = true;
  }
}

self.takePicture = () => {
  self.context.drawImage(self.video, 0, 0, 640, 480);
  self.context.fillStyle = "rgba(255,255,255,1)";
  self.context.font = 30 + "px Arial";

  self.context.fillText(new Date(), 30, 30);
  self.img = self.canvas.toDataURL("image/png");//base 64
  console.log(self.img)
  document.getElementById("imgSalida")  .setAttribute(
    'src', self.img
  );

}

self.stopCam = () => {

  if(self.unavalable){
    self.video.srcObject.getTracks()[0].stop()

  }
}

self.dataURLtoFile = (dataurl, filename) => {
  var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type:mime});
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.