Record audio and stream live

I am needing to record audio and stream live, I found that with HTML5 and JavaScript / jQuery it is possible and that it has plugins that can help me. I'm using one of them, the MediaStreamRecorder and I'm recording and streaming for myself live, only I can't stream for everyone, does anyone know how I do that stream ? Probably using socket ? Where is the file being recorded ? How to send file in real time Pro server ?

EDIT: How to send the blob in real time to the server ?

LINK NO JSFIDDLE: http://jsfiddle.net/C8WHd/2/

Code used (the plugin is on github at this link: MediaStreamRecorder):

<script src="//www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

<h1>
    Audio Recording using <a href="https://github.com/streamproc/MediaStreamRecorder"
                             target="_blank">MediaStreamRecorder</a>
</h1>
<div id="audios-container">
</div>   



 <script>
        var mediaConstraints = { audio: true };
        navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

        function onMediaSuccess(stream) {
            var audio = document.createElement('audio');
            audio = mergeProps(audio, {
                controls: true,
                src: URL.createObjectURL(stream)
            });
            audio.play();

            audiosContainer.appendChild(audio);
            audiosContainer.appendChild(document.createElement('hr'));

            var mediaRecorder = new MediaStreamRecorder(stream);
            mediaRecorder.mimeType = 'audio/ogg';
            mediaRecorder.ondataavailable = function(blob) {
                var a = document.createElement('a');
                a.target = '_blank';
                a.innerHTML = 'Open Recorded Audio No. ' + (index++);

                a.href = URL.createObjectURL(blob);

                audiosContainer.appendChild(a);
                audiosContainer.appendChild(document.createElement('hr'));
            };

            // get blob after each 5 second!
            mediaRecorder.start(5 * 1000);
        }

        function onMediaError(e) {
            console.error('media error', e);
        }

        var audiosContainer = document.getElementById('audios-container');
        var index = 1;
 </script
Author: Alan PS, 2014-06-01
Source

2 answers

After much research I got results using WebRTC-Experiment ( https://github.com/muaz-khan/WebRTC-Experiment ) and ( http://www.rtcmulticonnection.org/docs/).

Server code: ( http://jsfiddle.net/C8WHd/3/)

<script src="http://www.rtcmulticonnection.org/latest.js"></script>
<button id="audio">Audio stream</button>
<script>

var connection = new RTCMultiConnection('channel-654654-34434-12121');
connection.session = {
    data: true
};
connection.open();


document.querySelector('#audio').onclick = function() {
    connection.addStream({audio:true,oneway:true});
};
</script>

User Code: ( http://jsfiddle.net/C8WHd/4/)

<script src="http://www.rtcmulticonnection.org/latest.js"></script>
<script>

var connection = new RTCMultiConnection('channel-654654-34434-12121');
connection.session = {
    audio: true
};
connection.connect();

</script>
 8
Author: Alan PS, 2014-06-06 23:43:29

Has nowhere to run, when it comes to transmission via stream clients have to connect to you or you are the server that distributes (does broadcast) the data to everyone who is connected to you!

In reality you open the audio in a pure form (raw audio) on your data input device (microphone or other source) and send to the clients within blocks with fixed size, generally 2048, 4096 on the other side each client receives the values of this vector and gives the play encoding to some format (wav, mp3, etc)!

The javascript that presented just takes the data from the microphone in a pure way, I did not look with affection but these values must be in a vector short int or float32 of fixed size, just for you to understand the process:

The values captured from the microphone in general can be in short in or float32 they are a fixed size vector, 2048 or 4096, etc These values are passed to an encoder that encodes this vector for the desired format, possession of the encoded vector the player touches this vector. This process runs in a loop and is fast enough not to promote latency

 6
Author: ederwander, 2014-06-02 20:10:08