11

As from socket.io website

Binary streaming

Starting in 1.0, it's possible to send any blob back and forth: image, audio, video.

I'm now wondering, if this couldn't be the solution for something I'm trying to achieve recently.

I'm actually looking for a way how to broadcast live audio stream from (A - ie, mic input..) to all clients connected to a website of mine. Is something like this possible? I've been messing with WebRTC (https://www.webrtc-experiment.com/) examples but I haven't been able to manage the goal for more than few connected clients.

My idea is about something like getUserMedia or any other audio source (PCM, whatever..) on side A being chopped to chunks and provided to client and played for example by html5 audio element or anything.. I need to make that stream as much realtime as possible, no shout/ice cast services werent fast enough (indeed, they arent solution to my problem, they're meant to be used this way) and I don't really care about the audio quality. Crossplatform compatibility would be awesome.

Is something like that possible? By using socket.io as way how to provide those data to clients?

I would be very grateful for any reference, hint or source that could help me achieve this. Thanks a lot.

Community
  • 1
  • 1
ango
  • 361
  • 1
  • 3
  • 6

2 Answers2

11

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 sound
socket.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);
});
Dehli
  • 5,950
  • 5
  • 29
  • 44
  • Hey your code is working fine but it is stop after 5 second because of setTimeout function after that other client can listen . Is This any way to do other client listen all voice in every neon second? – Nitesh singh Sep 06 '16 at 10:56
  • Hey @niteshsingh, I'm not exactly sure how to do it off the top of my head without messing around with the code. I don't know when I'll get back to modifying this though but hopefully this helps you get the basics setup! Let me know if you figure it out :) – Dehli Sep 06 '16 at 19:45
2

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 recording
mediaRecorder.start();

// Stop recording after 5 seconds and broadcast it to server
setInterval(function() {
    mediaRecorder.stop()
    mediaRecorder.start()
  }, 5000);
});

// When the client receives a voice message it will play the sound
socket.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);
});
Pradeep Balasubramaniam
  • 142
  • 1
  • 9