How to turn off the webcam using the Saycheese plugin?

Question

My doubt is simple but I’m not getting it.

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 on the button to close a Bootstrap modal or when he clicks on the "back" button? Whenever I close the modal I want to disable the Webcam.

Follows 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 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 piece of code is not correct because it was for the red circle disappear, do not agree?!

How do I simply disable by clicking the "back" button or the modal "x", I know it will be the same code in the event click of these two buttons, but how would it look?

Answer 1

The function is to .stop():

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