FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: klausw am 26 März 2018, 18:13:39

Titel: wie Stream einbinden (Javascript)?
Beitrag von: klausw am 26 März 2018, 18:13:39
Hallo zusammen,

ich habe Webcams die man über rtsp Protokoll ansprechen kann.
Über ffmpeg mache ich daraus ts Dateien mit zugehöriger m3u8 Datei.
Diese wiederum lassen sich mit der hls.js Bibliothek in eine Website einbinden.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"/>
        <!--script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script-->
        <script src="hls.js/hls.min.js"></script>
        <title>Wintergarten</title>
</head>
<body>
        <video id="video"></video>
  <script>
    if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      // bind them together
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
        hls.loadSource("cam/wintergarten.m3u8");
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
          console.log("manifest loaded, found " + data.levels.length + " quality level");
          video.play();
        });
      });
    }
  </script>
</body>
</html>


Das ganze funktioniert, wie es soll.

Jetzt würde ich die Webcam allerdings in einer FTUI <section> darstellen.
Wie kann ich das ganze da einbinden?
Ich würde das gern direkt und ohne iframe machen.

Grüße
Klaus

Titel: Antw:wie Stream einbinden (Javascript)?
Beitrag von: Steigerbalett am 27 März 2018, 12:18:50
Hallo Klaus,
hast Du Dir zufälligerweise notiert, wie Du die Umwandlung mit ffmpeg machst?
An der Einbindung bin ich auch interessiert.
Titel: Antw:wie Stream einbinden (Javascript)?
Beitrag von: klausw am 27 März 2018, 15:20:11
ich hätte gern Antworten, keine Fragen  8)

Das Beispiel ist für eine Kamera die einen rtsp Stream liefert.
Außerdem nutze ich ein Ramdrive da auf der SD Karte sonst die Speicherzellen ausleiern.

1. RAMdrive anlegen (in meinem Fall 8M groß im Ordner /opt/fhem/www/cam)

sudo mkdir /opt/fhem/www/cam
sudo sh -c "echo 'tmpfs /opt/fhem/www/cam tmpfs nodev,nosuid,size=8M 0 0' >> /etc/fstab"
sudo mount -a

mit df sollte das RAMdrive jetzt angezeigt werden

2. ffmpeg als Service anlegen
sudo nano /etc/systemd/system/ffmpeg.service
Inhalt:

[Unit]
Description=ffmpeg listening and forward stream
After=syslog.target network.target

[Service]
PIDFile=/var/run/ffmpeg.pid
ExecStart= /usr/bin/ffmpeg -rtsp_transport tcp -i "rtsp://192.168.1.22:554/ch0_0.h264" -t 86399 -vcodec copy -hls_time 10 -hls_wrap 6 /opt/fhem/www/cam/wintergarten.m3u8
ExecStop=/bin/kill -s QUIT $MAINPID
Restart=always
User=www-data

[Install]
WantedBy=multi-user.target

testweise staten:
sudo systemctl start ffmpeg.service
Autostart beim booten:
sudo systemctl enable ffmpeg.service

Die http://pfad/zu/wintergarten.m3u8 kannst du jetzt beispielsweise im VLC aufrufen oder mit dem Codebeispiel aus Post 1  über den Browser anschauen.