Stream media file utilizzando WebRTC

Question

Ecco il mio caso d'uso: Alice ha una nuova fantastica traccia multimediale che desidera ascoltare con Bob. Seleziona il file multimediale nel suo browser e il file multimediale inizia immediatamente a giocare nel browser di Bob.

Non sono nemmeno sicuro che sia possibile creare ora utilizzando l'API WebRTC. Tutti gli esempi che posso trovare flussi uso ottenute tramite getUserMedia(), ma questo è quello che ho:

var context = new AudioContext(); 
var pc = new RTCPeerConnection(pc_config); 

function handleFileSelect(event) { 
    var file = event.target.files[0]; 

    if (file) { 
     if (file.type.match('audio*')) { 
      console.log(file.name); 
      var reader = new FileReader(); 

      reader.onload = (function(readEvent) { 
       context.decodeAudioData(readEvent.target.result, function(buffer) { 
        var source = context.createBufferSource(); 
        var destination = context.createMediaStreamDestination(); 
        source.buffer = buffer; 
        source.start(0); 
        source.connect(destination); 
        pc.addStream(destination.stream); 
        pc.createOffer(setLocalAndSendMessage); 
       }); 
      }); 

      reader.readAsArrayBuffer(file); 
     } 
    } 
} 

Sul lato ricevente che ho il seguente:

function gotRemoteStream(event) { 
    var mediaStreamSource = context.createMediaStreamSource(event.stream); 
    mediaStreamSource.connect(context.destination); 
} 

Questo codice non fa i mezzi di comunicazione (musica) gioca dal lato ricevente. Tuttavia, ricevo un evento terminato subito dopo l'handshake WebRTC e la funzione getRemoteStream è stata richiamata. La funzione gotRemoteStream viene chiamata il supporto non viene avviato.

Da parte di Alice la magia deve accadere nella riga che dice source.connect (destination). Quando sostituisco la riga con source.connect (context.destination), il supporto inizia a essere riprodotto correttamente attraverso gli altoparlanti di Alice.

Sul lato di Bob viene creata un'origine del flusso multimediale basata sullo streaming di Alice. Tuttavia, quando l'altoparlante locale viene collegato utilizzando mediaStreamSource.connect (context.destination), la musica non inizia a riprodurre attraverso gli altoparlanti.

Fuori rotta ho sempre potuto inviare il file media attraverso un DataChannel ma dov'è il divertimento in questo ...

Degli indizi su ciò che è sbagliato con il mio codice o alcune idee su come raggiungere il mio caso d'uso sarebbe essere molto apprezzato!

Sto utilizzando l'ultimo e più grande Chrome Canary.

Grazie.

Answer 1

E 'possibile riprodurre l'audio utilizzando il elemento audio come questo:

function gotRemoteStream(event) { 
    var player = new Audio(); 
    attachMediaStream(player, event.stream); 
    player.play(); 
} 

Riproduzione dell'audio tramite l'API WebAudio esso non funziona (ancora) per me.

Answer 2

Nota sicura su Chrome; sembra un insetto.

provarlo su Firefox (ogni sera suggerisco); abbiamo il supporto WebAudio lì anche se non conosco tutti i dettagli su ciò che è attualmente supportato.

Inoltre, su Firefox almeno abbiamo stream = media_element.captureStreamUntilEnded(); lo usiamo in alcuni dei nostri test su dom/media/test/mochitest, credo. Ciò consente di prendere qualsiasi elemento audio o video e acquisire l'output come media.

Modifica: vedi sotto; sia Chrome che Firefox non riescono a combinare WebAudio con WebRTC PeerConnections, ma in luoghi diversi. Mozilla spera di risolvere l'ultimo bug molto presto.

Answer 3

Controlla la pagina MediaStream Integration.Illustra l'integrazione di WebRTC con l'API Web Audio. In particolare, questo esempio è rilevante per la tua domanda:

5. Capture microphone input, visualize it, mix in another audio track and stream the result to a peer

<canvas id="c"></canvas> 
<audio src="back.webm" id="back"></audio> 
<script> 
    navigator.getUserMedia('audio', gotAudio); 
    var streamRecorder; 
    function gotAudio(stream) { 
     var microphone = context.createMediaStreamSource(stream); 
     var backgroundMusic = context.createMediaElementSource(document.getElementById("back")); 
     var analyser = context.createAnalyser(); 
     var mixedOutput = context.createMediaStreamDestination(); 
     microphone.connect(analyser); 
     analyser.connect(mixedOutput); 
     backgroundMusic.connect(mixedOutput); 
     requestAnimationFrame(drawAnimation); 

     peerConnection.addStream(mixedOutput.stream); 
    } 
</script> 

Temo, tuttavia, che questo è solo una proposta attualmente.