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
![Page 1: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/1.jpg)
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
![Page 2: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/2.jpg)
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
![Page 3: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/3.jpg)
SkyMedia – Architecture Overview
3
![Page 4: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/4.jpg)
4
SkyMedia Experiences
![Page 5: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/5.jpg)
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
![Page 6: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/6.jpg)
Pictures from past events...
![Page 7: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/7.jpg)
SkyMedia Proprietary
7
Mobile application for runners
Setting up the equipment
![Page 8: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/8.jpg)
SkyMedia Proprietary
8
Checking 3D capturing and mobile applications
![Page 9: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/9.jpg)
SkyMedia Proprietary
Amateur runners interested in the interactive applicationAudience interested in SkyMedia demonstrations
![Page 10: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/10.jpg)
SkyMedia Proprietary
Amateur runners interested in the interactive application
![Page 11: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/11.jpg)
SkyMedia Proprietary
11
Instructing SkyMedia amateur runners
![Page 12: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/12.jpg)
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
![Page 13: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/13.jpg)
SkyMedia Proprietary
13
Integrating UAV ground station and Multimedia Service Platform
![Page 14: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/14.jpg)
14
QR code scan
![Page 15: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/15.jpg)
15
Mobile application to track runners performance
![Page 16: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/16.jpg)
Touristic sites web apps
![Page 17: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/17.jpg)
17
SkyMedia – Interactive Application
![Page 18: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/18.jpg)
• 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
![Page 19: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/19.jpg)
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
![Page 20: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/20.jpg)
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
![Page 21: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/21.jpg)
Fullscreen on OSx?
![Page 22: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/22.jpg)
Fullscreen! con COCOA
Eseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader)•“Megazoomer” plugin (http://github.com/ianh/megazoomer)
Command + Invio
![Page 23: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/23.jpg)
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
![Page 24: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/24.jpg)
La definizione dell'app
●Progettazione del layout grafico
![Page 25: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/25.jpg)
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
![Page 26: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/26.jpg)
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
![Page 27: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/27.jpg)
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)"
![Page 28: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/28.jpg)
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
![Page 29: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/29.jpg)
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©
![Page 30: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/30.jpg)
Il framework: Sencha TouchSemplice gestione nativa degli overlay:
SkyMedia.views.Meteo = new Ext.Panel({ width: 400, height: 130, layout: 'hbox', floating: true, hideOnMaskTap: false,…..
![Page 31: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/31.jpg)
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" }]
![Page 32: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/32.jpg)
Il framework: Sencha TouchUso integrato di Sencha Chart
chartpanel.add ({xtype: 'chart',theme: 'Skymedia',autoSize: true,shadow: true,id: 'chart',store: runnerStore,axes:[...],series:[...]
![Page 33: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/33.jpg)
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©
![Page 34: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/34.jpg)
items: [ { xtype: 'map', id: 'geomap_map', width: 580, height: 635, useCurrentLocation: false, …...
Il framework: Sencha TouchUso integrato di video e Google Maps©
![Page 35: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/35.jpg)
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
![Page 36: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/36.jpg)
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; }
![Page 37: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/37.jpg)
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); }}
![Page 38: SkyMedia: La tecnologia al servizio dell'intrattenimento](https://reader033.vdocuments.site/reader033/viewer/2022060116/5581ae6fd8b42afd4c8b5352/html5/thumbnails/38.jpg)
Grazie dell'attenzione