wie Stream einbinden (Javascript)?

klausw · 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.

Code Auswählen

<!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

Steigerbalett · 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.

klausw · 27 März 2018, 15:20:11

ich hätte gern Antworten, keine Fragen

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)

Code Auswählen


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

Code Auswählen

sudo nano /etc/systemd/system/ffmpeg.service
Inhalt:

Code Auswählen


[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:

Code Auswählen

sudo systemctl start ffmpeg.service
Autostart beim booten:

Code Auswählen

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.

FHEM Forum

wie Stream einbinden (Javascript)?

klausw

Steigerbalett

klausw