2

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?

0

1 Resposta 1

1

A função é a .stop():

$('#closeWebcam, #modal-voltar').on('click', function(){
   sayCheese.stop();
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .