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