Issue with recording audio

Anvil Q&A
1

Hi everyone,

I am trying to create an app to get some recorded audio from the user, and then send that audio to a transcription API like Whisper, to get it to transcribe it and send some text back… but I seem to have an issue with making a server call from the JavaScript…

I have a button on my Form:

def button_2_click(self, **event_args):
    anvil.js.call("startRecording")
    print("recording started")

I have some server code in a Server Module:

@anvil.server.callable
def recorded_audio(audio_url):
    print("recorded_audio function called")
    print(audio_url)
    print("Recording finished")

And I’ve got some JavaScript in my Native Libraries:

<script>
  $(document).ready(function() {
    $("#button2").click(function() {
      startRecording();
    });
  });

  function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        const mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();

        const audioChunks = [];
        mediaRecorder.addEventListener("dataavailable", event => {
          audioChunks.push(event.data);
        });

        mediaRecorder.addEventListener("stop", () => {
          const audioBlob = new Blob(audioChunks);
          const audioUrl = URL.createObjectURL(audioBlob);
          anvil.server.call("recorded_audio", audioUrl);
        });

        setTimeout(() => {
          mediaRecorder.stop();
        }, 5000); // Stop recording after 5 seconds
      })
      .catch(error => {
        console.log("getUserMedia error:", error);
      });
  }
</script>

It starts recording fine, but I can’t get past an error that occurs once the recording finishes (after 5 seconds):

store.js:217 REPL Output (runner-repl-1): 5.65185546875 ms
store.js:217 Debug output: 26.410888671875 ms
store.js:158 Persist state to Indexed DB: 1.31298828125 ms
runner.js:436 Uncaught runtime error: Uncaught TypeError: Cannot read properties of undefined (reading 'call') at https://xyz.anvil.app/debug/UYOWFECEWFJASDYXCBS37CJXYYWLSFEBVU%3DAPBPXGM7LWG57QA5RXGJNHWP/_/debug?requestTime=1684891180974:1156, column 24 TypeError: Cannot read properties of undefined (reading 'call')
    at MediaRecorder.<anonymous> (VM300 debug:22:24)
handleJsError @ runner.js:436
VM300 debug:22 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at MediaRecord

Does anyone have an idea what I could try?