I am a student and for a project, I want to have a webpage that sends a stream of audio continuously to a python server so that I can apply wake word detection and eventually speech recognition using python on the audio stream.

For now, I am using porcupine for the wake word on the webpage instead of the server and when the wake word is detected, media recorder is used to record 5s of audio into a blob which is sent to the server via WebSocket, which is then converted into np.array and fed into a method.

navigator.mediaDevices.getUserMedia(
{audio: {sampleRate: 16000, channelCount: 1}})
.then(stream => {
    mediaStream = stream;
}).catch(console.error);

function StartMicrophone() {
    recorder = new MediaRecorder(mediaStream);
    
    let chunks = [];
    recorder.ondataavailable = function(e) {
        chunks.push(e.data);
    }
    
    recorder.start();

    //  send the whole bytes array
    recorder.onstop = (e) => {
        const blob = new Blob(chunks, { 'type' : 'audio/wav' });
        chunks = [];
        socket.send(blob);
    }
    
    // Stop recording after 5s
    setTimeout(() => {
        recorder.stop();
    }, 5000);
}

Would there be a way to send continuous streams of data (blob) to the server and then back to the webpage.

Thank you for any input possible.