Template Cam: unterstützte Streams / Einbindung von iframes.

Begonnen von Dr. Boris Neubert, 07 September 2021, 08:16:25

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Dr. Boris Neubert

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:

Code Auswählen
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:
Code Auswählen
<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



Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!

jemu75

#1
07 September 2021, 22:54:44
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:

Code Auswählen
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:
Code Auswählen
<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

Dr. Boris Neubert

#2
08 September 2021, 08:58:51
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?
Globaler Moderator, Developer, aktives Mitglied des FHEM e.V. (Marketing, Verwaltung)
Bitte keine unaufgeforderten privaten Nachrichten!
Drucken
Nach oben Seiten1
Benutzer-Aktionen