Incorporare lo stream CCTV in una pagina web

Gioxx

11 years ago

AXIS Datacenter web-cam-pic È una “pillola” strana, lo so, eppure stava lì nelle bozze del blog senza mai vedere la “luce della pubblicazione“. Questo codice mi è servito diverso tempo fa in ufficio per mostrare le immagini in tempo (quasi) reale catturate da due telecamere di sicurezza poste nel nostro datacenter. Un refresh di un secondo, una pagina web che racchiude svariate informazioni e -appunto- le immagini di due camere di sicurezza Axis che tramite un URL preciso producono un’immagine jpg da poter includere in un HTML tramite codice Javascript, questo:

  
          <script language="JavaScript" type="text/javascript">
        
          			function reloadfront() {
        
          				setTimeout(1000);
        
          				var obj = document.getElementById(id);
        
          				obj.src = "http://CAM1.localhost.tld/axis-cgi/mjpg/video.cgi";
        
          			}
        
          		</script>
        
          		<img src="http://CAM1.localhost.tld/axis-cgi/mjpg/video.cgi" name="front" width="320" height="240" id="front" onload='reloadfront()'>

view raw CaptureCam.html hosted with ❤ by GitHub

Dimensioni dell’immagine di output, refresh e URL sono valori modificabili in qualsiasi momento, il nome della funzione ovviamente andrà modificato per ciascuna webcam che intendete includere all’interno della pagina così da poterle gestire con snippet Javascript separati e modificarne i valori. Regolate l’intervallo di aggiornamento in base al consumo di banda e CPU della macchina sulla quale ospiterete la pagina web per evitare strane sorprese (tutto dipende dalla quantità di gente che accede alla pagina stessa, è facile far danni) ed il gioco è fatto! ;-)

Grazie a digitalham.co.uk/web/development/embedding-cctv

Correzioni, suggerimenti? Lascia un commento nell'apposita area qui di seguito o contattami privatamente.
Ti è piaciuto l'articolo? Offrimi un caffè! ☕ :-)

L'articolo potrebbe non essere aggiornato

Questo post è stato scritto più di 5 mesi fa, potrebbe non essere aggiornato. Per qualsiasi dubbio lascia un commento!

Pillole

Articoli rapidi e pratici. fai clic qui.

	<script language="JavaScript" type="text/javascript">
	function reloadfront() {
	setTimeout(1000);
	var obj = document.getElementById(id);
	obj.src = "http://CAM1.localhost.tld/axis-cgi/mjpg/video.cgi";
	}
	</script>
	<img src="http://CAM1.localhost.tld/axis-cgi/mjpg/video.cgi" name="front" width="320" height="240" id="front" onload='reloadfront()'>