Minha duvida é simples mas não estou conseguindo.
Estou usando um plugin simples e básico em Javascript chamado SayCheese para minha webcam em um projeto web C# MVC.
Minha duvida é: Como tornar a webcam off quando o usuário clicar no botão para fechar uma modal do Bootstrap ou quando clicar no botão "voltar"? Sempre que eu fechar a modal quero desabilitar a Webcam.
Segue meu código:
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();
});
}
Implementei o seguinte código:
sayCheese.on('off', function () {
$('#closeWebcam').on('click', function (evt) {
sayCheese.off();
});
$('#modal-voltar').on('click', function (evt) {
sayCheese.off();
});
});
Na aba do navegador fica um circulo vermelho indicando que a câmera esta OK mesmo quando fecho a modal, creio que esse trecho de código não esteja correto pois era para o circulo vermelho sumir, não concordam?!
Como faço para simplesmente desabilitar ao clicar no botão "voltar" ou no "x" da modal, sei que será o mesmo código no evento click
destes dois botões, mas como ficaria?