Live audio via socket.io 1.0
This example shows you how to use the MediaRecorder
to upload audio and then forward it using socket.io
. This code will only broadcast after you're called mediaRecorder.stop()
. You can choose to broadcast inside of ondataavailable
. If you do that, you might want to pass a timeslice
to mediaRecorder.start()
, so that it doesn't trigger ondataavailable
so often.
This solution isn't truly live, but I think it will help people who come back and find this question.
Client Code
var constraints = { audio: true };navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { var mediaRecorder = new MediaRecorder(mediaStream); mediaRecorder.onstart = function(e) { this.chunks = []; }; mediaRecorder.ondataavailable = function(e) { this.chunks.push(e.data); }; mediaRecorder.onstop = function(e) { var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' }); socket.emit('radio', blob); }; // Start recording mediaRecorder.start(); // Stop recording after 5 seconds and broadcast it to server setTimeout(function() { mediaRecorder.stop() }, 5000);});// When the client receives a voice message it will play the soundsocket.on('voice', function(arrayBuffer) { var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' }); var audio = document.createElement('audio'); audio.src = window.URL.createObjectURL(blob); audio.play();});
Server Code
socket.on('radio', function(blob) { // can choose to broadcast it to whoever you want socket.broadcast.emit('voice', blob);});
In the Client Code you can write setInterval() instead of setTimeout() and then recursively call mediaRecorder.start() so that every 5 seconds the blob will be emitted continuously.
setInterval(function() { mediaRecorder.stop() mediaRecorder.start() }, 5000);
Client Code
var constraints = { audio: true };navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {var mediaRecorder = new MediaRecorder(mediaStream);mediaRecorder.onstart = function(e) { this.chunks = [];};mediaRecorder.ondataavailable = function(e) { this.chunks.push(e.data);};mediaRecorder.onstop = function(e) { var blob = new Blob(this.chunks, { 'type' : 'audio/ogg; codecs=opus' }); socket.emit('radio', blob);};// Start recordingmediaRecorder.start();// Stop recording after 5 seconds and broadcast it to serversetInterval(function() { mediaRecorder.stop() mediaRecorder.start() }, 5000);});// When the client receives a voice message it will play the soundsocket.on('voice', function(arrayBuffer) { var blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' }); var audio = document.createElement('audio'); audio.src = window.URL.createObjectURL(blob); audio.play();});
Server Code
socket.on('voice', function(blob) { // can choose to broadcast it to whoever you want socket.broadcast.emit('voice', blob);});