SkyMedia: La tecnologia al servizio dell'intrattenimento

  • 1,776 views
Uploaded on

Mavigex parla al #WhyMCA 2012 e presenta l'architettura del sistema #SkyMedia. …

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,776
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
3
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internet UAV Co- localized Multi-view Operating centreSkyMedia – La tecnologia al servizio dellintrattenimentoMassimo Neri & Claudio Bertozzi - Mavigex S.r.l.
  • 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. SkyMedia – Architecture Overview 3
  • 4. 4 SkyMedia Experiences
  • 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. Pictures from past events...
  • 7. 7 Mobile application for runners Setting up the equipment SkyMedia Proprietary
  • 8. 8 Checking 3D capturing and mobile applications SkyMedia Proprietary
  • 9. Amateur runners interested in theAudience interested in Proprietary SkyMedia demonstrations interactive application SkyMedia
  • 10. Amateur runners interested in the interactive application SkyMedia Proprietary
  • 11. 11 Instructing SkyMedia amateur runners SkyMedia Proprietary
  • 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 Integrating UAV ground station and Multimedia Service Platform SkyMedia Proprietary
  • 14. 14 QR code scan
  • 15. 15 Mobile application to track runners performance
  • 16. Touristic sites web apps
  • 17. 17 SkyMedia – Interactive Application
  • 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. 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. 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. Fullscreen on OSx?
  • 22. Fullscreen! con COCOAEseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader) •“Megazoomer” plugin (http://github.com/ianh/megazoomer) Command + Invio
  • 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. La definizione dellapp● Progettazione del layout grafico
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Il framework: Sencha TouchUso integrato di video e Google Maps© items: [ { xtype: map, id: geomap_map, width: 580, height: 635, useCurrentLocation: false, …...
  • 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. 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. 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. Grazie dellattenzione