Добавить обратный вызов в существующую функцию webrtc js

Question

У меня webrtc в веб-приложении, настроенном в основном на демонстрационный код. Он работает с использованием setTimeout, чтобы остановить запись. Я хотел бы добавить событие нажатия кнопки, как альтернативный способ остановить запись. Из демонстрационного кода я разорвал нужный бит как новую функцию saveAudioFile (). Он запускается функцией playSequence, передающей объект рекордера, который создается в функции playSequence. Что я хочу знать, так это как альтернативно вызвать функцию saveAudioFile с помощью щелчка мыши (и остановить тайм-аут). Я создал прослушиватель событий для кнопки и щелчка, но у меня возникла проблема с передачей объекта «устройство записи» (который создается в другой функции и находится вне области видимости), без которого функция не будет работать. Это все о обратных вызовах (я думаю), и я до сих пор не обернул голову вокруг них. Что мне нужно сделать, чтобы иметь возможность использовать объект «устройство записи» в функции playSequence, чтобы альтернативно остановить запись щелчком мыши (при сохранении выдержки времени ожидания)?

nb. Запуск функции playSequence через setTimeout преднамеренный - мне нужно, чтобы он запускался через 3 секунды после загрузки страницы. Просто упомяну на случай, если это было причиной путаницы / вопросов.

function saveAudioFile(recorder)
            {
                // stop recording
                recorder.stopRecording(function() {

                    //ajax function to upload audio and save as file- working

                });
            }


        function playSequence()
        {           
                    navigator.mediaDevices.getUserMedia({ video: false, audio: true }).then(function(camera) {
                    // recording configuration/hints/parameters
                    var recordingHints = {
                        type: 'audio'
                    };

                    // initiating the recorder
                    var recorder = RecordRTC(camera, recordingHints);

                    // starting recording here
                    recorder.startRecording();

                    // auto stop recording after 30 seconds
                    var milliSeconds = 10 * 1000;
                    setTimeout(saveAudioFile(recorder) , milliSeconds);
                });
            });
        }

        setTimeout(
                function(){ 
                playSequence();
                }, 
                3000
                );

        jQuery('#endrecording').click(function() {
            saveAudioFile();
        });

Answer 1

Есть ли причина, по которой Вы бы не поместили прослушиватель событий в функцию playSequence? Вы не сможете передать recorder объект слушателю click, так как он еще не существует - он будет создан после 3s верно? :)

Плюс эта часть: setTimeout(saveAudioFile(recorder) , milliSeconds);
кажется, что это не сработает, не так ли?
При использовании функций с аргументами в качестве обратных вызовов вы либо знаете, с какими аргументами обратный вызовбудет вызван - например, обратные вызовы прослушивателя событий вызываются с конкретным Event объектом - или вы должны передать анонимную функцию, которая вызывает ваши функции с вашими пользовательскими аргументами.

Не проверено, это первое, что приходит кмой разум:

function playSequence() {
  navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true
  }).then(function(camera) {
    // recording configuration/hints/parameters
    var recordingHints = {
      type: 'audio'
    };

    // initiating the recorder
    var recorder = RecordRTC(camera, recordingHints);

    // starting recording here
    recorder.startRecording();

    // auto stop recording after 30 secods
    var milliSeconds = 30 * 1000;
    document
      .getElementById('endrecording')
      .addEventListener('click', function(){ saveAudioFile(recorder) };

    setTimeout(
      function(){ saveAudioFile(recorder) }, 
      milliSeconds
    );
  });
}