9

Estou precisando gravar áudio e transmitir ao vivo, descobri que com HTML5 e JavaScript/jQuery é possível e que tem plugins que podem me auxiliar. Estou usando um deles, o MediaStreamRecorder e estou gravando e transmitindo para mim mesmo ao vivo, só que não consigo transmitir para todos, alguém sabe como faço essa transmissão ? Provavelmente usando socket ? Onde fica o arquivo que esta sendo gravado ? Como enviar o arquivo em tempo real pro servidor ?

EDIT: Como enviar o blob em tempo real pro servidor ?

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

Código usado (o plugin esta no github nesse 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
7
  • 1
    Qual o problema? Poderia publicar o seu código para podermos analisar? Commented 1/06/2014 às 6:34
  • 1
    adicionei código!
    – Alan PS
    Commented 1/06/2014 às 6:39
  • 3
    Não existe um arquivo sendo gravado. Ele simplesmente armazena os bytes do áudio (e possivelmente os transmite), conforme os recebe. O ponto é, onde está seu "todos"? É bem possível que você precise de um servidor para encaminhar os bytes de áudio para os outros clientes, visto que apenas via JavaScript client-side, não é possível criar um socket onde outros clientes externos podem se conectar. No começo da descrição do projeto tem links com exemplos para transmitir: github.com/muaz-khan/WebRTC-Experiment/tree/master/… Commented 2/06/2014 às 16:51
  • @carlosrafaelgn Eu uso PHP, mas nunca usei sockets em php, vou pesquisar sobre, mas continuo sem saber como enviar o arquivo em tempo real pro servidor, se alguém tiver alguma resposta...
    – Alan PS
    Commented 2/06/2014 às 19:51
  • Então, @user3230262. Não tem arquivo para ser transmitido... Só um array de bytes que devem ser transmitidos o mas rápido possível para o servidor. Dá uma olhada no código fonte dessa página aqui, que é um exemplo meu que desenha o áudio na tela. Essas outras duas perguntas também abordam a ideia geral dessa captura... pt.stackoverflow.com/questions/11640/… e pt.stackoverflow.com/questions/14484/… Commented 2/06/2014 às 22:21

2 Respostas 2

8

Depois de muita pesquisa obtive resultados usando o WebRTC-Experiment (https://github.com/muaz-khan/WebRTC-Experiment) e (http://www.rtcmulticonnection.org/docs/).

Código do servidor: (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>

Código do usuário: (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>
1
  • Obrigado por complartilhar! estava precisando disso! Commented 14/11/2016 às 8:21
6

Não tem pra onde correr, quando se trata de transmissão via stream os clientes tem que se conectar a você ou seja você é o server que distribui(faz broadcast) dos dados para todos que estão ligado a você!

Na realidade você abre o áudio de forma pura (raw áudio) no seu dispositivo de entrada de dados(microfone ou outra fonte) e envia para os clientes dentro de blocos com tamanho fixo, de modo geral 2048, 4096 do outro lado cada cliente recebe os valores deste vetor e dá o play codificando para algum formato (wav, mp3, etc)!

O javascript que apresentou apenas pega os dados do microfone de forma pura, não olhei com carinho mas estes valores devem estar em um vetor short int ou float32 de tamanho fixo, só para você entender o processo:

Os valores capturados do microfone de modo geral podem estar em short in ou float32 eles são um vetor de tamanho fixo, 2048 ou 4096, etc Estes valores são passados para um encoder que codifica este vetor para o formato desejado, de posse do vetor codificado o player toca este vetor. Este processo roda em um loop e é rápido o suficiente para não promover latência

1
  • 1
    ??? errr.... em que isso ajuda? nao entendi... Bom claro que eh informacao valida, mas nao sei como ajuda na pergunta... Commented 14/11/2016 às 8:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .