Kameravideo in Webseite mit WebRTC (pluginfrei & mit Ton)

Smarthome
#1

Schritte zur Ausführung dieses Projekts:

  1. Installieren Go für LINUX, Windows oder macOS
  2. Download / Clone das oben verlinkte Repository
  3. Gehen Sie in den Ordner, in den Sie den Code heruntergeladen haben, und bearbeiten Sie die Datei ./config.json, um Ihre persönlichen IP-Kamera-URLs hinzuzufügen, z. B:
}
   "INSTAR_8015_FHD": {
      "on_demand": true,
      "url": "rtsp://admin:instar@192.168.2.77/11"
   },
    "INSTAR_9020_FHD": {
      "on_demand": true,
      "url": "rtsp://admin:instar@192.168.2.117/12"
   },
    "INSTAR_IN-7011_HD": {
      "on_demand": true,
      "url": "rtsp://admin:instar@192.168.2.63/11"
   }
}
  1. Führen Sie nun den folgenden Befehl aus, um die Anwendung im Entwicklungsmodus auszuführen:
go run .

webrtc_01

Alternative können Sie Ihre Anwendung auch kompilieren und dann ausführen:

go build .
./RTSPtoWebRTC

Mit dem Befehl „build“ wird die binäre Release-Version Ihrer Go-Anwendung erstellt. Diese Datei heißt unter LINUX RTSPtoWebRTC - ohne Erweiterung - und kann von der Kommandozeile oder über ein Skript ausgeführt werden (stellen Sie sicher, dass die Datei vor der Ausführung ausführbar gemacht wird!). Wenn Sie den Befehl unter Windows ausführen, erhalten Sie eine RTSPtoWebRTC.exe-Datei, die Sie durch Doppelklick ausführen können.

  1. Öffnen Sie Ihren Webbrowser und besuchen Sie die folgende URL:
http://127.0.0.1:8888

webrtc_02

#2

Das funktioniert sehr gut.
Ich habe mir versucht, den Player als emmeded HTML object in eine bestehende Seite einzubinden, da als iframe für mich nicht in frage kommt.

         <script src="http://[HIER STEHT DIE IP]:1892/static/js/adapter-latest.js"></script>
        <input type="hidden" name="suuid" id="suuid" value="CAM1">
        <input type="hidden" name="port" id="port" value=":1892">
        <input type="hidden" id="localSessionDescription" readonly="true">
        <input type="hidden" id="remoteSessionDescription">
        <video style="width:1155px" id="videoElem" autoplay muted controls></video>
        <script type="text/javascript" src="http://[HIER STEHT DIE IP]:1892/static/js/app.js?ver=2021-02-            16%2023%3a19%3a05.506071794%20%2b0000%20UTC%20m%3d%2b2073.566953804"></script>

Momentan hänge ich an folgendem:

Wenn ich die Seite lade gibt mir der Browser folgendes zurück:

Access to XMLHttpRequest at 'http://[HIER STEHT DIE IP]:1892/stream/receiver/CAM1' from origin 'http://[HIER STEHT DIE IP]:9082' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

trycatch.ts:163 POST http://[HIER STEHT DIE IP]/stream/receiver/CAM1 net::ERR_FAILED$

Jemand eine Idee wie ich das hinbekomme?

Gruss

#3

Hallo,

und danke für das Feedback :slight_smile:

Da müsste man Cross-Origins im Webserver erlauben - also erlauben, daß die Seite sich Inhalte von unterschiedlichen Orten zusammensammelt. Dafür muß man die unten beschriebenen Zeilen in den HTTP Response Header setzen:

https://www.w3.org/wiki/CORS_Enabled

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

Aber da Go Apps (genau wie Node.js Apps) häufig ihren eigenen Webserver mitbringen, kann man auch mit URL Präfixen arbeiten. Also einen einen Web-Proxy wie NGINX vor den eigentlichen Webserver setzen (das sollte auch direkt in Apache gehen - ist nur nicht mein Gebiet) und dann auf / die Webseite bereitstellen, aber wenn z.B. /webcam aufgerufen wird auf den Webservice der Go App umleiten.

Dann müsste man nur noch das HTML der App anpassen, damit es da keinen Designbruch zur eigenen Webpräsenz gibt.