Live Audiostreaming auf HTTP in HTML5 einbetten

  • Hallo liebe Community,


    ich habe lange nach einer Lösung gesucht, um einen Audiolivestream vom Mikro über alle möglichen Devices abspielen zu lassen.
    Um erstmal die USB Soundkarte als Fehlerquelle auszuschließen, habe ich erstmal eine mp3 Datei genommen, um hiermit zu testen.
    Auf dem Raspi setze ich also folgenden Befehl ab:

    Code
    vlc-wrapper -vvv ./Musik/test.mp3 --sout '#transcode{vcodec=none,acodec=vorb,ab=128,channels=2,samplerate=44100}:standard{access=http,mux=ogg,dst=raspi:80/stream.ogg}'


    Wenn ich jetzt per VLC auf meinem Rechner diesen Stream aufrufe, spielt dieser es wunderbar mit einer Verzögerung von ca. 1 sekunde ab.


    Bette ich das ganze nun in HTML auf folgender weise ein, funktioniert das ganze nicht:

    Code
    <audio controls preload ='none'>
    <source src="http://raspi/stream.ogg" type="audio/ogg">
    </audio>

    Wenn ich die HTML im Browser öffne, kommt der embedded Player. Hier klicke ich auf Play und es kommt erstmal nichts. Beende ich den Stream auf dem Raspi, wird der Stream im Browser ab dem Zeitpunkt abgespielt, wo ich auf Play gedrückt habe. Der Browser spielt bis zu der Stelle ab, an der ich beim Raspi den Stream abgebrochen habe.
    Meine Vermutung: Der Browser cached den Stream und wartet, bis er die "Datei" heruntergeladen hat. Hat der Stream ein Ende gefunden, spielt der Browser das ganze wie eine Datei ab.


    Habt ihr da eine Lösung für mein Problem?


    Ist das eine Serverseitige Einstellung, oder eine Clientseitige?


    Folgende Dinge habe ich weiterhin ausprobiert:
    access=livehttp //das hatte ich irgendwo gefunden, aber da machen die Browser gar nicht mehr mit (Firefox, Chrome)
    andere Formate wie z.b. mp4, wav, mpeg
    Stream von einem Windows-Rechner mit der VLC Gui erstellt und in HTML5 eingebettet -> gleiches Ergebnis


    Wichtig wäre bei dem ganzen, dass man ganz einfach per Smartphone und qr-code auf den link kommt und direkt abspielen kann. Ohne weitere Apps. Mit icecast habe ich das ganze schon ausprobiert, nur ist hier eine starke Verzögerung von bis zu 10 sekunden, je nach client.


    Vielen Dank für eure Hilfe


    Hermann

  • Hallo hermannr,


    ich habe lange nach einer Lösung gesucht, um einen Audiolivestream vom Mikro über alle möglichen Devices abspielen zu lassen.

    was sind bei Dir "alle möglichen Devices", kann man diese nicht konkret angeben?


    Wenn ich jetzt per VLC auf meinem Rechner diesen Stream aufrufe, spielt dieser es wunderbar mit einer Verzögerung von ca. 1 sekunde ab.

    Wie rufst Du per VLC auf Deinem Rechner den Stream vom Raspi auf?


    Versuche es in HTML einmal an Stelle von


    <source src="http://raspi/stream.ogg" type="audio/ogg">


    testhalber mit


    <source src="http://ipadresse:port/stream.ogg" type="audio/ogg">


    oder mit


    <location>"http://raspi/stream.ogg"</location>


    Ich fand eine Beschreibung, wo einer behauptete, letzteres würde funktionieren, habe da allerdings große Bedenken.


    Hier noch ein Beispiele, das ich gefunden habe:


    <iframe src="http://raspi:port/stream.ogg"></iframe>


    Ansonsten warte, bis Thomas wieder hier ist, der hat damit mehr Erfahrung.


    MfG, kodela

  • Hallo Hermann,
    hallo Kodela,


    im Anhang füge ich eine Beispiel-html-Datei ein, in der das Hörfunkprogramm "1 Live" einmal als html5-Element und einmal als VLC-Webplugin eingebunden ist. Damit kann man den eigenen Stream testen. Zu beachten ist, dass der "1 Live"-Stream kein *.ogg-Format hat.
    Bitte nicht vergessen, die Dateiendung .txt zu entfernen.


    Hinweise für das audio-Element in html5 findet man unter folgenden Links:
    - http://www.w3schools.com/HTML/html5_audio.asp
    - https://wiki.selfhtml.org/wiki…onen_mit_source_einbinden



    Code-Beispiel für die Einbindung eines Radiostreams (Hörfunkprogramm: "1 Live") mit html5

    Code
    <audio controls autoplay preload="none">
    <source src="http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live" type="audio/mpeg" />
    </audio>


    Ich hoffe, die angefügte Beispiel-html-Datei hilft bei der Lösungsfindung.


    MfG
    Thomas

  • Hallo Thomas,


    Deine Demo-Datei hat mir Probleme bereitet. Die Videoanzeige funktionierte. Als ich jedoch auf das rechte obere Fenster klickte hörte ich zwar so etwas ähnliches wie Musik, aber der ganze Monitor war schwarz, in der Mitte der VLC-Kegel und nichts auf der Welt erlaubte mir, diesen Status zu ändern. Ich kam nicht mehr an den Taskmanager, die Desktopanzeige funktionierte nicht und war gezwungen, den Rechner brutal abzuwürgen.


    Da muss ich mir den HTML-Code erst noch einmal genau ansehen, bevor ich diese Datei noch einmal starte.


    MfG, kodela

  • Hallo Kodela,


    in der von mir angefügten html-Datei ist kein Schadcode enthalten. Es sollte auch kein Problem sein, die darin enthaltenen Medieninhalte im Webbrowser Mozilla Firefox wiederzugeben. Der als html5-Code implementierte "1 Live"-Hörfunkstream startet automatisch, während die Tonwiedergabe der anderen drei Medienquellen durch das JavaScript stummgeschaltet sind.


    Im Internet Explorer funktioniert das JavaScript der Beispieldatei nicht. Aber die html5-Hörfunkwiedergabe mit dem im Internetexplorer enthaltenen html5-Medienplayer klappt. Das Bedeutet, die Streamwiedergabe als html5-Element gelingt in diesem Fall Browser übergreifend.


    Im Anhang füge ich einen Bildschirmausdruck ("Webplugin-html5.png") hinzu, der die Ansicht mit dem Webbrowser Mozilla Firefox Version 48.0.2 und dem Windows 7 Taskmanager zeigt. Im Taskmanager sind die Belegung des Arbeitsspeichers zu sehen. Der Webbrowser und der VLC-Plugin-Container verbrauchen den meisten Arbeitsspeicher. Ich habe festgestellt, dass bei mehreren Videoquellen (Bsp.: TV-Mosaic) der VLC-Plugin-Container durchaus 1.000 MB Arbeitspeicher belegt. Möglicherweise gibt es Speicherbelegungs-Probleme mit dem VLC-Plugin, die zum hängen des Betriebssystems führen. Ich habe diesen Effekt auch bereits festgestellt.
    Manchmal hilft es im Taskmanager den Prozess "Explorer" zu beenden und anschließend im Taskmanager unter dem Menü Datei / neuer Task "Explorer" einzugeben und neu zu starten.


    Mehr kann ich zum Thema auch nicht ergänzen.


    MfG
    Thomas

  • Hallo zusammen!


    thweiss:
    Daran, dass in der von Dir angefügten HTML-Datei Schadcode enthalten sein könnte, habe ich nun wirklich nicht gedacht, keine Sekunde. Fakt ist aber, dass mir genau das passiert ist, was ich beschrieben habe und das wollte ich kein zweites Mal riskieren. Deshalb meine Aussage, dass ich mir den HTML-Code erst noch einmal genau ansehen müsse, bevor ich diese Datei noch einmal starte. Das habe ich auch getan und nichts gefunden, was in irgend einer Weise für die eigenartige Reaktion ursächlich sein könnte. Darauf habe ich die Datei nochmals geöffnet, habe wie beim ersten Mal auf das rechte obere Fenster geklickt und es passierte nichts. Du könntest Dich fragen, warum ich überhaupt beim ersten Mal auf dieses Fenster geklickt habe. Die Antwort ist einfach. In den rechten beiden Fenstern sah ich nur den VLC-Kegel und keine Steuerelemente. Na ja, da klickte ich also rein, um zu sehen, was geschehen würde.


    hermannr:
    Wenn man den Code von Thomas auf den kleinsten Nenner bringt, sieht er so aus:

    Code
    <audio autoplay>
    <source src="http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live"/>
    </audio>

    Das entspricht weitgehend Deinem Code:

    Code
    <audio controls preload ='none'>
    <source src="http://raspi/stream.ogg" type="audio/ogg">
    </audio>

    Die Unterschiede sind im Grunde unbedeutend. In meiner Minimal-Version wird lediglich auf die Steuerelemente verzichtet und die Wiedergabe über autoplay gestartet..


    Es stellt sich natürlich die Frage, warum dieser Code bei Dir nicht funktioniert. Das könnte daran liegen, dass dem Browser kein Player zur Verfügung steht. Auch für diesen Fall findet sich im Code von Thomas eine Lösung. Auch hier zeige ich nur eine Minimallösung:

    Code
    <embed src="http://www.byte.fm/stream/bytefm.m3u" type="application/x-vlc-plugin" name="VLC"/>
    <script type="text/javascript">
    var vlc = document.getElementsByTagName("embed");
    </script>

    Voraussetzung ist natürlich das VLC Web-Plugin.


    Zu dieser Aussage von Dir:

    Wenn ich die HTML im Browser öffne, kommt der embedded Player. Hier klicke ich auf Play und es kommt erstmal nichts. Beende ich den Stream auf dem Raspi, wird der Stream im Browser ab dem Zeitpunkt abgespielt, wo ich auf Play gedrückt habe. Der Browser spielt bis zu der Stelle ab, an der ich beim Raspi den Stream abgebrochen habe.
    Meine Vermutung: Der Browser cached den Stream und wartet, bis er die "Datei" heruntergeladen hat. Hat der Stream ein Ende gefunden, spielt der Browser das ganze wie eine Datei ab.

    Meine Vermutung: Der Ton ist beim Start stumm geschaltet.


    MfG, kodela

  • Vielen Dank euch für die Beiträge und eure Hilfe.
    Ich hoffe ich kann jetzt mal auf alle Rückfragen nochmal eingehen.


    Format: Der Grund, warum ich ogg genommen habe, war, dass der Player bei mpeg unter firefox einfach verschwunden ist, wenn ich auf Play gedrückt habe, und unter chrome die Buttons einfach grau wurden. Ich habe mir aber soeben nochmal die html5 von 1live genommen, und damit verschwindet der Player immerhin nicht. Aber es wird auch nichts abgespielt. Wie ich vorhin auch gelesen habe, ist mpeg am meisten Unterstützt, sodass ich wahrscheinlich darauf gehen werde. Mein Problem damit ist jedoch noch, dass da eine Verzögerung von 5 Sekunden auftritt, unter ogg nur 1 Sekunde. Da das ganze eine günstige Übersetzungslösung sein soll, bin ich zwar nicht auf RealTime also rtsp angewiesen, doch eine große Verzögerung wäre nicht ideal. Da denke ich aber, kann man sicherlich auf Server und Client Seite noch einige Schräubchen drehen. Ich meine auch davon gelesen zu haben, in HTML5 Buffergröße vorgeben zu können. Das wäre ideal.


    Endgeräte: Die Endgeräte sollen Smartphones sein. Ich will in Veranstaltungen, wo einige Flüchtlinge dabei sind, denen eine Übersetzung bieten. Nahezu alle haben sowieso ein Smartphone. Falls die keine Kopfhörer dabei haben, kriegen die so billig Dinger. Beim nächsten mal haben die ihre eigenen dabei. Es wäre halt praktisch, einfach per qr code den html5 link in sein Smartphone zu bekommen, um dann direkt den Stream zu haben.


    IP: Ich habe auch die IP genutzt. Nur habe ich es der einfachheit halber und zur besseren Lesbarkeit hier als "raspi" bezeichnet. Sorry, dass ich das erst jetzt sage. Die Verbindung wird ja auch aufgebaut, nur nicht gleich abgespielt.


    Mit dem Player von 1live bekomme ich bei ogg exakt das gleiche Ergebnis, wie es zuvor war. Sobald der Stream am Server abgebrochen wird, wird das gepufferte abgespielt.
    Mit mpeg bin ich folgendermaßen vorgegangen:
    Am Server starte ich vlc mit:

    Code
    vlc-wrapper -vvv /home/pi/Musik/Test.mp3 --sout '#transcode{vcodec=none,acodec=mpga,ab=128,channels=2,samplerate=44100}:standard{access=http,mux=mpeg1,dst=raspi:80/stream}'


    eingebettet habe ich das folgendermaßen:

    Code
    <td width="466" height="262" align="center">1 Live<br>
    <audio controls autoplay preload="none">
    <source src="http://raspi/stream" type="audio/mpeg" />
    </audio></td>

    So, jetzt läuft mir die Zeit davon. Ich muss jetzt zur Arbeit. Heute Abend gehts weiter.


    Gruß


    Hermann

  • Hallo zusammen,


    ich habe mich inzwischen auf eine andere Lösung eingeschossen, da ich einige Probleme hatte. Ich erläutere diese hier, vielleicht stößt jemand ja auf die gleichen Probleme.
    Nachdem ich es mit vlc nicht hinbekommen habe, den Stream direkt im Browser abzuspielen, habe ich das ganze mal mit ffmpeg unter linux ausprobiert. Siehe da, exact das gleiche Problem. Jedoch habe ich dann mal von einem anderen Rechner die html5 Seite aufgerufen, und siehe da, es ging sofort. Scheinbar ist irgendwas auf meinem Rechner, bzgl Codecs oder ähnliches, die es verhindert haben, des Stream zu starten, und das obwohl ich mit edge, chrome und firefox ausprobiert habe.
    Allerdings kann man in html5 keinen Buffer festlegen. Das bedeutet, dass jeder Browser diesen selber bestimmt. Bei mobilen Geräten scheint dieser Buffer wohl größer zu sein, eventuell um kurze Netzausfälle vorzubeugen. Hier hatte ich einen Delay von 10 bis 15 sekunden, während der Delay bei Firefox und Chrome bei ca. 5 Sekunden war.
    Also bin ich auf die Suche nach einer anderen Lösung gewesen, und habe WebRTC gefunden. Hiermit kann man an einen Server einen realtime Stream schicken. Der Client geht per Browser auf den Server und kann via einem html5 Player in Echtzeit den Stream abgreifen.
    Noch habe ich die Lösung nicht fertig, aber so bin ich zuversichtlich.


    Trotzdem vielen Dank euch für eure Hilfe.