Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Broadcasting live audio through webrtc using socket.io in node.js

I am trying to get the audio through getUserMedia() using webrtc and using socket.io to send it to server(socket.io support audio , video , binarydata) and then server will broadcast it to all connected clients. The problem is when stream reaches connected clients it is converted into JSON object not media stream object. So I am unable to send audio I have also tried socket.io-stream module but I it was not succesfull. Can you please help me to capture audio stream properly and sending it to all connected clients.

Here is code of client who sends data

navigator.getUserMedia({audio: true, video: false}, function(stream) {
  video.src = window.URL.createObjectURL(stream);
  webcamstream = stream;
  media = stream; /// here the datatype of media is mediaStream object
  socket.emit("sendaudio", media);
}, function(e){
  console.log(error);
});

While on receiving client the code is as follows

socket.on('receiveaudio' , function(media)
{
   console.log(media); //but here i am receiving it as a simple object
   other.src= media;
});
like image 795
Nauman Bashir Avatar asked May 29 '15 03:05

Nauman Bashir


Video Answer


1 Answers

I copied my answer from here.

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);
});
like image 194
Dehli Avatar answered Sep 19 '22 00:09

Dehli