Autor Thema: JPG-Stream mit Javascript einbinden  (Gelesen 135 mal)

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 899
  • und es werden immer mehr...
JPG-Stream mit Javascript einbinden
« am: 21 April 2017, 11:20:01 »
Ein herzerfrischendes "Moin" vom hintern-Deich vorweg

Ich brauche mal die Hilfe an die Erleuchteten unter uns, die sich sowohl mit dem FHEMWEB - Interface auskennen als auch mit Javascript.

Ich habe das Problem, dass ich meine IP-Kamera als Live-Stream erfolgreich in fhem eingebunden hatte.

Zunächst per weblink iFrame - Das funktionierte ganz früher. Dann hat Firefox beschlossen keine iFrames mehr von fremden Hosts (Andere IP) zuzulassen und "Aus war die Maus".

Dann hatte ich es mit "weblink htmlCode <embed..." realisiert wobei ich auf den das Plugin von VLC zugegriffen und einen rtsp Stream geladen habe.
Dann hat Firefox beschlossen die Unterstützung für alle NPAPI-Plugins im März 2017 einzustellen. Und wieder war "Aus die Maus"

Jetzt versuche ich den Teil der mobilen Ansicht der Weboberfläche der Kamera einzubinden die mir den kontinuierlichen Strem der JPG-Dateien anzeigt. Den Code der Webseite habe ich angefügt. Auf dem Bild erkennt man die Zahl hinter auto.jpg? welche sich im Takt der Frames laufend ändert.

Meine Frage: Wie kann ich diese Webseite in fhem so einbinden, das sich die jpg-Bilder - wie auf dem Web-Interface der Kamera - ständig refreshen. Also, wo muss welcher Teil (JAVA-Skript) gespeichert und innerhalb von fhem (weblink?) eingebunden wie werden?

Ich beiße mir schon seit 2 Tagen die Zähne aus.

Danke für Eure Hilfe!

Gruß
    Sailor




<html><head>
<title>Video Mobile</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script type="text/javascript" src="js/language.js"></script><script src="/web/English/language.js"></script>
<script language="javascript">
<!--
var img = new Image();
var imgObj;

function preload()
{
img.src='/tmpfs/auto.jpg?'+new Date;
}

function changesrc()
{
img1.src=img.src;
preload();
setTimeout(changesrc,3500);
}

function update()
{
imgObj = document.getElementById('img1');

imgObj.src = img.src;
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function takeError()
{
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
}

function startonload()
{
img.src = "/tmpfs/auto.jpg?" + (new Date()).getTime();
img.onerror=takeError;
img.onload=update;
}

function load()
{
if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
{
preload();
changesrc();
return;
}
startonload();
}

function ptzUpSubmit()
{
form1.action="cgi-bin/hi3510/ytup.cgi";
form1.submit();
}

function ptzDownSubmit()
{
form1.action="cgi-bin/hi3510/ytdown.cgi";
form1.submit();
}

function ptzLeftSubmit()
{
form1.action="cgi-bin/hi3510/ytleft.cgi";
form1.submit();
}

function ptzRightSubmit()
{
form1.action="cgi-bin/hi3510/ytright.cgi";
form1.submit();
}

//-->
</script>
</head>
<body onload="load()">
<form name="form1" method="get" target="test">
</form>
<p><input value="↑" name="B3" onclick="ptzUpSubmit()" type="button">
<input value="↓" name="B2" onclick="ptzDownSubmit()" type="button">
<input value="←" name="B1" onclick="ptzLeftSubmit()" type="button">
<input value="→" name="B0" onclick="ptzRightSubmit()" type="button">
<button type="button" name="B4" onclick="location.reload()"><script type="text/javascript">document.write(str_refresh);</script>Refresh</button>
</p>
<p><img id="img1" src="http://192.168.178.21/tmpfs/auto.jpg?1492765347275" border="0"></p>
<iframe name="test" style="none" width="0" height="0"></iframe>

</body></html>

******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16005
Antw:JPG-Stream mit Javascript einbinden
« Antwort #1 am: 21 April 2017, 12:05:00 »
1. Du koenntest ein nginx/apache/etc Proxy aufsetzen, der die Seite der Webcam anzeigt, aber zusaetzlich den HTTP Header
X_Frame-Options: ALLOW-FROM http://meinfhemhost:port/fhem
hinzufuegt. Habs nicht getestet, kann mich also irren.


2.
defmod wl weblink htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://videoserver/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg">videoserver muss angepasst werden

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 899
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #2 am: 21 April 2017, 13:33:08 »
Hallo Rudi

1. Du koenntest ein nginx/apache/etc Proxy aufsetzen, der die Seite der Webcam anzeigt, aber zusaetzlich den HTTP Header
X_Frame-Options: ALLOW-FROM http://meinfhemhost:port/fhem
hinzufuegt. Habs nicht getestet, kann mich also irren.


2.
defmod wl weblink htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://videoserver/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg">videoserver muss angepasst werden

Habe hinsichtlich deines Vorschlags 2 mal folgendes probiert:

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="vidimg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="#vidimg" border="0"></img>

htmlCode <script type="text/javascript">function vidload(){ $("#img1").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,3000)} vidload()</script><img id="img1" border="0"></img>

Bei Variante 1 bekomme ich das gewünschte Bild genau einmal, und dann wird im vorgegebenen Takt mit einem "broken Image" Symbol geantwortet.

Bei Variante 2-3 kommt das "broken Image" Symbol von Anfang an in der vorgegebenen Taktrate.

Wir sind schon fast da... Das kann sich hier nur noch um eine Kleinigkeit handeln...

Gruß
   Sailor
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16005
Antw:JPG-Stream mit Javascript einbinden
« Antwort #3 am: 21 April 2017, 13:48:32 »
Zitat
Bei Variante 1 bekomme ich das gewünschte Bild genau einmal, und dann wird im vorgegebenen Takt mit einem "broken Image" Symbol geantwortet.
Offensichtlich kann die Kamera kein ?Zahl, auch wenn es in deinem ersten Post so im Code steht. Evtl kannst du es weglassen, auf das Risiko hin, dass der Browser die Bilder aus dem Cache holt.

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 899
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #4 am: 21 April 2017, 17:25:32 »
Offensichtlich kann die Kamera kein ?Zahl, auch wenn es in deinem ersten Post so im Code steht. Evtl kannst du es weglassen, auf das Risiko hin, dass der Browser die Bilder aus dem Cache holt.

htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg?"+(new Date).getTime());;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>
htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg"+(new Date).getTime());;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>
htmlCode <script type="text/javascript">function vidload(){ $("#vidimg").attr("src","http://192.168.178.21/tmpfs/auto.jpg");;setTimeout(vidload,1100)} vidload()</script><img id="vidimg" src="http://192.168.178.21/tmpfs/auto.jpg" border="0"></img>
bringen keine Besserung.

Die letzte Variante allerdings lässt das Bild stehen... Ich vermute du liegst mit dem gecachten Bild richtig.

******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16005
Antw:JPG-Stream mit Javascript einbinden
« Antwort #5 am: 21 April 2017, 17:46:33 »
Kannst du im Browser
http://192.168.178.21/tmpfs/auto.jpg?1234567890
richtig anzeigen?

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 899
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #6 am: 21 April 2017, 19:53:25 »
Kannst du im Browser
http://192.168.178.21/tmpfs/auto.jpg?1234567890
richtig anzeigen?

Jawohl, das ist ja das Komische!
« Letzte Änderung: 21 April 2017, 19:57:11 von Sailor »
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 16005
Antw:JPG-Stream mit Javascript einbinden
« Antwort #7 am: 21 April 2017, 20:27:16 »
Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?

Offline Sailor

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 899
  • und es werden immer mehr...
Antw:JPG-Stream mit Javascript einbinden
« Antwort #8 am: 21 April 2017, 20:44:11 »
Sieht du was Erwaehnenswertes in der JavaScript Console?
Evtl. auf dem Netzwerk-Tab?
Nein, nichts Auffälliges...


« Letzte Änderung: 21 April 2017, 20:49:38 von Sailor »
******************************
Raspberry Pi mit DbLog, HomeMatic HMLAN
13x HM-SEC-SC; 11x HM-TC-IT-WM-W-EU; 13x HM-CC-RT-DN; 03x HM-Sec-SD; 01x HM-WDS10-TH-O; km200 mit Buderus GB172

 

decade-submarginal