Przesyłanie strumieniowe plików multimedialnych za pomocą WebRTC

Question

Oto mój przypadek użycia: Alice ma nowy, ciekawy utwór multimedialny, którego chce, aby Bob słuchał. Wybiera plik multimedialny w swojej przeglądarce i plik multimedialny rozpoczyna się natychmiast w przeglądarce Boba.

Nie jestem nawet pewien, czy możliwe jest teraz zbudowanie za pomocą interfejsu API WebRTC. Wszystkie przykłady można znaleźć strumieni zastosowania uzyskanych poprzez getUserMedia(), ale to, co mam:

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

Po stronie odbiorczej Mam następujący:

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

Kod ten nie czyni media (muzyka) grać po stronie odbiorczej. Jednak otrzymuję zdarzenie zakończone zaraz po zakończeniu uzgadniania WebRTC i wywołaniu funkcji getsRemoteStream. Zostanie wywołana funkcja getRemoteStream , a odtwarzanie multimediów nie rozpocznie się.

Po stronie Alicji magia ma się zdarzyć w linii, która mówi: source.connect (miejsce docelowe). Kiedy zamieniam tę linię na source.connect (context.destination), media zaczynają poprawnie grać przez głośniki Alice.

Po stronie Boba źródło strumienia mediów jest tworzone na podstawie strumienia Alicji. Jednak gdy lokalny głośnik jest podłączony przy użyciu mediaStreamSource.connect (context.destination), muzyka nie rozpoczyna odtwarzania przez głośniki.

Off Oczywiście zawsze mogę wysłać plik multimedialny przez DataChannel ale gdzie jest zabawa w tym, że ...

Wszelkie wskazówki na temat tego, co jest nie tak z moim kodu lub kilka pomysłów na to, jak osiągnąć mój przypadek użycia byłby być bardzo docenionym!

Używam najnowszego i najlepszego Chrome Kanarowego.

Dzięki.

Answer 1

Jest możliwe odtwarzanie dźwięku za pomocą elementu audio tak:

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

Odtwarzanie dźwięku za pośrednictwem interfejsu API WebAudio nie działa dla mnie (jeszcze).

Answer 2

Uwaga na pewno na temat Chrome; brzmi jak błąd.

wypróbuj na Firefox (co wieczór proponuję); mamy tam wsparcie WebAudio, chociaż nie znam wszystkich szczegółów na temat tego, co jest aktualnie obsługiwane.

Ponadto, przynajmniej na Firefoksie mamy stream = media_element.captureStreamUntilEnded(); używamy go w niektórych naszych testach w dom/media/tests/mochitests. To pozwala ci wziąć dowolny element audio lub wideo i uchwycić wyjście jako mediastream.

Edytuj: patrz poniżej; zarówno Chrome, jak i Firefox mają problemy z łączeniem WebAudio z WebRTC PeerConnections, ale w różnych miejscach. Mozilla ma nadzieję, że wkrótce naprawi ostatni błąd.

Answer 3

Sprawdź stronę .Obrazuje integrację WebRTC z interfejsem API Web Audio. W szczególności w tym przykładzie jest to istotne dla twojego pytania:

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> 

Obawiam się jednak, że jest to tylko propozycja komunikatu.