# Website Integration Ihrer INSTAR IP Kamera
**URL:** https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343
**Category:** Wiki Diskussionsrunde
**Tags:** entwickler
**Created:** [29. April 2020 um 15:31 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343 "2020-04-29T15:31:14Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [29. April 2020 um 15:31 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/1 "2020-04-29T15:31:14Z")
## Website Integration Ihrer INSTAR IP Kamera
> **[Website Integration der INSTAR Kameras – INSTAR Wiki](https://wiki.instar.com/de/Erweitert/Webseiten_Einbindung/)**
>
> Fügen Sie Ihr Kamerabild zu Ihrer privaten Website hinzu um Livebilder zu generieren. Anleitungen für HTML5 Videostream, Cambozola Java Plugin und PHP Skripte.
Fügen Sie das Live Video Ihrer Kamera in Ihre Webseite ein. Oder laden Sie Einzelbilder auf Ihren Webserver und binden Sie diese auf Ihrer Seite ein.
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [6. Januar 2021 um 08:23 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/2 "2021-01-06T08:23:11Z")
Prinzipiell funktioniert es…
Habe versucht dies in Joomla einzubinden und dabei festgestellt, daß es nur mit dem vorgegebenen Pfad funktioniert.
``
das geht nicht (was ich benötige):
``
das auch nicht (Ordner „js“ nach „x“ umbenennen und den Pfad in der HTML anpassen):
``
Die Dateien liegen selbstverständlich im korrekten Ordner…
LG Thomas
PS: das bezieht sich hierauf:
[https://wiki.instar.com/de/Erweitert/Webseiten\_Einbindung/HTML5\_Stream\_Full\_HD\_Kameras/](https://wiki.instar.com/de/Erweitert/Webseiten_Einbindung/HTML5_Stream_Full_HD_Kameras/)
---
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [6. Januar 2021 um 09:06 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/3 "2021-01-06T09:06:37Z")
Hallo,
hmm das schaut eigentlich genauso aus wie hier im Node-RED Beispiel:
> **[HTML5 Videostream in Dashboard (INSTAR IP Camera)](https://discourse.nodered.org/t/html5-videostream-in-dashboard-instar-ip-camera/37337)**
>
> HTML5 Videostream from your IP Camera Bevore I was only able to add JPG Images or an MJPEG Stream to the Node-RED Dashboard. But INSTAR recently published a set of Javascript files (webassembled FFMPEG) to bring their cameras h.264 video stream in...
Dort hat der Pfad zum Frontend das `/ui` Präfix. Aber ich konnte dann einfach den `js` Unterordner im Public Directory anlegen und die JS Dateien relativ einbinden:
```nohighlight
```
Die Datei ist danach über `/ui/js/commonff.js` erreichbar und wird vom Frontend korrekt verwendet.
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [6. Januar 2021 um 09:37 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/4 "2021-01-06T09:37:20Z")
Habe nochmal einen Versuch (rein HTML) aufgebaut:
js/commonff.js - geht
joomla/js/commonff.js - geht nicht
Wenn du mir eine Mail-Adresse via PN schicken könntest, sende ich dir den Versuchsaufbau…
---
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [6. Januar 2021 um 09:45 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/5 "2021-01-06T09:45:43Z")
Ich denke das liegt an der Webserver Konfiguration - ich gehe davon aus, dass Node-RED eigene Location Blocks für alle Unterverzeichnisse hat. D.h. Traffic der über `/` geht an den Prozess `1`. Traffic der über `/ui/` reinkommt dann direkt an Prozess `2`. Also sowas in NGINX:
```auto
server {
listen 80;
listen [::]:80;
server_name localhost;
location /ui {
proxy_pass http://process1:8081/;
}
location /ui2 {
proxy_pass http://process2:8082/;
}
location /ui3 {
proxy_pass http://process3:8083/;
}
}
```
Damit wird bei relativen Links automatisch das Präfix angehangen.
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [6. Januar 2021 um 10:02 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/6 "2021-01-06T10:02:25Z")
Da kenne ich mich jetzt zwar nicht aus… hatte aber so was Ähnlichs in Verdacht.
Meiner (Apache) läuft auf einer DS in Docker auf Port 88 - darum hätte ich dich um einen Test gebeten, damit das ausgeschlossen werden kann.
Wenn ich
``
mach, gehts auch nicht.
War´s das dann für mich? 😪
---
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [6. Januar 2021 um 16:11 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/7 "2021-01-06T16:11:16Z")
Ooookay - hatte jetzt mal reingeschaut. Wenn man den Webserver mit einem URL Präfix konfiguriert (wie oben skizziert), dann läuft es ohne Probleme.
Ich habe hier einmal ein Repo hochgeladen - einfach nach `/opt/html5_video_prefix` klonen und mit `docker-compose up` hochfahren (wenn man das Verzeichnis ändert muß man in der `docker-compose.yml` und in der NGINX `default.conf` auch das Verzeichnis zum HTML source code anpassen):
> **[GitHub - mpolinowski/html5\_video\_prefix: Add your IP camera live video to...](https://github.com/mpolinowski/html5_video_prefix)**
>
> Add your IP camera live video to your HTML5 website. NGINX configuration to handle a URL prefix for your web service. - GitHub - mpolinowski/html5\_video\_prefix: Add your IP camera live video to you...
Die Seiten sind mit dem Präfix `server1` - `server3` erreichbar:
```bash
http:///server1/
http:///server2/
http:///server3/
```
Und die JS Dateien entsprechend in dem `js/` Unterverzeichnis. Also genau wie bei deinem Aufbau:
Mit Apache kenne ich mich leider nicht aus. Aber das gleiche müsste dort mit dem `mod_rewrite` Modul gehen - hört sich zumindest identisch an:
[https://httpd.apache.org/docs/current/mod/mod\_rewrite.html](https://httpd.apache.org/docs/current/mod/mod_rewrite.html)
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [7. Januar 2021 um 06:01 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/8 "2021-01-07T06:01:45Z")
Ich bin verwirrt.
mod\_rewrite hat gefehlt - läuft jetzt, .htaccess ist aktiv - geht aber noch nichts.
Ich brauche aber eine anderen Aufbau wie du in deinen Beispielen:
dein aufbau entspricht etwa meinem (da geht es):
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [7. Januar 2021 um 06:02 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/9 "2021-01-07T06:02:17Z")
wenn ich es aber so mache, wie ich es brauche, dann nicht:
---
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [7. Januar 2021 um 06:19 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/10 "2021-01-07T06:19:29Z")
Das ist richtig - der `js` Ordner muß im Root des Dienstes liegen… Wie schaut es aus, wenn du ihn neben den `joomla` Ordner legst? Also auf einer Ebene mit der `index.html` ?
EDIT:
Bzw. das ist ja genau das was im ersten Beispiel vorliegt. Also da funktionierts. Der Ordner muß ins Rootverzeichnis.
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [7. Januar 2021 um 07:36 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/11 "2021-01-07T07:36:54Z")
Nee, nix geht ;–
Habe jetzt auf i-frame mit relativer Höhe umgestellt, und noch einen responsive-canvas ergooglet.
Das Ergebnis passt, der WAF ist gegeben…
---
### Author:  [@m.polinowski](https://forum.instar.com/u/m.polinowski)
#### Post date: [7. Januar 2021 um 07:41 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/12 "2021-01-07T07:41:27Z")
Dann verstehe ich das Problem nicht. Wenn die JS Dateien auf Root Ebene liegen sollten die auf jeden Fall erreichbar sein und verwendet werden.
Das iFrame geht auf die WebUI der Kamera? Oder auf einen anderen Serverblock im Apache in dem der HTML5 Stream abgegriffen wird?
---
### Author:  [@Thomas\_Baumgartner](https://forum.instar.com/u/Thomas_Baumgartner)
#### Post date: [7. Januar 2021 um 07:45 UTC](https://forum.instar.com/t/website-integration-ihrer-instar-ip-kamera/26343/13 "2021-01-07T07:45:15Z")
der i-frame geht auf eine eure HTML, welche ich dann noch responsive ausgebaut habe.