IP Kameras Stream mit RTSPtoWEB

Der erste Teil ist von tombox

Rtsp2Web Docker

Ein Stream wird normalerweise via rtsp stream bereitgestellt. Eine Umwandlung via motion eye ist sehr resourcen aufwändig und hat ein Verzögerng. Ein Umwandlung in webrtc ist schneller und Resourcenschonender. Eine Empfehlung ist RTSPtoWeb. Dazu muss ein Docker von ghcr.io/deepch/rtsptoweb:latest erstellt werden.

docker run --name rtsp-to-web -v /YOURPATHFORCONFIG:/config --network host ghcr.io/deepch/rtsptoweb:latest

Es muss ein Volume für den Pfad /config und das network als host eingestellt werden.

Dann ist rtsptoweb erreichbar über

http://IP:8083

Danach benötigen wir die Stream Id. Dafür Stream Edit und in der URL die Id rauskopieren

http://192.168.178.2:8083/pages/stream/edit/ddbdb583-9f80-4b61-bafa-613aa7a5daa5

Nun könnt Ihr den Stream in iQontrol einsetzen: Man muss einfach ein neues Geräte als Widget erstellen und unter Background_HTML folgenden Code einfügen:

<input type="hidden" name="webrtc-url" id="webrtc-url" value="http://192.168.2.2:8083/stream/a34525d7-6d13-421d-9127-2cd7bc4323dc/channel/0/webrtc" /> 
<video id="webrtc-video" autoplay muted playsinline controls style="max-width: 100%; max-height: 100%;" />
<script>
setTimeout(function () {
  function startPlay(videoEl, url) {
    const webrtc = new RTCPeerConnection({
      iceServers: [
        {
          urls: ["stun:stun.l.google.com:19302"],
        },
      ],
      sdpSemantics: "unified-plan",
    });
    webrtc.ontrack = function (event) {
      console.log(event.streams.length + " track is delivered");
      videoEl.srcObject = event.streams[0];
      videoEl.play();
    };
    webrtc.addTransceiver("video", { direction: "sendrecv" });
    webrtc.onnegotiationneeded = async function handleNegotiationNeeded() {
      const offer = await webrtc.createOffer();
 
      await webrtc.setLocalDescription(offer);
 
      fetch(url, {
        method: "POST",
        body: new URLSearchParams({ data: btoa(webrtc.localDescription.sdp) }),
      })
        .then((response) => response.text())
        .then((data) => {
          try {
            webrtc.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: atob(data) }));
          } catch (e) {
            console.warn(e);
          }
        });
    };
 
    const webrtcSendChannel = webrtc.createDataChannel("rtsptowebSendChannel");
    webrtcSendChannel.onopen = (event) => {
      console.log(`${webrtcSendChannel.label} has opened`);
      webrtcSendChannel.send("ping");
    };
    webrtcSendChannel.onclose = (_event) => {
      console.log(`${webrtcSendChannel.label} has closed`);
      startPlay(videoEl, url);
    };
    webrtcSendChannel.onmessage = (event) => console.log(event.data);
  }
 
  const videoEl = document.querySelector("#webrtc-video");
  const webrtcUrl = document.querySelector("#webrtc-url").value;
 
  startPlay(videoEl, webrtcUrl);
}, 1000);
</script>

In der erste Zeile muss nur die IP addresse und die Kamera ID angepasst werden: http://192.168.2.2:8083/stream/a34525d7-6d13-421d-9127-2cd7bc4323dc/channel/0/webrtc

Sobald die Ansicht geladen wird startet der Player mit Videobild.