My question is simple but I can not.
I'm using a simple and basic Javascript plugin called SayCheese for my webcam in a C # MVC web project.
My question is: How to make the webcam off when the user clicks the button to close a Bootstrap modal or when you click the "back" button? Whenever I close the modal I want to disable the Webcam.
Follow my code:
function InitWebcam() {
var ControlWidth = 275;
$(function () {
var sayCheese = new SayCheese('#say-cheese-container', {
snapshots: true,
audio: false,
width: ControlWidth
});
sayCheese.on('start', function () {
$('#action-buttons').fadeIn('fast');
$('#say-cheese-container-snapshots').empty();
$('#take-snapshot').on('click', function (evt) {
sayCheese.takeSnapshot();
});
});
sayCheese.on('off', function () {
$('#closeWebcam').on('click', function (evt) {
sayCheese.off();
});
$('#modal-voltar').on('click', function (evt) {
sayCheese.off();
});
});
sayCheese.on('error', function (error) {
var $alert = $('<div>');
$alert.addClass('alert alert-error').css('margin-top', '20px');
if (error === 'NOT_SUPPORTED') {
$alert.html("<strong>:(</strong> Seu navegador não suporta vídeo ainda!");
} else if (error === 'AUDIO_NOT_SUPPORTED') {
$alert.html("<strong>:(</strong> Seu navegador não suporta áudio ainda!");
} else {
$alert.html("<strong>:(</strong> Você tem que clicar em 'permitir' para tentar novamente!");
}
$('.say-cheese').prepend($alert);
});
sayCheese.on('snapshot', function (snapshot) {
var HtmlCtrl = "<div id='say-cheese-snapshots'></div><div class='note' style='margin-top: 10px;'><strong>Nota</strong> Imagem para o Perfil.</div><h5 style='color:#76A053;'><i class='fa fa-video-camera'></i> Foto de Perfil</h5>";
$('#say-cheese-container-snapshots').html(HtmlCtrl);
var img = document.createElement('img');
$(img).on('load', function () {
$('#say-cheese-snapshots').empty();
$('#say-cheese-snapshots').prepend(img);
});
img.src = snapshot.toDataURL('image/png');
img.width = ControlWidth;
});
sayCheese.start();
});
}
I have implemented the following code:
sayCheese.on('off', function () {
$('#closeWebcam').on('click', function (evt) {
sayCheese.off();
});
$('#modal-voltar').on('click', function (evt) {
sayCheese.off();
});
});
In the browser tab is a red circle indicating that the camera is OK even when I close the modal, I believe that this code snippet is not correct because it was for the red circle to disappear, do not you agree?
How do I simply disable when I click the "back" or "x" button of the modal, I know it will be the same code in the click
event of these two buttons, but how would it look?