Un'applicazione di realtà aumentata con GWT

I parte: WebRTC e la libreria Elementaldi e

In questo primo articolo ci occuperemo in particolare di GWT, della libreria Elemental e di come si possa utilizzare una parte di WebRTC, precisamente getUserMedia, in un progetto GWT guadagnando, dall'interno di una applicazione web, l'accesso alla webcam e conservando la possibilità di scrivere codice Java e riutilizzare, nel browser, anche librerie sviluppate per altri contesti.

Introduzione

GWT (Google Web Toolkit) [1], è il toolkit per lo sviluppo in Java di applicazioni "browser based" nato come "prodotto" Google ma oramai trasformatosi a tutti gli effetti un progetto open-source, è diventato in pochi anni uno dei framework di riferimento per lo sviluppo di applicazioni web complesse e il suo utilizzo sembra essere in grande crescita, come riportato da Web Frameworks Usage Statistics [2], che ne rileva una crescita d'impiego negli ultimi 12 mesi intorno al 90%.

GWT mette a disposizione dello sviluppatore Java molte possibilità: la compilazione del codice Java in JavaScript; un sistema di "compilazione condizionale" per gestire le incompatibilità tra i browser; un set di widget ben progettato; dei sistemi di comunicazione con i servizi server-side "amichevoli", almeno per gli sviluppatori Java, e molto altro.

A fronte di tutta questa potenza, però, l'esigenza di rendere il codice il più possibile indipendente dal tipo di browser rende alle volte piuttosto laborioso l'utilizzo delle più recenti feature dei browser, soprattutto quando queste feature sono supportate solo da alcuni browser e non ancora standardizzate.

L'argomento

In questo articolo, primo di una breve serie, ci poniamo come obiettivo di mostrare come si possa utilizzare una parte di WebRTC [3], precisamente getUserMedia in un progetto GWT guadagnando, dall'interno di una applicazione web, l'accesso alla webcam e conservando la possibilità di scrivere codice Java e riutilizzare, nel browser, anche librerie sviluppate per altri contesti.

Se in questa prima parte ci occuperemo sostanzialmente solo di capire come la libreria GWT "to the metal" chiamata Elemental ci possa aiutare ad utilizzare WebRTC, nelle prossime puntate vedremo come utilizzare WebGL [4] e, con un pizzico di funambolismo informatico, come compilare in JavaScript la libreria NyARToolkit [5], per realizzare una applicazione "browser based"  per fare realtà aumentata (propriamente marker based real-time augmented reality) interamente lato client.

In ogni puntata di questa serie, oltre a cercare di descrivere gli aspetti rilevanti delle tecnologie e degli strumenti utilizzati,  pubblicheremo anche il codice d'esempio pronto per l'uso, che potrete scaricare come allegato dal menu a destra.

Gli strumenti

Per i lettori più impazienti, diciamo subito che è possibile vedere una demo all'indirizzo [6], che richiede il browser Google Chrome per funzionare; il codice, oltre che nell'allegato, si trova all'indirizzo [7] e la versione compilata è reperibile all'indirizzo riportato in [8] in formato WAR per semplicità ma, non utilizzando nessun servizio lato server, può essere pubblicata su qualsiasi web server.

GWT Elemental Library

A partire dalla versione 2.5, GWT  include Elemental [9], una libreria forse non molto conosciuta, e di sicuro poco documentata, ma dalle caratteristiche davvero interessanti per chi voglia utilizzare con GWT le feature HTML5 più recenti dei browser (almeno di quelli basati su WebKit).

Come si legge nella presentazione ufficiale, allo scopo di creare una libreria che potesse includere  "every HTML5 feature"  disponibile sui browser derivati da WebKit, Elemental viene generata automaticamente a partire dai file WebIDL [10] utilizzati dai motori JavaScript e quindi risulta relativamente aggiornata rispetto alle evoluzioni, spesso frenetiche, dei browser.

A fronte di una scarsissima documentazione, usare Elemental in un progetto GWT non è affatto complesso: basta scaricare l'ultima versione di GWT da [11] (la 2.5.1 nel nostro caso), creare un progetto, ad esempio con Eclipse come di consueto,  importare nella build path gwt-elemental.jar  e, infine,  aggiungre nel file .gwt.xml del modulo la riga:


Siamo pronti per utilizzare Elemental.

WebRTC getUserMedia

Nonostante negli ultimi anni ci siano stati molteplici tentativi di definire uno standard per permettere l'accesso alla webcam e al microfono di un computer dall'interno di una applicazione web (quindi eseguita nella "gabbia" del browser), solo di recente, con l'evoluzione di WebRTC, questa esigenza è stata effettivamente soddisfatta. Una descrizione dei tentativi di standard che si sono succeduti è riportata in [12].

WebRTC è una tecnologia che ha come obiettivo quello di rendere possibili le comunicazioni real time tra browser e, nonostante le innumerevoli complessità incontrate, avendo tra i suoi supporter nomi quali Google, Mozilla e Opera, la specifica sta rapidamente trovando implementazione sui alcuni dei browser maggiormente diffusi. Di fatto, come riportato nell'articolo in [13], all'inizio di febbraio è stato fatto un esperimento pubblico di interoperabilità tra Chrome e Mozilla allo scopo di mostrare come lo standard stia giungendo a maturità.

Benchè WebRTC abbia degli scopi di respiro ben più ampio rispetto a quelli che ci proponiamo in questo articolo, la prima componente di WebRTC che ha trovato implementazione relativamente stabile su Chrome, e attualmente disponibile su tutte le piattaforme, è quella che permette appunto di accedere allo stream video proveniente da webcam: getUserMedia.

L'accesso allo stream video attraverso getUserMedia e il suo effettivo utilizzo in una applicazione web richiede l'interazione di diverse "componenti" HTML5 (video, objectURL, canvas) e, come vedremo subito di seguito non è priva di qualche tecnicismo che vale la pena di osservare con attenzione.

GWT Elemental + WebRTC getUserMedia + tag video e canvas...

…ossia come realizzare una applicazione web per fare istantanee con la webcam. Vediamo come entrano in gioco le diverse componenti e quali passi occorre seguire per integrarli al meglio

 

Condividi

Pubblicato nel numero
183 aprile 2013
Sviluppatore web e mobile, freelance, teacher, sysadmin. Attualmente lavoro come Java Developer e Architect per l'azienda di cui sono co-fondatore: K-TEQ Srls (http://www.k-teq.com) #Java #GWT #JavaScript #HTML5 #Flink #MachineLearning https://www.linkedin.com/in/abmancini/
Freelance, Web & Mobile Developer and Architect, with a passion for fine tuned details. Co-founder at K-TEQ Srls (http://www.k-teq.com). GDG-Firenze Lead and founder. Intel Software Innovator. #Java #GWT #StreamProcessing #MachineLearning https://www.linkedin.com/in/francescatosij/
Articoli nella stessa serie
Ti potrebbe interessare anche