webentwicklung-frage-antwort-db.com.de

Web Audio API für Live-Streaming?

Wir müssen Live-Audio (von einem medizinischen Gerät) zu Webbrowsern streamen, die nicht mehr als 3-5 Sekunden End-to-End-Verzögerung haben (vorausgesetzt 200 ms) oder weniger Netzwerklatenz). Heute verwenden wir ein Browser-Plugin (NPAPI) zum Dekodieren , Filtern (Hoch, Tief, Band) und Abspielen des Audio-Streams ( Lieferung über Web Sockets).

Wir wollen das Plugin ersetzen.

Ich habe mir verschiedene Web Audio API-Demos angesehen und die meisten unserer erforderlichen Funktionen (Wiedergabe, Verstärkungsregelung, Filterung) scheinen in Web Audio API verfügbar zu sein. Mir ist jedoch nicht klar, ob die Web-Audio-API für Streaming-Quellen verwendet werden kann, da die meisten Web-Audio-APIs kurze Sounds und/oder Audioclips verwenden.

Kann die Web Audio API zum Abspielen von Live-Streaming-Audio verwendet werden?

Update (11. Februar 2015):

Nach ein bisschen mehr Recherche und lokalem Prototyping bin ich mir nicht sicher, ob Live-Audio-Streaming mit der Web-Audio-API möglich ist. Da die Web-Audio-APIs decodeAudioData nicht für die Verarbeitung zufälliger Audiodatenblöcke ausgelegt sind (in unserem Fall über WebSockets). Es scheint, dass die gesamte 'Datei' benötigt wird, um sie korrekt zu verarbeiten.

Siehe stackoverflow:

Jetzt ist es mit createMediaElementSource möglich, ein <audio> - Element mit der Web-Audio-API zu verbinden, aber meiner Erfahrung nach ist das <audio> Führt zu einer enormen Verzögerung von Ende zu Ende (15 bis 30 Sekunden), und es scheint keine Möglichkeit zu geben, die Verzögerung auf weniger als 3 bis 5 Sekunden zu reduzieren.

Ich denke , dass die einzige Lösung darin besteht, WebRTC mit der Web Aduio-API zu verwenden. Ich hatte gehofft, WebRTC zu vermeiden, da dies bedeutende Änderungen an unserer serverseitigen Implementierung erforderlich machen würde.

Update (12. Februar 2015) Teil I :

Ich habe das <audio> - Tag nicht vollständig entfernt (ich muss meinen Prototyp fertigstellen). Sobald ich es ausgeschlossen habe, vermute ich, dass der createScriptProcessor (veraltet, aber immer noch unterstützt) eine gute Wahl für unsere Umgebung ist, da ich unsere ADPCM-Daten (über WebSockets) zum Browser streamen und dann (in JavaScript) in konvertieren könnte PCM. Ähnlich wie in Scotts Bibliothek (siehe unten) wird der createScriptProcessor verwendet. Diese Methode erfordert nicht, dass die Daten in korrekt dimensionierten "Blöcken" und zu einem kritischen Zeitpunkt vorliegen, wie dies beim decodeAudioData-Ansatz der Fall ist.

Update (12. Februar 2015) Teil II :

Nach weiteren Tests habe ich die Schnittstelle von <audio> Zu Web Audio API entfernt, da die End-to-End-Verzögerung je nach Quelltyp, Komprimierung und Browser 3 bis 30 Sekunden betragen kann. Damit bleibt die Methode createScriptProcessor (siehe Scott's Post unten) oder WebRTC erhalten. Nach Gesprächen mit unseren Entscheidungsträgern wurde entschieden, den WebRTC-Ansatz zu verfolgen. Ich gehe davon aus , dass es funktionieren wird. Es sind jedoch Änderungen an unserem serverseitigen Code erforderlich.

Ich werde die erste Antwort markieren, nur damit die "Frage" geschlossen wird.

Danke fürs Zuhören. Sie können nach Bedarf Kommentare hinzufügen.

40
Tony

Ja, die Web-Audio-API (zusammen mit AJAX oder Websockets)) kann für das Streaming verwendet werden.

Grundsätzlich ziehen Sie einige Blöcke mit der Länge n herunter (oder senden sie im Fall von Websockets). Anschließend dekodieren Sie sie mit der Web-Audio-API und stellen sie nacheinander zur Wiedergabe in die Warteschlange.

Da die Web-Audio-API ein hochpräzises Timing aufweist, werden zwischen der Wiedergabe jedes Puffers keine "Nähte" zu hören sein, wenn Sie die Zeitplanung korrekt durchführen.

7
Kevin Ennis

Ich habe ein Streaming-Web-Audio-API-System geschrieben, in dem ich mit Web-Workern das gesamte Web-Socket-Management für die Kommunikation mit node.js ausgeführt habe, sodass der Browser-Thread Audio einfach wiedergibt ... funktioniert auf Laptops einwandfrei, da Mobiltelefone bei ihrer Implementierung in Verzug sind von Web-Sockets in Web-Workern benötigen Sie nicht weniger als Lollipop, damit es wie codiert ausgeführt wird ... Ich habe geschrieben vollständiger Quellcode hier

4
Scott Stensland

Um die Kommentare zu erläutern, wie eine Reihe separater Puffer, die in einem Array gespeichert sind, abgespielt werden, verschieben Sie jedes Mal den neuesten Puffer heraus:

Wenn Sie einen Puffer über createBufferSource() erstellen, verfügt er über ein onended -Ereignis, an das Sie einen Rückruf anhängen können, der ausgelöst wird, wenn der Puffer sein Ende erreicht hat. Sie können so etwas tun, um die verschiedenen Chunks im Array nacheinander abzuspielen:

function play() {
  //end of stream has been reached
  if (audiobuffer.length === 0) { return; }
  let source = context.createBufferSource();

  //get the latest buffer that should play next
  source.buffer = audiobuffer.shift();
  source.connect(context.destination);

  //add this function as a callback to play next buffer
  //when current buffer has reached its end 
  source.onended = play;
  source.start();
}

Ich hoffe, das hilft. Ich experimentiere immer noch daran, wie ich das alles glatt und gebügelt machen kann, aber dies ist ein guter Anfang und fehlt in vielen Online-Posts.

0
worker11811