tag:forum.selfhtml.org,2005:/self Bild aus Kamera laden – SELFHTML-Forum 2023-05-26T08:52:00Z https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809059#m1809059 worst_case 2023-05-25T13:26:18Z 2023-05-25T14:14:31Z Bild aus Kamera laden <p>Hallo,</p> <p>ich möchte auf einem Webserver ein Bild aus einer Kamera (Instar 9010) laden. Hierzu habe ich folgenden Code:</p> <pre><code class="block">function bild_neuladen() { var kommando = '..' + upcam_url + 'cgi-bin/hi3510/mjpegstream.cgi?-chn=11' + '&-usr=*****&-pwd=*****'; if (first_start == 0) { preload.src = document.getElementById('camimage').src = kommando; first_start = 1; } else { document.getElementById('camimage').src = preload.src; preload.src = kommando; } preload.onload = function() { bild_neuladen(); } } Quelltext hier </code></pre> <p>Wenn ich mit Chrome oder Firefox auf die Webseite mit dem Kamerabild zugreife funktioniert alles ohne Probleme, nur Applegeräte (Safari) zeigen das Bild meist nicht an. Manchmal kommt das Bild beim ersten mal, wenn ich aber auf eine andere Webseite wechsel und wieder zurück auf die Webseite mit dem Kamerabild komme, wird das Bild nicht angezeigt.</p> <p>Wenn hat einen Tip ?</p> <pre><code> Danke worst_case </code></pre> <p>Edit Rolf B: Credentials gelöscht</p> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809060#m1809060 Rolf B 2023-05-25T14:13:49Z 2023-05-25T14:13:49Z Bild aus Kamera laden <p>Hallo worst_case,</p> <blockquote> <p>ich möchte auf einem Webserver...</p> </blockquote> <p><code><selfhtml-interrupt></code><br> Möchtest Du das? Das ist JavaScript, das sind DOM Operationen, das ist ein Web<strong>client</strong> (also der Browser), kein Server.</p> <p>URLs wie <code>&-usr=*****&-pwd=*****</code> in die wilde weite Welt zu verteilen ist tödlich. Ich kenne dein Kamerasystem nicht, aber die Befürchtung ist, dass man mit Kenntnis von usr und pwd die Kontrolle über die Kamera übernehmen kann.</p> <p>Noch tödlicher ist, die Defaultwerte stehen zu lassen, wonach es bei Dir aussieht. Ändere das bitte. Dringend.</p> <p>Wenn die Kamera nur unter deiner Aufsicht betrieben wird und nur in deinem hausinternen Netz, dann ist es nicht so dringend. Aber besser wär's trotzdem.<br> <code></selfhtml-interrupt></code></p> <blockquote> <p>Applegeräte (Safari) zeigen das Bild meist nicht an.</p> </blockquote> <p>Das ist schwierig zu diagnostizieren. Du schreibst "Geräte". Sind das mehrere iPhones? Oder auch Apple Desktops oder iPads?</p> <p>Auf einem iPhone ist die Fehlersuche schwieriger, weil Mobiltelefone keine Browser-Entwicklerwerkzeuge haben. Bei Android kann man das über USB debuggen, wie das bei Apple geht, weiß ich nicht. Auf einem Mac sollte der Safari Entwicklerwerkzeuge haben. Wenn der Fehler da auch auftritt, solltest Du dort zuerst ansetzen.</p> <p>Läuft der Request auf einen Timeout? Apple verwendet vielleicht andere Timeoutwerte. Das siehst Du in den Entwicklerwerkzeugen, die auch ein Safari hat. Schau auf die Netzwerkzugriffe und in die Konsole, ob Fehler protokolliert werden.</p> <p>Die erste Frage ist, ob das Problem im Safari liegt oder ob die Kamera mit Safari-Requests nicht klarkommt. Das sollte sich auf diese Weise herausfinden lassen.</p> <p>Ob dein JavaScript okay ist, kann ich nicht beurteilen. Es sieht aber merkwürdig aus, und es fehlt auch Entscheidendes. Vor allem ist unklar, was es mit den globalen Variablen first_start und preload auf sich hat, und wie der erste Aufruf von bild_neuladen zu Stande kommt. Es <strong>kann</strong> sein, dass Safari ein paar Dinge anders timed und es dadurch zu sogenannten Race-Conditions kommt, die das von Dir geschilderte "mal geht's, mal geht's nicht" erklären können.</p> <p>Eventuell musst Du mehr Code zeigen, und Du müsstest vielleicht auch erklären, was Du mit dieser first_start und bild_neuladen-Logik erreichen möchtest.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809062#m1809062 worst_case 2023-05-25T14:36:30Z 2023-05-25T14:37:14Z Bild aus Kamera laden <p>Servus Rolf,</p> <p>vielen Dank für deine Ausführungen. Ich möchte das noch kurz berichtigen.</p> <p>Kamera und Webserver stehen am gleichen Ort. Der Apache2 Webserver "leitet/verbindet" die feste IP der Kamera mittels ProxyPass/ProxyPassReserve mit einem Namen "/kamera_m1/</p> <p>Wenn ich von außen (trotzdem alles Intranet) auf den Webserver mittels Browser von einem anderen Rechner auf dem Webserver zugreife, holt mir mein "javascript" von der Webseite das Bild von der Kamera und zeigt es im <img> tag an.</p> <p>Die Variablen<code>var first_start=0; var preload = new Image();</code></p> <p>werden im globalen Teil des script deklariert.</p> <p>Der "first_start" soll bewirken, das beim 2. Durchlauf das "vorgeladene" Bild angezeigt wird, danach wieder ein Bild von der Kamera geholt wird. Ich will damit bezwecken, dass das Bild immer erst vorgeladen wird, bevor es angezeigt wird.</p> <p>Passworte und Usernamen ... ist klar ;-)</p> <p>Testgeräte: Ipad und Iphone geht nicht. (Apple-PC habe ich keinen) Android, Windows und Linuxgeräte funktionieren</p> <pre><code> Gruß </code></pre> <p>worst_case</p> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809067#m1809067 Rolf B 2023-05-25T15:19:49Z 2023-05-25T15:19:49Z Bild aus Kamera laden <p>Hallo worst_case,</p> <p>okay. Du hast also ein img Element mit der ID camimage.</p> <pre><code class="block language-html">... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>camimage<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>???<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>Und Du hast JS dieser Art</p> <pre><code class="block language-js"><span class="token keyword">var</span> first_start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> preview <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">bild_neuladen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span>kennen wir schon<span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>Ansonsten müsstest Du bitte die Zähne etwas weiter auseinanderbringen. Wenn Du eine Race-Condition drin hast, die das auslöst, reicht das alles nicht.</p> <p>Wie findet der erste Aufruf von bild_neuladen statt? Das geht aus deinem Code nicht hervor, du zeigst eine Funktion, die sich zwar als load-Handler registrieren möchte, aber ohne einen ersten Aufruf passiert da nichts.</p> <p>Hat das img Element im HTML einen load-Eventhandler? Welchen Wert hat sein src Attribut zu Anfang?</p> <p>Ist das alles, was Du an Script auf der Seite hast? Oder gibt's noch anderes, was da reinmengen kann?</p> <p>Das ist alles noch sehr undurchsichtig. Sorry, aber im Moment sind wir noch an einer Stelle, die bei einem Werkstattanruf so aussähe:</p> <ul> <li>"Bei meinem Auto klappert was, wie repariere ich das?"</li> <li>"Von wo kommt es, wie klingt es, passiert es nur bei bestimmten Geschwindigkeiten oder bei Kurven?"</li> <li>"Ja, also es kommt von vorn".</li> </ul> <p>Auto in die Werkstatt bringen (=Link zur Seite schicken) wäre hilfreicher. Es sei denn, da sind Infos bei, die keiner sehen sollte - wie z.B. Credentials.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809096#m1809096 worst_case 2023-05-26T05:38:37Z 2023-05-26T07:27:18Z Bild aus Kamera laden <p>OK ... wird gemacht, Zähne sind auseinander ;-)</p> <p>Warum die Formatierung hier nicht passt, keine Ahnung. Mir geht es nur um das Bild neu zu laden. Die Steuerung der Kamera funktioniert. (drehen/schwenken/zoom/focus usw.)</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Kamera Rechenreiniger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">HTTP-EQUIV</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html ; charset=utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cache-Control<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-cache, no-store, must-revalidate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pragma<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-cache<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Expires<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/png<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gif/favicon/favicon.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/allgemein.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/format.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">table</span> <span class="token punctuation">{</span> <span class="token property">table-layout</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span><span class="token property">border-collapse</span><span class="token punctuation">:</span>collapse<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>2px solid #000000<span class="token punctuation">;</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span>separate <span class="token punctuation">;</span> <span class="token property">border-spacing</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">th</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">,</span>Arial<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>12pt<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span>1px solid #000000<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#6DCEEE<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">td</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span>1px solid #000000<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.eingabe</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.schalter</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span>65px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.schaltertext</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>7pt<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span><span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">}</span> <span class="token selector">area</span> <span class="token punctuation">{</span><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">input</span> <span class="token punctuation">{</span><span class="token property">cursor</span><span class="token punctuation">:</span>pointer<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">var</span> upcam_url <span class="token operator">=</span> <span class="token string">"/kamera_maschine_1/"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> upcam_ptzObj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string-property property">"stop"</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string-property property">"up"</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string-property property">"down"</span> <span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string-property property">"left"</span> <span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string-property property">"right"</span> <span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token string-property property">"upleft"</span> <span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token string-property property">"upright"</span> <span class="token operator">:</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string-property property">"downleft"</span> <span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string-property property">"downright"</span> <span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string-property property">"home"</span> <span class="token operator">:</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token string-property property">"vscan"</span> <span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token string-property property">"hscan"</span> <span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string-property property">"zoomin"</span> <span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token string-property property">"zoomout"</span> <span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token string-property property">"focusin"</span> <span class="token operator">:</span> <span class="token number">33</span><span class="token punctuation">,</span> <span class="token string-property property">"focusout"</span> <span class="token operator">:</span> <span class="token number">34</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> xmlHttp<span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> xmlfehler<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">var</span> param<span class="token punctuation">;</span> <span class="token keyword">var</span> httpRequest<span class="token punctuation">;</span> <span class="token keyword">var</span> response<span class="token punctuation">;</span> <span class="token keyword">var</span> zufall<span class="token punctuation">;</span> <span class="token keyword">var</span> counter<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">var</span> TimerID<span class="token punctuation">;</span> <span class="token keyword">var</span> first_start<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">var</span> preload <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">uhrzeit_stellen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> heute <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> DatumZeit <span class="token operator">=</span> heute<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>heute<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token operator">+</span> heute<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token operator">+</span> heute<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token operator">+</span> heute<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span> <span class="token operator">+</span> heute<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/param.cgi?cmd=setservertime&-time='</span> <span class="token operator">+</span> DatumZeit <span class="token operator">+</span> <span class="token string">'&-timezone=Europe%2FAthens&-dstmode=off'</span> <span class="token operator">+</span> <span class="token string">'&usr=admin&pwd=admin'</span><span class="token punctuation">;</span> <span class="token keyword">var</span> camimage_obj <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'camimage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> camimage_obj<span class="token punctuation">.</span>src <span class="token operator">=</span> kommando<span class="token punctuation">;</span> TimerID <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>bild_neuladen<span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">bild_neuladen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>TimerID<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/mjpegstream.cgi?-chn=11'</span> <span class="token operator">+</span> <span class="token string">'&-usr=admin&-pwd=admin'</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>first_start <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> preload<span class="token punctuation">.</span>src <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'camimage'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>src <span class="token operator">=</span> kommando<span class="token punctuation">;</span> first_start <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'camimage'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>src <span class="token operator">=</span> preload<span class="token punctuation">.</span>src<span class="token punctuation">;</span> preload<span class="token punctuation">.</span>src <span class="token operator">=</span> kommando<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> e <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"zeit"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> preload<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">bild_neuladen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token parameter">casename</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> upcam_xmlhttp<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>XMLHttpRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// code fuer IE7+, Firefox, Chrome, Opera, Safari</span> upcam_xmlhttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// code fuer IE6, IE5</span> upcam_xmlhttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ActiveObject</span><span class="token punctuation">(</span><span class="token string">"Microsoft.XMLHTTP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>TimerID<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/ptzctrl.cgi?-step=0&-act='</span><span class="token operator">+</span>casename<span class="token operator">+</span><span class="token string">'&-speed=45&usr=admin&pwd=admin'</span><span class="token punctuation">;</span> upcam_xmlhttp<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"get"</span><span class="token punctuation">,</span>kommando<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> upcam_xmlhttp<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> TimerID <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">"bild_neuladen()"</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">8</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> farbe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pos_'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">"#DCDCDC"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pos_'</span> <span class="token operator">+</span> number<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">"green"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//#########################################################################</span> <span class="token keyword">function</span> <span class="token function">upcam_position_laden</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> farbe<span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">8</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> farbe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pos_'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>farbe <span class="token operator">==</span> <span class="token string">"green"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>TimerID<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> xmlHttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/param.cgi?cmd=preset&-act=goto&-status=1&-number='</span><span class="token operator">+</span>i<span class="token operator">+</span><span class="token string">'&usr=admin&pwd=admin'</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"get"</span><span class="token punctuation">,</span>kommando<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> TimerID <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">"bild_neuladen()"</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">upcam_position_speichern</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> farbe<span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">8</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> farbe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pos_'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>farbe <span class="token operator">==</span> <span class="token string">"green"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> xmlHttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/param.cgi?cmd=preset&-act=set&-status=1&-number='</span><span class="token operator">+</span>i<span class="token operator">+</span><span class="token string">'&usr=admin&pwd=admin'</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"get"</span><span class="token punctuation">,</span>kommando<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Position "</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">" wurde gespeichert"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">upcam_position_loeschen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> farbe<span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><=</span><span class="token number">8</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> farbe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pos_'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>farbe <span class="token operator">==</span> <span class="token string">"green"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Wollen Sie die Position: '</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">' wirklich löschen ?'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> xmlHttp<span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> kommando <span class="token operator">=</span> <span class="token string">'..'</span> <span class="token operator">+</span> upcam_url <span class="token operator">+</span> <span class="token string">'cgi-bin/hi3510/param.cgi?cmd=preset&-act=set&-status=0&-number='</span><span class="token operator">+</span>i<span class="token operator">+</span><span class="token string">'&usr=admin&pwd=admin'</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"get"</span><span class="token punctuation">,</span>kommando<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xmlHttp<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Position "</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">" wurde gelöscht"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">step_function</span><span class="token punctuation">(</span><span class="token parameter">keycode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>keycode<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token number">37</span><span class="token operator">:</span> <span class="token comment">// left</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">35</span><span class="token operator">:</span> <span class="token comment">// down & left</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'downleft'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">36</span><span class="token operator">:</span> <span class="token comment">// up & left</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'upleft'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">38</span><span class="token operator">:</span> <span class="token comment">// up</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'up'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">33</span><span class="token operator">:</span> <span class="token comment">// up & right</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'upright'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">39</span><span class="token operator">:</span> <span class="token comment">// up</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'right'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">34</span><span class="token operator">:</span> <span class="token comment">// down & right</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'downright'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">40</span><span class="token operator">:</span> <span class="token comment">// down</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'down'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">107</span><span class="token operator">:</span> <span class="token comment">// plus</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'zoomin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">109</span><span class="token operator">:</span> <span class="token comment">// minus</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'zoomout'</span><span class="token punctuation">)</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">106</span><span class="token operator">:</span> <span class="token comment">// " mal (x)"</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'focusin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token number">111</span><span class="token operator">:</span> <span class="token comment">// "geteilt (/)"</span> <span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'focusout'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">bgcolor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#DCDCDC<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">uhrzeit_stellen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onkeydown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">step_function</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">.</span>keyCode</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onkeyup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>adresse<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>absolute <span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Kamerabild --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>camimage<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Kamerabild<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meine Kamera<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>absolute <span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>10 <span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>60 <span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>640px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>1024px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- Kamerasteuerung --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../gif/kamera/kamerasteuerung.png<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#pt_map<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptImg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>1050<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>60<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>map</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pt_map<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pt_map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzLeftUp<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'upleft'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6,55,26,24,53,7,74,52,61,60,52,73<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzUp<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'up'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>56,8,75,52,89,48,106,52,126,8,88,1<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzRightUp<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'upright'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>124,9,106,52,119,63,127,75,171,56,152,27<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzLeft<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7,57,1,90,8,125,51,109,47,90,52,75<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vpatrol<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">snapDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onmouseup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">snapUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>90,90,39<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzRight<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'right'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>171,58,128,76,131,89,128,104,172,123,177,88<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzLeftDown<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'downleft'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>51,108,9,126,26,154,55,170,73,129,61,120<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzDown<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'down'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>124,171,91,177,55,170,76,127,91,132,107,126<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzRightDown<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'downright'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>171,126,150,153,124,170,109,126,120,117,128,103<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzFocusIn<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'focusin'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2,2,52,2,2,52<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzFocusOut<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'focusout'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2,128,2,178,52,178<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzZoomIn<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'zoomin'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>128,2,178,2,178,52<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ptzZoomOut<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>poly<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'zoomout'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseOut</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseUp</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_ptzcmdSubmit</span><span class="token punctuation">(</span><span class="token string">'stop'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>178,128,178,178,128,178<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span>1050<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>260<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>14pt<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Position<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_1<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_2<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_3<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_5<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_6<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_7<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pos_8<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span>#DCDCDC</span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_auswahl_position</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LADEN<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_position_laden</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SETZEN<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_position_speichern</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LÖSCHEN<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onMouseDown</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">upcam_position_loeschen</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809097#m1809097 Auge 2023-05-26T07:25:12Z 2023-05-26T07:25:12Z Bild aus Kamera laden <p>Hallo</p> <blockquote> <p>OK ... wird gemacht, Zähne sind auseinander ;-)</p> <p>Warum die Formatierung hier nicht passt, keine Ahnung.</p> </blockquote> <p>Ich habe die Formatierung korrigiert. Du hattest den Code als „Inlinecode“ (in Backticks eingeschlossen) formatiert, jetzt ist er als Codeblock (jeweils beginnend und endend mit <code>~~~</code>) formatiert.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde </div> https://forum.selfhtml.org/self/2023/may/25/bild-aus-kamer-laden/1809098#m1809098 Rolf B 2023-05-26T08:52:00Z 2023-05-26T08:52:00Z Bild aus Kamera laden <p>Hallo worst_case,</p> <p>da es deine persönliche Seite ist, mit der vermutlich niemand sonst konfrontiert wird als Du, unterlasse ich jetzt mal die Liste der Punkte, die man gegen dein HTML vorbringen könnte. Nur so viel:</p> <ul> <li> <p>HTML 4 ist out. Heute nimmt man HTML 5, und die Doctype-Angabe dazu sieht so aus:</p> <pre><code><!doctype html> </code></pre> <p>fertig.</p> </li> <li> <p>Man muss nicht alles absolut positionieren. Das erschwert das Design erheblich. Schau Dir Flexbox und Grid an. Das gilt auch für deine Button-„Tabelle“ - das geht auch als Grid.</p> </li> <li> <p>Eine Image-Map ist ebenfalls eine knifflige Sache, vor allem, weil die Area-Angaben in px sind. Wenn das Hintergrundbild der Kamerasteuerung abstrakt ist (also kein verschörkeltes Foto), könntest Du überlegen, es mit SVG neu zu zeichnen, als inline-SVG zu verwenden und die Maus-Events direkt auf die SVG-Pfade zu legen.</p> </li> </ul> <p>Eventregistrierungen mit on-Attributen sind möglich, machen das HTML aber schwerer lesbar. Beschäftige Dich mit <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten#unaufdringliches_JavaScript" rel="nofollow noopener noreferrer">unobtrusive Javascript</a> - in diesem Einleitungsartikel findet Du die Links zu addEventListener und Co.</p> <p>Den globalen XMLHttpRequest verwendest Du nicht. Der kann weg.</p> <p>Dein Ablauf ist also:</p> <ul> <li> <p>Das load Event auf dem Body ruft uhrzeit_stellen() auf. Dort wird das src Attribut des camimage gesetzt und ein 1s timer gestellt, der bild_neuladen aufruft. Die URL, die Du da setzt, sieht mir aber <strong>nicht</strong> nach einer Bild-URL aus, sondern nach einer Steuer-URL. Hier wäre ein XMLHttpRequest wohl sinnvoller.</p> </li> <li> <p>In bild_neuladen wird der Timer beendet - was nicht nötig ist. Das brauchst Du nur, um einen noch nicht abgelaufenen Timer zu unterbrechen. Dann baust Du eine neue URL und setzt sie für Image-Objekt und <img> Element. D.h. jetzt laufen zwei Requests auf die gleiche Ressource parallel los. Das scheint mir nicht geschickt zu sein. Das passiert aber nur beim ersten Mal, danach wird jeweils der preload-Source in den img Source übertragen.</p> </li> </ul> <p>Soll der load-Handler dafür sorgen, dass es zu einem "Dauerfeuer" von Nachladevorgängen kommt? Bist Du sicher, dass der load-Handler auch bei unveränderter URL und unverändertem Kamerabild gerufen wird? Das könnte man auf einem iPhone „beweisen“, indem man irgendwo den aktuellen Timestamp auf die Seite einbaut und bei jedem bild_neuladen Aufruf aktualisiert. Denn wenn deine load-Schleife einmal abbricht, ist der Zyklus unterbrochen. Und ein Mobilgerät kann sich bei sowas durchaus anders verhalten als ein Desktop-Browser, um Ressourcen zu sparen.</p> <p>Eine Alternative zum load-Handler wäre ein setInterval-Aufruf, der bild_neuladen bspw. alle 500ms aufruft. Diese Zeit musst Du für deine Bedingungen passend wählen. Das Image-Objekt hat eine Eigenschaft "complete", die true ist, wenn das Bild fertig geladen ist. Damit könntest Du pro Intervall prüfen, ob das neue Bild schon da ist. Wenn nicht, überspringst Du einen Updatezyklus.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>