I am trying to send the live chunks of audio being recorded on a browser to my node js server using socket io. What I have tried so far only sends the buffer when I stop mediaRecorder but what I want to achieve is to send the live chucks every certain kilobyte. How can I achieve this?
const socket = io();
const recordButton = document.getElementById('record');
const stopButton = document.getElementById('stop_rec');
let userId;
socket.on('connect', () => {
userId = socket.id
socket.on(userId, (msg) => {
console.log('Message from server:', msg);
});
recordButton.addEventListener('click', async() => {
audioStream()
});
stopButton.addEventListener('click', () => {
doneSpeaking()
});
});
let mediaRecorder;
async function audioStream() {
try {
const constraints = {
audio: {
sampleRate: 16000,
channelCount: 1
}
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
const handleDataAvailable = (e) => {
//this sends the buffer to server after I stop mediaRecorder
socket.emit(userId, e.data);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.onstop = () => {
console.log('Recording stopped');
};
} catch (error) {
console.error('Error accessing microphone:', error);
}
}
function doneSpeaking() {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop(); // Stop the recording
}
}>Solution :
The docs for MediaRecorder state:
dataavailableFires periodically each time
timeslicemilliseconds of media have been recorded (or when the entire media has been recorded, iftimeslicewasn’t specified).
You can specify it in the start method of MediaRecorder:
mediaRecorder.start(1000); // sends data every second