Servei de vídeos a la carta per a l'iPhone.

Servei de vídeos a la cartaper a l’iPhone

Bruna GirventTutoritzat per Xavier Giró

Bruna Girvent

Índex• Introducció

• Estat de l’art

• Requeriments

• Servidor

• Disseny

• Desenvolupament

• Aplicació client

• Disseny

• Desenvolupament

• Resultats

• Conclusions

Servei de vídeos a la carta per a l’iPhone

Índe

x

2

Bruna Girvent

Introducció


Intr

odu

cció

3

3G

iTunes U

Telèfons intel·ligents Internet Vídeo!

Bruna Girvent

Dispositius mòbils tàctils• Actualment la majoria de dispositius mòbils incorporen:

- pantalles tàctils

- connexió a Internet

- instal·lacions d’aplicacions de tercers

- personalització i nombroses funcionalitats

• Dispositius mòbils tàcils per a reproducció de vídeo

- telèfons intel·ligents: Symbian, RIM, iPhone, Windows Phone, Android

- ordinadors tàctils: iPad


Esta

t de

l’a

rt

4

Bruna Girvent

Dispositius mòbils tàctils

• Comparativa de sistemes operatius

AppStore: 3 milions de descàrregues d’aplicacions

• Apple ofereix el kit de desenvolupament (sdk)

• Tercers poden desenvolupar aplicacions

• Distribució mundial a través de AppStore


Esta

t de

l’a

rt

5

Garthner (febrer 2010)

Bruna Girvent

Mètodes de distribució de continguts

• Descàrregues

• Reproducció en temps real (streaming):

• Emissions en directe (live streaming)

• Vídeos a la carta (Video on Demand, VoD)


Esta

t de

l’a

rt

6

Bruna Girvent

Transmissió de vídeo per IP


Esta

t de

l’a

rt

7

!

Base de

dades

!

Repositori de

vídeos

xarxa

servidor client3G

! !

Protocols

TCPde transport UDP

RTP, SRTPRTCP, SRTCP

HTTPd’aplicació RTSP

RTMPMMS

!

!

!

Programari reproductor

Formats de reproducció

H.264/ MPEG-4 MOV / MP4 AAC / MP3

OGG THEORA VORBIS

WEBM VP8 VORBIS

Contenidor Flash FLV o VP6 MP3

!

!

!

!

Bruna Girvent

Sistemes de transmissió en temps real


Esta

t de

l’a

rt

8

IIS Smoth StreamingHTTP Live Streaming

Servidor Web

HTTPCodificador Adaptació

RTMPCodificador Servidor Flash

Servidor Multimèdia

Servidor Web

RTSPCodificador

RTP

Adobe Flash

Bruna Girvent

HTTP Live Streaming


Esta

t de

l’a

rt

9

Video H.264 Baseline ProfileAudio HE-AAC o AAC-LC

MP3

Bruna Girvent

iPhone


Esta

t de

l’a

rt

10

• Característiques principals:

• pantalla panoràmica multitàcil de 480x320 pixels

• connectivitat a xarxes 2G, 3G, Wi-Fi i Bluetooth

• GPS assistit

• càmera 2mp (3G) / 3mp (3GS)

• capacitat 8, 16 o 32 GB

• processador a 412MHz (3G) / 600MHz (3GS)

• Formats compatibles:

•H.264 Perfil Bàsic

•MPEG-4 Perfil Simple

àudio AAC

formats .m4v, .mp4 i .mov

Bruna Girvent

iPhone OS X


Esta

t de

l’a

rt

11

Core OS (nucli del SO)kernelsistema de bibliotequespila TCP/IPseguretatgestió d’energiacertificatssistema d’arxiusarrancada

Core Services (serveis bàsics del sistema)col·leccionsagenda de direccionsxarxesaccés a arxiusSQLitelocalitzacióserveis de xarxapreferènciesutilitats de URLs

Media (gestió multimedia)nucli d’àudiogràfics OpenGLmesclador de sogravació d’àudioreproducció de vídeogestió de jpg, png, tiff i pdfAnimacions

Cocoa Touch (eventa tàctils)events i controls muli-tàctilssuport de l’acceleròmetrevista jeràrquicalocalització d’aplicacionsalertesvisita webselector de contactesselector d’imatgessuport a la càmera

Bruna Girvent

Exemple d’una aplicació per a l’iPhone


Esta

t de

l’a

rt

12

Bruna Girvent

Requeriments

• Servei de vídeos a la carta per a l’iPhone

• Reproducció en temps real a pantalla completa dels continguts audiovisuals del TSC

• Reproducció dels continguts ja existents en el servidor de vídeo

• Publicació de nous vídeos a través de la interfície web del servidor exitent.

• Aplicació per a iPhone que permeti:

• navegar pel catàleg de vídeos

• accés a les metadades per mostrar-les per pantalla


Req

ueri

men

ts

13

Bruna Girvent

Servidor


Dis

seny

14

HTTP

DistribucióIngesta

Codificador Segmentador

Servidor web

!

Repositori de videos

VIDEO

METADADES

fitxer de vídeo

video codificat

fragments de video + index

Fitxer XML(metadades)

fragments de video + index

fragments video+ index

Gestió i control metadades

!

BBDD MySQL

metadadesfitxer XML

(metadades)generador

XMLmetadades

!

Repositori XML

fitxer XML (metadades)

Gestió metadades

Bruna Girvent

Ingesta de vídeos


Dis

seny

15

Ingesta

Codificador de vídeo Segmentadorvideo.ts video_fragment1.ts

video_fragment2.tsvideo_fragmentN.ts

index.m3u8

video.ext

!


Gestió de metadadesGestió i control de metadades

!

BBDD MySQL

metadadesfitxer XML

(metadades)generador XML

metadades

!

Repositori XML

Programa gestor de metadades

Bruna Girvent

Distribució de continguts


Dis

seny

16

HTTP

Distribuidor


video_fragment1.tsvideo_fragment2.tsvideo_fragmentN.ts

index.m3u8video_fragment1.tsvideo_fragment2.tsvideo_fragmentN.ts

index.m3u8

Servidor web


!


!

Repositori XML

Bruna Girvent

Servidor


Des

envo

lupa

men

t

17

• Sistema Operatiu Linux

• Codificador

• MPEG2-TS àudio mp3 48kHz 240kb vídeo H.264 320x240 96kb

• Segmentador Open Source

• Paquet XAMPP:

• Servidor Web: Appache

• Gestor BBDD: MySQL

David Vera (2008), Laurens de Vos (2009)

Llenguatge de programació: Bash


Llenguatge de programació: PHP i HTML


Llenguatge de programació: MySQL

Bruna Girvent

Servidor


Des

envo

lupa

men

t

18


Bruna Girvent

Disseny aplicació client


Dis

seny

19

Video 1

Video 2Video 3

More Info View

Information about this application and the developer

company

Imatge Vídeo

TÍTOL VÍDEO

Bruna Girvent

Funcionament aplicació client


Dis

seny

20

fitxer.xml

titolusuaridescripciócategoriatemaurlMiniaturaurlIndexVideo

metadades

!

Bruna Girvent

Funcionament aplicació client


Dis

seny

21

index.m3u8

index.m3u8?

index.m3u8

video_segment1.ts ?

video_segment1.ts

video_segment2.ts ?

video_segment2.ts

Bruna Girvent

Procés de desenvolupament aplicació client


Des

envo

lupa

men

t

22

!

Bruna Girvent

iPhone SDK


Des

envo

lupa

men

t

23

MoviePlayer

InstrumentsSimulator

OpenGL

Bruna Girvent

Programació aplicació client


Des

envo

lupa

men

t

24

Estructura de vistes

Bruna Girvent



Des

envo

lupa

men

t

25

Programació aplicació clientVistes, menús i objectes amb Interface Builder

Bruna Girvent



Des

envo

lupa

men

t

26

Programació aplicació clientEstructura de dades

Bruna Girvent

Test i publicació a l’AppStore


Des

envo

lupa

men

t

27

Bruna Girvent

Resultats


Res

ulta

ts

28

Ingesta de vídeos• Codificació en 3 qualitats:

• alta: TOD

• mitja: MPEG-4

• baixa (iPhone):

• alta: 640kb/s

• mitja 440kb/s

• baixa 240kb/s

Bruna Girvent

Resultats


Res

ulta

ts

29

Aplicació client

1. Càrrega aplicació

2. Vista Inici

3. Navecació dins la vista Vídeos

4. Vista detallada del vídeo

5. Reproducció del vídeo

6. Navegació dins la vista Vídeos

7. Vista Més Info

8. Obrir web amb Safari

Bruna Girvent

Resultats


Res

ulta

ts

30

Video demostració

Bruna Girvent

Coneixements adquirits


Co

nclu

sio

ns

31

Llenguatge de programació Programari

Linux

Mac OS X

PHPBashXML / HTMLMySQL

FFMpegSegmenterApache

Objective-CCocoa Touch

iPhone SDK: XCodeInterface BuilderInstruments

Bruna Girvent

Treball futur


Co

nclu

sio

ns

32

Llenguatge de programació Programari

Linux

Mac OS X

PHPBashXML / HTMLMySQL

FFMpegSegmenterApache

Objective-CCocoa Touch

iPhone SDK: XCodeInterface BuilderInstruments

Servei de vídeos a la carta per a l'iPhone.

Technology

Transcript of Servei de vídeos a la carta per a l'iPhone.