Record audio and stream live

Navigation
9

I need to record audio and stream live, I discovered 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 live to myself, but I can not broadcast to anyone, anyone knows How do I make this transmission? Probably using socket? Where is the file being recorded? How to send the file to the server in real time?

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

LINK NO JSFIDDLE: link

Code used (the plugin is in 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
    
asked by anonymous 01.06.2014 / 06:16

2 answers

7

After much research I get results using WebRTC-Experiment ( link ) and ( link ).

Server Code: ( link ) 

<script src="http://www.rtcmulticonnection.org/latest.js"></script><buttonid="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: ( link ) 

<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>
    
07.06.2014 / 01:43
6

You have nowhere to run, when it comes to streaming the clients have to connect to you, or you are the server that distributes the data to everyone who is connected to you!

In reality, you open the audio in raw (raw audio) form on your data input device (microphone or other source) and send it to clients within fixed-size blocks, 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 you just presented takes the data of the microphone purely, I did not look fondly but these values must be in a short int vector or fixed size float32, just so you understand the process:

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

    
02.06.2014 / 21:59
Exchange of messages between objects, what does it mean? Unity 3D and Android, how to manipulate txt file?