Internet                      UAV                                                                Co-                      ...
The “SkyMedia” Project   ICT Priority: 1.5 (Networked and Electronic Media)   Project type: STREP   Project start: Jan ...
SkyMedia – Architecture Overview                                   3
4    SkyMedia Experiences
5    Pre-tests & Demonstrations       Turin Marathon 2011 (Nov 2011)        • 25th anniversary, large participation      ...
Pictures from past events...
7    Mobile application for runners           Setting up the equipment                   SkyMedia Proprietary
8    Checking 3D capturing and mobile applications                           SkyMedia Proprietary
Amateur runners interested in theAudience interested in Proprietary                          SkyMedia demonstrations      ...
Amateur runners interested in the       interactive application  SkyMedia Proprietary
11     Instructing SkyMedia amateur runners                    SkyMedia Proprietary
12     12     10     8                                                         Column 1     6                             ...
13     Integrating UAV ground station     and Multimedia Service Platform                SkyMedia Proprietary
14     QR code scan
15     Mobile application to track runners     performance
Touristic sites web apps
17     SkyMedia – Interactive Application
SkyMedia: i limiti imposti dallarchitettura• Acquisizione video da telecamere digitale e produzione  di stream video per d...
Streaming video●    Dynamic HTTP●    La scelta di HTML5●    Lobbligo di Osx e Safari       ●           Quicktime●    Fulls...
Streaming video                                                       IPhone & iPad    Dynamic HTTP                       ...
Fullscreen on OSx?
Fullscreen! con COCOAEseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader)   •“Megazoomer” plugin (http://gith...
La definizione dellapp●    Definizione delle funzionalità      ●        Fruizione degli streams video live dalle telecamer...
La definizione dellapp●    Progettazione del layout grafico
Il backend● API REST lato server● Interrogazione polling da parte dei client● Restituzione di dati riguardanti:    ●     T...
Il backendIl formato dei dati ●  JSON vs XML     ●      Importante ridurre la quantità di dati scambiati quando le     ric...
Il backendISO timestamps●    ●      Standardizzare il formato in cui viene passata    linformazione temporale tra tutti i ...
Cross-scripting: JSONP? No Way!• Il server sul quale gira lapplicazione non è lo stesso sul quale gira lapplicazione  di b...
Il framework: Sencha Touch● Framework altamente compatibile con Safari● Semplice gestione del layout di pagina e delleanim...
Il framework: Sencha TouchSemplice gestione nativa degli overlay:       SkyMedia.views.Meteo = new Ext.Panel({         wid...
Il framework: Sencha Touch    Gestione nativa delle chiamate Ajax e dei dati prelevati dal    server                      ...
Il framework: Sencha TouchUso integrato di Sencha Chart  chartpanel.add ({           xtype: chart,           theme: Skymed...
Il framework: Sencha TouchUso integrato di video e Google Maps©items: [    {       xtype : video,       id      : myVideo,...
Il framework: Sencha TouchUso integrato di video e Google Maps© items: [    {       xtype: map,       id: geomap_map,     ...
Sencha Touch e la grafica  ●   Il progetto richiedeva un layout grafico  customizzato in tutte le sue parti  ●   Ricordiam...
Sencha Touch e la grafica   ●    Sencha consente di specificare una classe CSS   aggiuntiva in ogni elemento:SkyMedia.view...
Work in progressPolling o Websocket?●    var socket = new WebSocket(ws://x.x.x.x);      if (socket!=null) {        socket....
Grazie dellattenzione
Upcoming SlideShare
Loading in …5
×

SkyMedia: La tecnologia al servizio dell'intrattenimento

2,711 views
2,749 views

Published on

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/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,711
On SlideShare
0
From Embeds
0
Number of Embeds
2,032
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SkyMedia: La tecnologia al servizio dell'intrattenimento

  1. 1. Internet UAV Co- localized Multi-view Operating centreSkyMedia – La tecnologia al servizio dellintrattenimentoMassimo Neri & Claudio Bertozzi - Mavigex S.r.l.
  2. 2. 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
  3. 3. SkyMedia – Architecture Overview 3
  4. 4. 4 SkyMedia Experiences
  5. 5. 5 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
  6. 6. Pictures from past events...
  7. 7. 7 Mobile application for runners Setting up the equipment SkyMedia Proprietary
  8. 8. 8 Checking 3D capturing and mobile applications SkyMedia Proprietary
  9. 9. Amateur runners interested in theAudience interested in Proprietary SkyMedia demonstrations interactive application SkyMedia
  10. 10. Amateur runners interested in the interactive application SkyMedia Proprietary
  11. 11. 11 Instructing SkyMedia amateur runners SkyMedia Proprietary
  12. 12. 12 12 10 8 Column 1 6 Column 2 Column 3 4 2 0 Row 1 Row 2 Row 3 Row 4 Live runner performance tracking SkyMedia Proprietary
  13. 13. 13 Integrating UAV ground station and Multimedia Service Platform SkyMedia Proprietary
  14. 14. 14 QR code scan
  15. 15. 15 Mobile application to track runners performance
  16. 16. Touristic sites web apps
  17. 17. 17 SkyMedia – Interactive Application
  18. 18. SkyMedia: i limiti imposti dallarchitettura• 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 dellintero sistema precedentemente progettata• Uso di schermi touch screen da 46
  19. 19. Streaming video● Dynamic HTTP● La scelta di HTML5● Lobbligo di Osx e Safari ● Quicktime● Fullscreen di una web-app su Safari@OSx: “hacking” OSx
  20. 20. Streaming video IPhone & iPad Dynamic HTTP Interactive Application● Apples 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
  21. 21. Fullscreen on OSx?
  22. 22. Fullscreen! con COCOAEseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader) •“Megazoomer” plugin (http://github.com/ianh/megazoomer) Command + Invio
  23. 23. La definizione dellapp● 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
  24. 24. La definizione dellapp● Progettazione del layout grafico
  25. 25. 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
  26. 26. Il backendIl formato dei dati ● JSON vs XML ● Importante ridurre la quantità di dati scambiati quando le richieste sono tante per soddisfare lesigenza di un quasi- real time ● Una tipica risposta XML è il doppio piu pesante della stessa risposta in JSON: 356 B 745 B
  27. 27. Il backendISO timestamps● ● Standardizzare il formato in cui viene passata linformazione 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)"
  28. 28. Cross-scripting: JSONP? No Way!• Il server sul quale gira lapplicazione non è lo stesso sul quale gira lapplicazione 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 nellapplicazione: – Per ogni chiamata allAPI 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” enon verranno piu bloccate
  29. 29. Il framework: Sencha Touch● Framework altamente compatibile con Safari● Semplice gestione del layout di pagina e delleanimazioni● Gestione nativa delle chiamate Ajax e dei datiprelevati dal server● Uso integrato di Sencha Chart per la creazione deigrafici di visualizzazione dei dati di performance● Integrazione nativa dei video (<video> tag diHTML5) e delle Google Maps©
  30. 30. Il framework: Sencha TouchSemplice gestione nativa degli overlay: SkyMedia.views.Meteo = new Ext.Panel({ width: 400, height: 130, layout: hbox, floating: true, hideOnMaskTap: false, …..
  31. 31. Il framework: Sencha Touch Gestione nativa delle chiamate Ajax e dei dati prelevati dal server Ext.regModel(Detection, { fields: [ {name: macAddress, mapping: id, type: string}[ ] { }); "id": "44A7CF28CE88" }, SkyMedia.models.CameraDetection = new Ext.data.Store({ { autoLoad: false, "id": "B407F926A245" model: Detection, }, proxy: { { type: ajax, "id": "c8aa21ad3909" noCache: false, limitParam: undefined, } reader: {] type: json } } });
  32. 32. Il framework: Sencha TouchUso integrato di Sencha Chart chartpanel.add ({ xtype: chart, theme: Skymedia, autoSize: true, shadow: true, id: chart, store: runnerStore, axes: [...], series: [...]
  33. 33. Il framework: Sencha TouchUso integrato di video e Google Maps©items: [ { xtype : video, id : myVideo, width : 1280, height : 720, cls: video, autoPause : false, autoResume : false, enableControls: false, …....
  34. 34. Il framework: Sencha TouchUso integrato di video e Google Maps© items: [ { xtype: map, id: geomap_map, width: 580, height: 635, useCurrentLocation: false, …...
  35. 35. Sencha Touch e la grafica ● Il progetto richiedeva un layout grafico customizzato in tutte le sue parti ● Ricordiamo che lapplicazione 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
  36. 36. Sencha Touch e la grafica ● Sencha consente di specificare una classe CSS aggiuntiva in ogni elemento:SkyMedia.views.Meteo = new Ext.Panel({ .meteoInformation { width: 400, left: 1200px; height: 130, top: -140px; layout: hbox, border: solid white 1px; floating: true, border-radius: 15px !important; hideOnMaskTap: false, background-color: rgba(0, 0, 0, 0.4) !important; cls: meteoInformation, box-shadow: none !important; }
  37. 37. Work in progressPolling 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); } }
  38. 38. Grazie dellattenzione

×