CONTROLLO REMOTO DI UNA TELECAMERA IP

Transcript

1 Scuola Media Pietro Coppo Isola CONTROLLO REMOTO DI UNA TELECAMERA IP Tesi di maturità professionale Indirizzo Tecnico Informatico Alunno: Massimiliano Bevitori Mentore: Maurizio Škerlič Anno Scolastico: 2013/2014

2 INDICE INDICE INTRODUZIONE LA PROGETTAZIONE I LINGUAGGIO DI PROGRAMMAZIONE PROBLEMI RISCONTRATI CONCLUSIONI FONTI

3 INTRODUZIONE Per il progetto di maturità professionale assieme al compagno di classe Salben Kamberi abbiamo deciso di realizzare una pagina HTML per il controllo remoto di una telecamera di sorveglianza IP HD. In questo tesi cercheremo di piegare come abbiamo realizzato il progetto e quali problemi abbiamo riscontrato e risolto durante la realizzazione. LA PROGETTAZIONE Il progetto consiste di una pagina HTML nella quale è presente una finestra dove vengono visualizzate le immagini inviate dalla telecamera IP e da un controllo remoto dello spostamento della stessa, in quattro direzione destra, sinistra, su e giù. 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 [2] La Foscam è una compagnia di prodotti high-tech fondata nel dicembre 2002, leader nel settore manifatturiero ed esportatore specializzato in prodotti di sorveglianza. Nella Figura 1 possiamo osservare la telecamera IP F19831 utilizzata nel nostro progetto. Figura 1. Telecamera IP HD della FOSCAM modello F Appena acquistata la telecamera IP da subito ci ha dato problemi, anche dopo aver riletto diverse volte il manuale delle istruzioni siamo riusciti a farla funzionare. Non ci è rimasto che chiamare il tecnico della ditta importatrice per chiedere delucidazioni ed capire se la telecamera era effettivamente difettosa oppure sbagliavamo qualcosa noi nell installazione dei programmi di comunicazione. Il tecnico gentilmente ci ha fatto capire che il problema era da attribuire alla vecchia versione del firmware della telecamera, e ci ha consigliato di aggiornarlo, spiegandoci come fare. Ci ha avvertiti che bisognava rispettare una 3

4 determinata e ben precisa sequenza di passaggi, a seconda della versione di hardware presente nella Telecamera. Una volta aggiornato con successo il firmware la telecamera Ip non ci ha dato più rompicapi e abbiamo iniziato con il realizzare la pagina HTML. Per prima cosa abbiamo realizzato una tabella ed unito alcune celle in modo da ottenere a sinistra la finestra del video trasmesso dalla telecamera ed a destra l interfaccia di controllo di forma circolare. Per la visualizzazione del video trasmesso in streaming dalla Telecamera abbiamo utilizzato il plugin VLC a sorgente aperta della Videolan. Nella parte destra della pagina HTML abbiamo posizionato due controlli di posizione di forma circolare creati con il programma di foto ritocco a sorgente aperta GIMP. Con lo stesso programma abbiamo realizzato pure le varie scritte presenti nella pagina HTML. Nella Figura 2 possiamo osservare l interfaccia grafica del nostro progetto. Nella Figura 2 possiamo osservare l attivazione della freccia al passaggio del mouse, che viene visualizzata con il cambio di colore. Figura 2. Interfaccia grafica del nostro progetto. 4

5 Figura 3. Attivazione della freccia al passaggio del mouse. La parte più complicata è stata quella di implementare le funzioni Javascript per il controllo dello spostamento della telecamera. Aiutati dal nostro mentore abbiamo capito che lo spostamento avveniva spedendo dei comandi CGI alla telecamera IP. In informatica i 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. Una volta trovati i comandi abbiamo scritto le funzioni in Javascript per ogni evento in ogni direzione. Per gestire la pressione sui vari tasti di direzione del comando di direzione abbiamo utilizzato le funzioni Javascript ON MOUSE UP e ON MOUSE DOWN. Per migliorare la grafica e l estetica della pagina HTML abbiamo utilizzato il linguaggio CSS per arrotondare i bordi della tabella[6]. Oltre alle funzioni per il controllo del mouse abbiamo utilizzato anche diversi tag HTML. Il tag <DIR> che inserisce una tabulazione. Le tabulazioni in HTML hanno un valore fisso e non possono essere modificate. Il tag <HR> che inserisce una riga orizzontale di separazione tra due paragrafi consecutivi. L attributo ALIGN che definisce l'allineamento della riga con gli stessi valori dei tag precedenti. L'attributo SRC="..." che indica il percorso dell immagine da caricare. Gli 5

6 attributi WIDTH e HEIGHT che determinano le dimensioni dell immagine. L attributo BORDER indica lo spessore in pixel della cornice che si vuole mettere attorno all'immagine. Il tag <AREA> accetta gli attributi SHAPE, COORDS, HREF e TITLE. SHAPE che specifica la forma dell'area, e può essere di tipo "circle", "rect" oppure "poly", per indicare un cerchio, un rettangolo oppure un poligono. Gli attributi ROWSPAN e COLSPAN inoltre permettono di espandere una cella in senso orizzontale e verticale. Il tag <UL> che indica un elenco non ordinato e il tag <LI> che indica un elenco ordinato [5] I linguaggi di programmazione Per la realizzazione del nostro progetto abbiamo dovuto utilizzare diversi linguaggi di programmazione tra i quali il linguaggio HTML, Javascript, AJAX, PHP e CSS. Il linguaggio HTML (ingl. HyperText Markup Language), è un 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 vero e proprio linguaggio di programmazione, ma solamente un linguaggio di formattazione che descrive 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. [3] Il linguaggio Javascript è un linguaggio di scripting orientato agli oggetti comunemente usato nella creazione di siti web. Fu originariamente sviluppato da Brendan Eich della Netscape Communications con il nome di Mocha e successivamente con il nome LiveScript, ma in seguito è stato rinominato "JavaScript" ed è stato formalizzato con una sintassi più vicina a quella del linguaggio Java di Sun Microsystems, che nel 2010 è stata acquistata da Oracle. [4] 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.[5] Il linguaggio PHP (ingl. Hypertext Preprocessor) è un linguaggio di programmazione interpretato, originariamente concepito per la 6

7 programmazione di pagine web dinamiche. L'interprete PHP è un software libero distribuito sotto la PHP License. Attualmente è principalmente utilizzato per sviluppare applicazioni web lato server, ma può essere usato anche per scrivere script a riga di comando o applicazioni stand-alone con interfaccia grafica.[6] Il linguaggio CSS (ingl. Cascading Style Sheets), in informatica è usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive emanate a partire dal 1996 dal W3C.[7] PROBLEMI RISCONTRATI Durante la progettazione oltre ai problemi con il firmware, abbiamo avuto pure dei problemi nel creare la tabella e ad inserire la finestra per la visualizzazione della telecamera poiché non riuscivamo a ottenere un corretta risoluzione tra i vari browser. Parecchi problemi abbiamo avuto con il reperire i corretti comandi CGI il nostro modello di telecamera. La Foscam per i vari modelli prodotti utilizza comandi CGI differenti provocando confusione mettendo in difficolta gli sviluppatori. CONCLUSIONI Con questa progetto ho ampliato le mie conoscenze nel linguaggio HTML e nella realizzazione delle pagine Web nonché le mie nozioni nell ambito dell informatica. Durante il progetto mi sono divertito moltissimo anche perché è un progetto che abbiamo realizzato in due ed ho capito come si lavora in un team ho anche visto che lavorare in due è molto più divertente perché ci aiutavamo avvicenda. Queste esperienze mi saranno utili in futuro quando lavorerò in una ditta con altre persone. FONTI [1] Ulta edit URL: [2] Foscam URL: [3] HTML URL: [4] JavaScript URL: [5] Ajax URL: [6] PHP URL: [7] CSS URL: [8] Guida HTML pdf [9] Guida JavaScript pdf 7