Hallo,
aufs Dashboard soll ein Live-Stream von der Autobahn :D
Ich habe einen Dummy namens a13 in FHEM wie folgt angelegt:
list a13
Internals:
CFGFN
FUUID 6136fdd0-f33f-1bf0-a0b4-ba7a342faf2e6e54
NAME a13
NR 16714
STATE ???
TYPE dummy
Attributes:
appOptions { "template": "cam", "dashboard" : true, "setup": { "source": "https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8" } }
room System
Das Widget zeigt aber nur das broken-image-Symbol. Ich nehme an, dass der Browser dazu gebracht werden muss, den Stream anzuzeigen. Wenn ich die M3U8-Playlist z.B. im Firefox öffne, wird sie im Standard-Videoplayer (VLC) in einer neuen Anwendung geöffnet.
Derzeit nutze ich RSS als Dashboard und habe diesen Live-Stream im RSS als iframe eingebunden, wozu ich aber auch eine eigene kleine Webseite mit Player laden bauen musste mit folgendem Code:
<html>
<body style="margin-left: 0px;margin-right: 0px;margin-bottom: 0px;margin-top: 0px;">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" width="400"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
</body>
</html>
Möglicherweise brauche ich ein neues Widget, dass iframes darstellen kann.
Viele Grüße
Boris
Zitat von: Dr. Boris Neubert am 07 September 2021, 08:16:25
Hallo,
aufs Dashboard soll ein Live-Stream von der Autobahn :D
Ich habe einen Dummy namens a13 in FHEM wie folgt angelegt:
list a13
Internals:
CFGFN
FUUID 6136fdd0-f33f-1bf0-a0b4-ba7a342faf2e6e54
NAME a13
NR 16714
STATE ???
TYPE dummy
Attributes:
appOptions { "template": "cam", "dashboard" : true, "setup": { "source": "https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8" } }
room System
Das Widget zeigt aber nur das broken-image-Symbol. Ich nehme an, dass der Browser dazu gebracht werden muss, den Stream anzuzeigen. Wenn ich die M3U8-Playlist z.B. im Firefox öffne, wird sie im Standard-Videoplayer (VLC) in einer neuen Anwendung geöffnet.
Derzeit nutze ich RSS als Dashboard und habe diesen Live-Stream im RSS als iframe eingebunden, wozu ich aber auch eine eigene kleine Webseite mit Player laden bauen musste mit folgendem Code:
<html>
<body style="margin-left: 0px;margin-right: 0px;margin-bottom: 0px;margin-top: 0px;">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" width="400"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://live-edge.rtl.lu/cita/cita_a13/playlist.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
</body>
</html>
Möglicherweise brauche ich ein neues Widget, dass iframes darstellen kann.
Viele Grüße
Boris
Hallo Boris,
eine m3u8-Datei ist eine Wiedergabeliste für Video- und Audio-Dateien. Das template Cam zeigt Bilder an und nutzt dafür das HTML Element <img>
Ich kann für die Wiedergabe solcher Formate im Moment leider keine Lösung anbieten.
Beste Grüße
Jens
Zitat von: jemu75 am 07 September 2021, 22:54:44
eine m3u8-Datei ist eine Wiedergabeliste für Video- und Audio-Dateien. Das template Cam zeigt Bilder an und nutzt dafür das HTML Element <img>
Ich kann für die Wiedergabe solcher Formate im Moment leider keine Lösung anbieten.
Danke für Deine Antwort, Jens.
fhemApp ermöglicht mit knackig-kurzer Konfiguration über das Vue-Framework ein wirklichschönes Frontend für FHEM. Habe kurz mal einen Blick auf das cam-Template und die Vue-Doku geworfen. Grundsätzlich sollte es wohl möglich sein, den von mir in vorigen Beitrag geposteten Javascript-Code in ein Template zu bringen. Allerdings hat Vue eine ziemlich steile Lernkurve, was mich davon abhält, an fhemApp mitzuentwickeln.
Was/welche Tools nutzt Du denn als Entwicklungsumgebung?