Mediendatei mit WebRTC streamen

Question

Hier ist mein Anwendungsfall: Alice hat einen coolen neuen Medientitel, den sie Bob hören möchte. Sie wählt die Mediendatei in ihrem Browser aus und die Mediendatei wird sofort in Bobs Browser abgespielt.

Ich bin nicht einmal sicher, ob dies jetzt mit WebRTC API erstellt werden kann. Alle Beispiele kann ich Strömen erhalten über getUserMedia() finden, aber das ist, was ich habe:

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); 
     } 
    } 
} 

Auf der Empfangsseite habe ich folgendes:

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

Dieser Code nicht über die Medien machen (Musik) spielen auf der Empfangsseite. Ich erhalte jedoch ein beendet Ereignis direkt nach dem WebRTC Handshake erfolgt ist und die goteRemoteStream Funktion aufgerufen wurde. Die gotRemoteStream Funktion wird aufgerufen das Medium startet nicht zu spielen.

Auf Alice 'Seite soll die Magie in der Zeile source.connect (Ziel) passieren. Wenn ich diese Zeile durch source.connect (context.destination) ersetzen, beginnen die Medien korrekt durch Alice Lautsprecher zu spielen.

Auf Bobs Seite wird eine Media-Stream-Quelle basierend auf Alices Stream erstellt. Wenn jedoch der lokale Lautsprecher mit mediaStreamSource.connect (context.destination) verbunden ist, beginnt die Musik nicht über die Lautsprecher zu spielen.

Off Natürlich konnte ich immer die Mediendatei über eine Datachannel senden, aber wo ist der Spaß, dass ...

Irgendwelche Hinweise auf das, was mit meinem Code falsch ist oder einige Ideen, wie meine Anwendungsfall zu erreichen, würde sehr geschätzt werden!

Ich benutze die neuesten und besten Chrome Canary.

Danke.

Answer 1

Es ist möglich, das Audio unter Verwendung des Audio Elemente so zu spielen:

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

das Audio über die WebAudio API Wiedergabe es (noch) nicht für mich arbeiten.

Answer 2

Achten Sie auf Chrome; klingt wie ein Fehler.

versuchen Sie es auf Firefox (ich schlage nachts vor); Wir haben WebAudio-Unterstützung dort, obwohl ich nicht alle Details darüber weiß, was derzeit unterstützt wird.

Auch auf Firefox zumindest haben wir stream = media_element.captureStreamUntilEnded(); Wir verwenden es in einigen unserer Tests in Dom/Media/Tests/Mochitests glaube ich. Auf diese Weise können Sie beliebige Audio- oder Videoelemente aufnehmen und die Ausgabe als Mediastream erfassen.

Edit: siehe unten; Sowohl Chrome als auch Firefox vermissen WebAudio mit WebRTC PeerConnections, aber an verschiedenen Orten. Mozilla hofft, bald den letzten Fehler beheben zu können.

Answer 3

Schauen Sie sich die Seite MediaStream Integration an.Es veranschaulicht die WebRTC-Integration mit der Web Audio API. Insbesondere ist dieses Beispiel für die Frage relevant:

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> 

Ich fürchte jedoch, dass dies nur ein Vorschlag zur Zeit.