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="" />