Popup bei Telefonanruf

Mustermann · 26 Juni 2018, 18:30:21

@ Sailor

Nach welcher Anlkeitung "oben" hast du es gebaut?

Und wie sieht dein Code zum einbinden des Kamera-Streams denn aus?

Grüße aus Bayern

Sailor · 26 Juni 2018, 20:22:00

Hallo Mustermann

Zitat von: Mustermann am 26 Juni 2018, 18:30:21
Nach welcher Anlkeitung "oben" hast du es gebaut?
Und wie sieht dein Code zum einbinden des Kamera-Streams denn aus?

Nach der Anleitung von Accessburn.

Die Zeile zum einbinden des Streams lautet:

Code Auswählen

<img src = "http://192.168.178.15:9000/?action=stream" width="640" height="360" alt="Door Station Picture"></img>

Wie gesagt, der Stream wird laufend angezeigt.
Leider unterbricht der DoorPi-RasPi den Strem bei Betätigung des Klingelknopfs, schießt ein Photo und startet den Stream wieder.

Dadurch muss ich jedesmal den Browsr refreshen (F5) um wieder einen Stream sehen zu können.

Das muss doch auch anders gehen...

Gruss
Sailor

Sailor · 26 Juni 2018, 22:08:14

Moin zusammen

ich bin ein bisschen weiter...

Folgernder Code erlaubt mir das Popup mit dem Stream zu laden und zunächst zu pausieren.
Das Popup mit dem Stream wartet im Hintergrund pausiert und verursacht keinen Datentraffic.

So weit so gut

Man klingelt an der Tür und das Popup geht auf...

Jetzt die alles entscheidende Fragen:
a) Wie kann ich in dem Code das "paused" von true auf false setzen, sobald das Popup in den Vordergrund geschoben wurde...
b) Wie kann ich in dem Code das "paused" von false auf true setzen, sobald das Popup in den Hintergrund geschoben wurde...

Siehe im Code unten folgende Zeile :

Code Auswählen

var paused = true; // Do not start stream immediately to avoid having data streamed to the background popup

index.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     */
    -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />

<script src="js/fhem-tablet-ui.js" defer></script>



<title>Sailors Home</title>

</head>
<body style="overflow:hidden;" onload="createImageLayer();">
<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="6">
			<div class="">
				<div data-type="pagebutton" data-url="#page_content_home.html" data-load="#content_home"
				data-off-background-color="transparent" data-off-color="#4C5D71"
				data-on-background-color="#4C5D71" data-on-color="#223343"
				data-active-pattern="(.*/||.*index.html||.*#page_content_home.html)"
				data-icon="fa-home"
				class="default top-space"></div>
			</div>
		</li>

		<li data-row="1" data-col="2" data-sizex="9" data-sizey="6">
			<div class="page" id="content_home"></div>
		</li>

		
		<div class="top-space">
			 <div data-type		= "popup" 
				   data-device	= "OS_DoorStation" 
				   data-get	= "call" 
				   data-get-on	= "started"
				   data-get-off	= "ended"
				   data-height	= "800px" 
				   data-width	= "1400px">
				  <div >
				  </div>
				  
				  <div class="dialog">
						<header>ANRUF</header>
						<div class	= "red bold big top-space-2x">
							Da ist Jemand an der Pforte!
						</div>

						<script type="text/javascript">

							/* Copyright (C) 2007 Richard Atterer, richardÂ©atterer.net
							   This program is free software; you can redistribute it and/or modify it
							   under the terms of the GNU General Public License, version 2. See the file
							   COPYING for details. */

							var imageNr = 0; // Serial number of current image
							var finished = new Array(); // References to img objects which have finished downloading
							var paused = true; // Do not start stream immediately to avoid having data streamed to the background popup

							function createImageLayer() {
							  var img = new Image();
							  img.style.position = "absolute";
							  img.style.zIndex = -1;
							  img.onload = imageOnload;
							  img.onclick = imageOnclick;
							  img.src = "http://192.168.178.15:9000/?action=snapshot&n=" + (++imageNr);
							  var webcam = document.getElementById("webcam");
							  webcam.insertBefore(img, webcam.firstChild);
							}

							// Two layers are always present (except at the very beginning), to avoid flicker
							function imageOnload() {
							  this.style.zIndex = imageNr; 			// Image finished, bring to front!
							  while (1 < finished.length) {
								var del = finished.shift();		// Delete old image(s) from document
								del.parentNode.removeChild(del);
							  }
							  finished.push(this);
							  if (!paused) createImageLayer();
							}

							function imageOnclick() { // Clicking on the image will pause the stream
							  paused = !paused;
							  if (!paused) createImageLayer();
							}
						</script>
						
						
						<div id="webcam"><noscript><img src="http://192.168.178.15:9000/?action=snapshot" /></noscript></div>

						<br>
						<div data-type				= "link" 
							data-width				= "130" 
							data-height				= "50" 
							data-color				= "white" 
							data-background-color	= "red" 
							data-icon				= "fa-check" 
							class					= "round top-space-2x left-space-3x" 
							onclick					= "$('.dialog-close').trigger('click');">
							OK
						</div>
				  </div>
			 </div>
		</div>


	</ul>
</div>
</body>
</html>

Danke für eure Hilfe!

Gruss
Sailor

tomster · 27 Juni 2018, 14:00:45

Zitat von: Sailor am 26 Juni 2018, 08:00:47
Frage:
1) Habt Ihr eine Ahnung, wie ich den Stream einbinden kann, so dass er erst dann geladen wird, wenn das Popup in den Vordergrund gehoben wurde?
2) Wie kann man den Stream wieder unterbrechen, sollte das Popup wieder in den Hintergrund geschoben worden sein.

Ich finde zwar in meinem ganzen Versions-Wirrwarr den von mir damals verwendeten Code gerade nicht, aber aus der Erinnerung kurz:

Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State:
1. Das Popup geht auf
2. Erst jetzt wird der Image-Link zum Kamera-Stream gesetzt

Code Auswählen


<div data-type="popup" data-device="KameraURL" data-get="STATE" data-get-on="http://192.168.178.15:9000/?action=stream" data-get-off="0" data-height="600" data-width="730" data-mode="fade" class="interlock">
<div class="dialog">
<div data-type="image" data-device="KameraURL" data-width="729 data-height="609"></div></div></div>

Nach x Sekunden wird der Dummy dann wieder auf "0" gesetzt (in FHEM). Damit wird der Stream unterbrochen (die URL "0" führt ja nirgendwo hin) und gleichzeitig das Pop-Up wieder geschlossen.

Code Auswählen


Tuerklingel:trigger:.* set KameraURL http://192.168.178.15:9000/?action=stream ; defmod reset_KameraURL at +00:01:00 set KameraURL 0

Soweit die damalige Praxis. Ich hab das Thema nur verwerfen müssen, weil meine Kamera eine Authentifizierung a la http://user:password@ip benötigt, und diese seit einiger Zeit von keinem Browser mehr unterstützt wird. Das "Mein-Stream-läuft-dauernd-Problem" hatte meine Version aber glaub ich erledigt. Is aber schon ein bissl her, drum keine Gewähr...

Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.

Sailor · 28 Juni 2018, 12:35:48

Hi Tomster

Zitat von: tomster am 27 Juni 2018, 14:00:45
Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State:
Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.

Das sieht richtig gut aus!!!
Ich werde berichten!

Gruß
Sailor

Ulm32b · 29 Juni 2018, 22:39:40

Zitat von: tomster am 27 Juni 2018, 14:00:45
Ich habe ich mir einen Dummy namens "KameraURL" definiert. Diesen Dummy setze ich zunächst auf "0". Wenn jemand klingelt, dann wir der Dummy-State mit der tatsächlichen URL zum Kamera-Stream ersetzt (über ein notify in FHEM). Innerhalb des FTUI-Codes reagiert das Pop-Up auf den o.g. Dummy, respektive dessen State: [,,,]

Soweit die damalige Praxis. Ich hab das Thema nur verwerfen müssen, weil meine Kamera eine Authentifizierung a la http://user:password@ip benötigt, und diese seit einiger Zeit von keinem Browser mehr unterstützt wird. Das "Mein-Stream-läuft-dauernd-Problem" hatte meine Version aber glaub ich erledigt. Is aber schon ein bissl her, drum keine Gewähr...

Vielleicht löst diese Variante aber auch Dein 2. Problem mit dem Stop/ Pause des Streams.

Mit Instar-Kameras klappt die Einbindung in FTUI; zumindest dieses Problem habe ich nicht.

Die Idee zum Ein- und Ausschalten des Videostreams habe ich in folgender Testumgebung (ohne Popup) bei mir nachgebaut:

Code Auswählen

<div data-type="switch" data-device="Videoadresse" data-get-on="http://192.168.178.52:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=xxx&-pwd=yyy" data-get-off="Null" data-set-on="http://192.168.178.52:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=xxx&-pwd=yyy" data-set-off="Null"></div>
<div data-type="image" data-device="Videoadresse" data-get="STATE" data-size= "92%" class="nocache"></div>

Code Auswählen

defmod Videoadresse dummy
attr Videoadresse event-on-change-reading 1

Damit kann man den Videostream ein- und ausschalten. Die Wirkung auf den Netzwerktraffic ist beachtlich.
Leider gibt es noch ein kleines Problem: Die Änderung in Videoadresse:STATE kommt erst (aber immerhin zuverlässig) beim nächsten Full Refresh beim Image-Device an, d.h. die Umschaltung ist entsprechend verspätet. Das verstehe ich nicht, denn event-on-change-reading ist aktiviert.

Auch data-refresh="5" o.ä. ändert nichts. Im Wiki ist hierzu beim Image-Widget ohnehin vermerkt:

ZitatEs kann nur data-url + data-refresh oder data-device + data-get verwendet werden, nicht beides gleichzeitig

Nun hoffe ich auf eine einfache Lösung, denn bei tomster hat es ja schon funktioniert. Wie also bringe ich das Image-Device dazu, sofort auf die Änderung des readings zu reagieren?

Sailor · 25 September 2018, 12:30:15

Hi Tomster

Zitat von: Sailor am 28 Juni 2018, 12:35:48
Hi Tomster

Das sieht richtig gut aus!!!
Ich werde berichten!

Gruß
Sailor

Sorry, dass ich mich bis jetzt nicht gemneldet habe.
Dein Ansatz hat leider nicht funktioniert, da die URL nicht von dem "<div><img..." übernommen wird.

Gruss
Sailor

FHEM Forum

Popup bei Telefonanruf

Mustermann

Sailor

Sailor

tomster

Sailor

Ulm32b

Sailor