3

I am obtaining 1000ms audio chunks from client using getUserMedia() and converting it into audio blob of 1 second and sending them to the server(and to rest of the clients) using socket-io till the user stops recording.

On the server I re-emit the obtained blob to other clients where the blob's URL is obtained using createObjectURL() and then this URL is set as src for <audio> tag on the frontend. Every 1000ms, the clients get a new blob and its URL is obtained and then fed to the <audio> tag.

However this transition from previous url to new url has some visible delay, which causes audio to be patchy and less smooth and consistent.

On the client side this is how I record the audio blobs,

var chunks = [];
var mediaRecorder = new MediaRecorder(stream, { bitsPerSecond: 32000 });

mediaRecorder.ondataavailable = function (e) {
    chunks.push(e.data);
}


mediaRecorder.start();


setInterval(() => {
    mediaRecorder.stop();
    mediaRecorder.start();
}, 1000);


mediaRecorder.onstop = function (e) {
    var blob = new Blob(chunks, { 'type': 'audio/ogg; codecs=opus' });
    chunks = [];
    socket.emit('audio-blob', blob);
}

On the server I just re-emit the blob to clients, socket.to(String(socket.room)).broadcast.emit('audio-blob', blob);

and on the receiving clients, the blob is played like this,

socket.on('audio-blob', blob => {
    var newblob = new File([blob], "filename")
    var audioURL = window.URL.createObjectURL(newblob);
    window.audio = new Audio();
    window.audio.src = audioURL;
    window.audio.play();
})

How do I make the audio consistent and reduce to noticeable lag during the transition

Aviartz
  • 128
  • 1
  • 10
  • 1
    You might need to make use of the `MediaSource` which would not require changing the source but just append the data chunks to the buffer. See https://developers.google.com/web/fundamentals/media/mse/basics – jmsn Dec 30 '18 at 15:59
  • @jmsn I found this answer useful, https://stackoverflow.com/questions/50333767/html5-video-streaming-video-with-blob-urls But for some reason the audio stops playing after 1000ms (or whatever buffer time I set) – Aviartz Jan 06 '19 at 18:39
  • 1
    Use timeslice parameter on mediarecorder.start(1000) for 1000 millisecond chunk uploads – Stephen Duffy Oct 13 '20 at 00:34

0 Answers0