How to disconnect the webcam using the SayCheese plugin?

2

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?     

asked by anonymous 18.09.2015 / 15:58

1 answer

1

The function is .stop() :

$('#closeWebcam, #modal-voltar').on('click', function(){
   sayCheese.stop();
});
    
18.09.2015 / 16:23