CONTROLLO REMOTO DI UNA TELECAMERA IP

Transcript

1 Scuola Media Pietro Coppo CONTROLLO REMOTO DI UNA TELECAMERA IP Tesi di Maturità Professionale Alunno: Salben Kamberi Mentore: Maurizio Škerlič Anno scolastico 2013/2014

2 INDICE INDICE... 2 INTRODUZIONE... 3 LA TELECAMERA IP... 3 LINGUAGGI UTILIZZATI... 4 Il linguaggio html... 4 Il linguaggio javascript... 5 Il linguaggio AJAX... 5 Il linguaggio CSS... 5 LA PROGETTAZIONE... 6 CONCLUSIONI... 8 LITERATTURA

3 INTRODUZIONE Come tesi ti maturità professionale, insieme al compagno di classe Massimiliano Bevitori, abbiamo deciso di realizzare una pagina HTML scritta in linguaggio di programmazione JavaScript per controllare una telecamera IP modello FI9831W della compagnia Foscam. Oggi la telecamera è un oggetto molto utilizzato per la sicurezza e la sorveglianza di un determinato luogo pubblico, infatti quando succede un furto o qualcuno distrugge qualcosa, con l aiuto dei filmati possiamo facilmente scoprire chi è stato. Per prima cosa vi descriveremo il modello della telecamera prescelta, successivamente parleremo dei programmi e dei linguaggi utilizzati e le fasi di progettazione. LA TELECAMERA IP Come telecamera IP abbiamo utilizzato il modello F19831 della FOSCAM che oltre all ottimo prezzo possiede anche ottime caratteristiche. Possiede una risoluzione di 1280x960 con 1.3Megapixel, un ottica grandangolare, l audio bidirezionale, un alta velocita di trasferimento dati H264 e l illuminazione infrarossi per la visione notturna. Foscam è una compagnia di prodotti high-tech fondata nel dicembre 2002, leader nel settore manifatturiero ed esportatore specializzato in prodotti di sorveglianza. I Prodotti principali riguardano sicuramente le telecamere di rete e video registratori di rete. Foscam come dice il suo logo è focalizzata a provvedere alle migliori e abbordabili telecamere di sorveglianza per clienti in tutto il mondo, così provvede ad una vita migliore con più pace, felicità e soddisfazione. I prodotti hanno un ottima reputazione in Europa, America e Australia, sono utilizzati in molti campi come case, uffici, magazzini scuole ospedali e banche [1]. Nella foto 1. possiamo vedere la telecamera FI9831W della Foscam utilizzata da noi per questo progetto. Foto 1. La telecamera IP F19831W ad alta definizione utilizzata nel progetto [1]. 3

4 LINGUAGGI UTILIZZATI Per scrivere il codice sorgente della nostra pagina internet, abbiamo utilizzato diversi linguaggi di programmazione, HTML, JavaScript, Ajax e CSS. Il linguaggio HTML (ingl. hyper text markup language) è il linguaggio di markup solitamente usato per la formattazione di documenti ipertestuali disponibili nel World Wide Web sotto forma di pagine web. L'HTML non è un linguaggio di programmazione in quanto non prevede alcuna definizione di variabili, strutture dati, funzioni, strutture di controllo, ma solamente un linguaggio di formattazione che descrive cioè le modalità di impaginazione o visualizzazione grafica del contenuto, testuale e non, di una pagina web attraverso tag di formattazione. Tuttavia, l'html supporta l'inserimento di script e oggetti esterni quali immagini o filmati. Ogni documento ipertestuale scritto in HTML deve essere contenuto in un file, la cui estensione è tipicamente.htm o.html. [2] Il linguaggio html Nel linguaggio HTML tutto viene scrive all interno dei tag. I tag sono racchiusi tra parentesi angolari ( "<" e ">" ) e possono essere digitati indifferentemente sia in minuscolo che in maiuscolo, la maggior parte dei tag ha anche un tag correlato che ne indica il termine e si scrive anteponendo al nome del tag il simbolo slash "/", i due tag formano una coppia e si chiamano tag di apertura e chiusura. Un documento HTML è tutto ciò che è contenuto nei due tag <HTML> e </HTML>. L'intestazione di un documento HTML è quella parte di codice compresa tra i due tag <HEAD> e </HEAD>, e che quindi contiene quei tag utili ai browser, ai server web e ai motori di ricerca. I tag che specificano il titolo della pagina sono <TITLE> e </TITLE>. Il corpo del documento contiene l'insieme del testo che deve venire visualizzato e i tag che fanno in modo da dare a quel testo una forma ben precisa, aggiungendo anche grafica, suono ed elementi multimediali e si indica con i due tag <BODY> e </BODY>. Per inserire un immagine viene utilizzata la funzione SRC="..." dentro il tag <IMG>, cioè <IMG SRC="...">. Gli attributi WIDTH="x" e HEIGHT="y" determinano le dimensioni della immagine, in larghezza e in altezza. Per creare un collegamento ipertestuale bisogna utilizzare il tag <A HREF="indirizzo">[Testo HTML]</A>. Una tabella è definita dal tag contenitore <TABLE>... </TABLE> all'interno del quale si imposta la tabella riga per riga e poi cella per cella. All'interno della tabella una riga si specifica mediante il tag <TR>... </TR> (Table Row); tutto quello che è compreso tra questi tag appartiene alla stessa riga della 4

5 tabella. All'interno di una riga vengono poi specificate le celle della tabella, mediante il tag contenitore <TD>... </TD> (Table Data). [6] Il linguaggio javascript Il linguaggio Javascript è il linguaggio di programmazione più comunemente usato nella creazione di siti web. JavaScript viene utilizzato soprattutto in quanto linguaggio di programmazione, integrato, quindi, all'interno di un altro programma. Per inserire uno script in una pagina HTML bisogna utilizzare un tag script. Questo tag non è parte del linguaggio JavaScript, ma serve solo come "contenitore" all'interno di una pagina HTML[3]. A volte capita che vi sia confusione tra i ruoli che il linguaggio JavaScript e il codice HTML hanno nella creazione delle pagine Web. Spesso, soprattutto in passato, JavaScript veniva considerato come un "abbellimento" del codice HTML ma in realtà si tratta di due cose completamente diverse. Mentre HTML, acronimo di HyperText Markup Language è un semplice codice per la definizione della struttura delle pagine Web, JavaScript, come detto, è un vero linguaggio di programmazione che consente, al di là dei tanti effetti grafici che è possibile realizzare, la creazione di siti dinamici e interattivi. Tuttavia è vero che l'interazione tra questi due strumenti è totale, in quanto il codice JavaScript può essere incorporato direttamente nel codice HTML delle pagine Web e venire caricato insieme ad esse. Per far questo è necessario ricorrere ad un apposito tag dell'html, il tag <script>. È utile aggiungere che il codice JavaScript può essere inserito in un punto qualsiasi di una pagina HTML ma che è prassi comune inserirlo all'inizio del documento, tra i tag <head> e </head>, evitando in tal modo la possibilità di incorrere nell'errore di riferirsi, nel resto del documento, a parti di codice non ancora caricate. Naturalmente è possibile richiamare in altri punti del documento porzioni di codice definite all'interno della sezione iniziale. Non vi sono limiti sul numero di tag <script> che possono essere inseriti in un documento HTML [7]. Il linguaggio AJAX Il linguaggio AJAX (ingl. asynchronous Javascript and XML) è una tecnica di sviluppo software per la realizzazione di applicazioni web interattive. Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente [4]. Il linguaggio CSS Il CSS (ingl. cascading style sheets), in informatica, è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine 5

6 web. L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua più facile manutenibilità. [5] LA PROGETTAZIONE Per prima cosa abbiamo ordinato la nostra telecamera Foscam modello FI9831W e mentre aspettavamo la consegna, abbiamo cominciato a scrivere la nostra pagina HTML. Per prima cosa abbiamo creato una tabella posizionata al centro della pagina, divisa in celle di diversa grandezza per poter lavorare meglio. Nella Figura 2 possiamo vedere come si presenta la pagina finita del nostro progetto. Ricevuta la telecamera, abbiamo dovuto aggiornare il firmware a causa di una incompatibilità con la versione del sistema operativo utilizzato. Una volta aggiornato il firmware, abbiamo incominciato a studiare come reindirizzare lo streming video in uscita dalla telecamera sulla nostra pagina. Cercando per la rete abbiamo scoperto che si poteva utilizzare un plug in della Videolan, la stessa che distribuisce il programma multimediali VLC. Con il programma a sorgente aperta GIMP abbiamo realizzato alcune scritte e i pulsanti di controllo dello spostamento della telecamera IP. Per trovare le coordinate delle frecce ci siamo avvalsi del programma XMap. Questo è un programma che ci permette di disegnare delle aree su un immagini, dandoci poi le coordinate di questa area da inserire in HTML ed trasformare l area in un pulsante. Figura 2. Interfaccia grafica della pagina HTML. 6

7 Trovate le coordinate dei pulsanti abbiamo dovuto scrivere le funzioni in Javascript per la comunicazione con la telecamera. Per risolvere questo problema abbiamo chiesto l aiuto del mentore, il quale ci ha spiegato che il comandi della telecamera avveniva con comandi CGI. I comandi CGI (ingl. common gateway interface) è una tecnologia standard usata dai web server per interfacciarsi con applicazioni esterne generando contenuti web dinamici. Ogni volta che un client richiede al web server un URL corrispondente ad un documento in puro HTML gli viene restituito un documento statico (come un file di testo), se l'url corrisponde invece ad un programma CGI, il server lo esegue in tempo reale, generando dinamicamente informazioni per l'utente. I pulsanti di controllo sono costituiti da frecce, le quali cambiano colore quando il mouse ci passa sopra. Per questo effetto abbiamo usato le funzioni Javascript Onmouseover e Onmouseout. Nella figura 3 possiamo osservare il cambiamento di colore al passaggio del mouse sulla freccia dell unità di controllo. Nel progetto abbiamo inserito due unità di controllo, il primo utilizzato per spostare la telecamera IP nella posizione voluta. Cliccando con il mouse sulle varie frecce, la telecamera incomincia a muoversi e non si ferma fino a quando non rilasciamo il tasto. Per realizzare questo abbiamo utilizzato le funzioni Javascript Onmousedown e Onmouseup. La seconda unità di controllo invece ci permette lo spostare panoramico della telecamera nelle quattro direzion, ad esempio cliccando la freccia destra la telecamera si sposta nella posizione estrema destra. Cliccando sul tasto centrale dell unità di controllo la telecamera IP ritorna nella posizione di partenza. Figura 3. Cambio del colore della freccia al passaggio del mouse. 7

8 CONCLUSIONI La realizzazione di progetto è stato abbastanza impegnativo anche per la scarsa conoscenza dei comandi CGI da inviare alla telecamera della Foscam. Nonostante ciò abbiamo consolidato e ampliato le nostre conoscenze nella programmazione con i linguaggi HTML e Javascript. Nella realizzazione del progetto ho avuto la possibilità di imparare ad utilizzare nuovi programmi come ad esempio XMap. Questo progetto mi è piaciuto molto poiché mi ha entusiasmato il fatto di poter controllare da remoto, tramite internet, una telecamera con un programma realizzato con le proprie mani. LITERATTURA [1] URL: [2] URL: [3] URL: [4] URL: [5] URL: [6] Guida HTML.pdf [7] URL: 8