skymedia: la tecnologia al servizio dell'intrattenimento
DESCRIPTION
Mavigex parla al #WhyMCA 2012 e presenta l'architettura del sistema #SkyMedia. Un gruppo di aziende provenienti da tutta Europa sta mettendo a punto un sistema tecnologicamente innovativo per dare una marcia in più agli eventi sportivi, combinando tecnologie all'avanguardia come droni volanti, schermi immateriali, telecamere 3D, applicazioni mobili per iPhone iPad e Android e tracciamento delle prestazioni degli atleti in tempo reale. Tutte queste tecnologie sono combinate assieme per fornire ad atleti e spettatori una visione a 360 gradi dell'evento, con una prospettiva mai vista fino ad ora. Le prime dimostrazioni delle potenzialità di questo sistema sono state messe a disposizione della Maratona di Torino gia' dall'edizione 2011. Una peculiarità è la potenziale versatilità di tale sistema e la sua applicabilità a diversi scenari sportivi. Altri sport infatti potrebbero trarre vantaggio da queste tecnologie, quali il ciclismo, l'arrampicata sportiva e lo sci. Il talk illustrerà l'architettura e i componenti del sistema, e come sia stato possibile rendere accessibili al grande pubblico tecnologie fino ad ora limitate all'ambito di ricerca. Maggiori informazioni sul progetto al sito http://ict-skymedia.eu/skymedia/TRANSCRIPT
SkyMedia – SkyMedia – La tecnologia al servizio dell'intrattenimentoLa tecnologia al servizio dell'intrattenimentoMassimo Neri & Claudio Bertozzi - Mavigex S.r.l.Massimo Neri & Claudio Bertozzi - Mavigex S.r.l.
UAV
Operating centre
Co-localized
Multi-view
Internet
The “SkyMedia” Project
ICT Priority: 1.5 (Networked and Electronic Media)
Project type: STREP
Project start: Jan 1, 2010
Project duration: 36 months
8 European Partners
Website – www.ict-skymedia.eu
Key Concepts:• Augmented live event with immersive user experience
• 3D/HD Multimedia captured from Unmanned Aerial Vehicles (UAVs)
• Fusion with sensor information and ground-based capturing
• Innovative applications for the mobile eco-system
SkyMedia – Architecture Overview
3
4
SkyMedia Experiences
Pre-tests & Demonstrations
Turin Marathon 2011 (Nov 2011)• 25th anniversary, large participation
• Three-day event taking place over the weekend.• Multiple events are co-located in the city of Turin:
• Multiple sport events (full marathon, half marathon, etc.)
• Evening concert
• Bands/streed artists
• Social network (Facebook page) already in place and active.
• --> First set of pre-tests
“Tuttadritta” (April 2012)• --> Specific set of integrated functionalities demonstrated
Turin Marathon 2012 (Nov 2012)• Large participation (overall 20k considering all events)
• SkyMedia Public final demonstration
5
Pictures from past events...
SkyMedia Proprietary
7
Mobile application for runners
Setting up the equipment
SkyMedia Proprietary
8
Checking 3D capturing and mobile applications
SkyMedia Proprietary
Amateur runners interested in the interactive applicationAudience interested in SkyMedia demonstrations
SkyMedia Proprietary
Amateur runners interested in the interactive application
SkyMedia Proprietary
11
Instructing SkyMedia amateur runners
SkyMedia Proprietary
Row 1 Row 2 Row 3 Row 40
2
4
6
8
10
12
Column 1Column 2Column 3
12
Live runner performance tracking
SkyMedia Proprietary
13
Integrating UAV ground station and Multimedia Service Platform
14
QR code scan
15
Mobile application to track runners performance
Touristic sites web apps
17
SkyMedia – Interactive Application
• Acquisizione video da telecamere digitale e produzione di stream video per dispositivi iPhone e iPad
• Acquisizione di dati di performance e geolocalizzazione dei corridori
• Architettura dell'intero sistema precedentemente progettata
• Uso di schermi touch screen da 46''
SkyMedia: i limiti imposti dall'architettura
Streaming video
●Dynamic HTTP
●La scelta di HTML5
●L'obbligo di Osx e Safari
●Quicktime
●Fullscreen di una web-app su Safari@OSx: “hacking” OSx
Streaming video
●Apple's Dynamic HTTP – HTTP Live Streaming●MPEG2 – TS → H264●Differenti bitrate, ottimizzazione della banda
●Come visualizziamo un flusso video per iOS?●Quicktime X●<video> tag di HTML5.....solo su Safari@OSx
Dynamic HTTPIPhone & iPad
InteractiveApplication
Fullscreen on OSx?
Fullscreen! con COCOA
Eseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader)•“Megazoomer” plugin (http://github.com/ianh/megazoomer)
Command + Invio
La definizione dell'app
●Definizione delle funzionalità●Fruizione degli streams video live dalle telecamere●Visualizzazione dei corridori inquadrati dalla telecamera selezionata
●Visualizzazioni delle informazioni real time di performance del corridore selezionato (battito cardiaco, calorie consumate, km percorsi, …)
●Visualizzazione dei corridori sulla mappa in real time
La definizione dell'app
●Progettazione del layout grafico
Il backend●API REST lato server●Interrogazione polling da parte dei client●Restituzione di dati riguardanti:
●Tempo atmosferico●Dettagli dei corridori●Performance in real time dei corridori●Numero e posizione delle telecamere●Identificativi dei corridori inquadrati ad un determinato istante da una particolare camera
Il backendIl formato dei dati
●JSON vs XML●Importante ridurre la quantità di dati scambiati quando le richieste sono tante per soddisfare l'esigenza di un quasi-real time●Una tipica risposta XML è il doppio piu pesante della stessa risposta in JSON:
356 B 745 B
Il backend
●ISO timestamps●Standardizzare il formato in cui viene passata l'informazione temporale tra tutti i sottosistemi●Utilizzare un formato facilmente manipolabile in javascript da “quasi tutti” i browser ●ISO 8601:YYYY-MM-DDThh:mm:ss.sZ
(new Date('2012-05-25T11:00:00Z')).toString()"Fri May 25 2012 13:00:00 GMT+0200 (CEST)"
Cross-scripting: JSONP? No Way!• Il server sul quale gira l'applicazione non è lo stesso sul quale gira l'applicazione
di backend che fornisce i dati• Javascript non consente il recupero dei dati da domini diversi• JSONP? Non possibile perche il formato JSON di restituzione dei dati era gia stato
precedentemente definito• Soluzione: proxy PHP “fatto in casa” con CURL, integrato nell'applicazione:
– Per ogni chiamata all'API remota x.x.x.x/firstApi?..... esiste una sottocartella “firstApi” nella document root con dentro un file “index.php” così fatto:
<?php $serverDomain = 'x.x.x.x'; $ch = curl_init(); // some manipulation on the request string curl_setopt($ch, CURLOPT_URL, "http://$serverDomain".substr($_SERVER[REQUEST_URI], 0, n); curl_setopt($ch, CURLOPT_RETURNTRANSFER, false); curl_setopt($ch, CURLOPT_FRESH_CONNECT, true); curl_setopt($ch, CURLOPT_CRLF, true); header('Cache-Control: no-cache, must-revalidate'); header('Content-Type: application/json'); curl_exec($ch);
curl_close($ch);?>
Ora le chiamate “x.x.x.x/firstApi” possono essere fatte a “/firstApi” e non verranno piu bloccate
Il framework: Sencha Touch●Framework altamente compatibile con Safari●Semplice gestione del layout di pagina e delle animazioni●Gestione nativa delle chiamate Ajax e dei dati prelevati dal server●Uso integrato di Sencha Chart per la creazione dei grafici di visualizzazione dei dati di performance●Integrazione nativa dei video (<video> tag di HTML5) e delle Google Maps©
Il framework: Sencha TouchSemplice gestione nativa degli overlay:
SkyMedia.views.Meteo = new Ext.Panel({ width: 400, height: 130, layout: 'hbox', floating: true, hideOnMaskTap: false,…..
Il framework: Sencha TouchGestione nativa delle chiamate Ajax e dei dati prelevati dal server
Ext.regModel('Detection', { fields: [ {name: 'macAddress', mapping: 'id', type: 'string'} ]});
SkyMedia.models.CameraDetection = new Ext.data.Store({ autoLoad: false, model: 'Detection', proxy: { type: 'ajax', noCache: false, limitParam: undefined, reader: { type: 'json' } }});
[ { "id": "44A7CF28CE88" }, { "id": "B407F926A245" }, { "id": "c8aa21ad3909" }]
Il framework: Sencha TouchUso integrato di Sencha Chart
chartpanel.add ({xtype: 'chart',theme: 'Skymedia',autoSize: true,shadow: true,id: 'chart',store: runnerStore,axes:[...],series:[...]
items: [ { xtype : 'video', id : 'myVideo', width : 1280, height : 720, cls: 'video', autoPause : false, autoResume : false, enableControls: false, …....
Il framework: Sencha TouchUso integrato di video e Google Maps©
items: [ { xtype: 'map', id: 'geomap_map', width: 580, height: 635, useCurrentLocation: false, …...
Il framework: Sencha TouchUso integrato di video e Google Maps©
Sencha Touch e la grafica●Il progetto richiedeva un layout grafico customizzato in tutte le sue parti●Ricordiamo che l'applicazione non nasce come una applicazione web mobile (che sono i target naturali di applicazioni fatte utilizzando Sencha Chart)
Ridisegnare interamente il layout di ogni elemento del framework
Sencha Touch e la grafica●Sencha consente di specificare una classe CSS aggiuntiva in ogni elemento:
SkyMedia.views.Meteo = new Ext.Panel({ width: 400, height: 130, layout: 'hbox', floating: true, hideOnMaskTap: false, cls: 'meteoInformation',
.meteoInformation { left: 1200px; top: -140px; border: solid white 1px; border-radius: 15px !important; background-color: rgba(0, 0, 0, 0.4) !important; box-shadow: none !important; }
Work in progress
●Polling o Websocket?
var socket = new WebSocket('ws://x.x.x.x'); if (socket!=null) { socket.onopen = function() { document.getElementById("response").innerHTML=''; }; socket.onmessage = function (evt) { console.log(evt.data); }}
Grazie dell'attenzione