Sesión 3: Procesamiento de vídeo e imagen en iOS...Reproducción de vídeo básica • Podemos...

Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2011-2012 Depto. Ciencia de la Computación e IA

Gráficos y multimedia

Sesión 3: Procesamiento de vídeo e imagen en iOS


Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen

Puntos a tratar• APIs multimedia• Reproducción de audio• Reproducción de vídeo• Captura de vídeo• Toma de fotografías y librería multimedia• Procesamiento de imágenes• Detectores de características

2



APIs multimedia• Media Player (MP)• Acceso a la librería del iPod. Reproductor nativo

• AVFoundation (AV)• Reproducción y captura avanzada

• Audio Toolbox (AU)• Conversión de formatos de audio

• OpenAL (AL)• Reproducción avanzada de audio

• Assets Library (AL)• Acceso a la librería multimedia

• CoreImage (CI)• Procesamiento de imagen

3



Formatos de audio con compresión• Contamos con hardware de descompresión• AAC (MPEG-4 Advanced Audio Coding)• ALAC (Apple Lossless)• HE-AAC (MPEG-4 High Efficiency AAC, no software)• MP3 (MPEG-1 audio layer 3)

• El hardware sólo puede reproducir un fichero simultáneo

• Un segundo fichero se reproduciría por software• Esto resulta demasiado costoso

• Útil para reproductores de música

4



Formatos de audio sin compresión• Sin compresión o con compresión simple• No es necesario hardware específico• Se pueden reproducir por software con escaso coste

• Formatos soportados:• Linear PCM (sin compresión)• IMA4 (IMA/ADPCM)• iLBC (internet Low Bitrate Codec)• µ-law y a-law

• Permiten reproducir varios sonidos simultáneos con escaso coste

• Útil para efectos de sonido

5



Formatos de fichero

• Podemos reproducir ficheros de audio de diferentes tipos• .wav• .mp3• .aac• .aiff• .caf

• El formato preferido es CAFF (Core Audio File Format)• Puede contener cualquiera de las codificaciones anteriores

6



Formatos preferidos• PCM Little-Endian Integer 16-bit (LEI16)• Empaquetado en un fichero CAFF

• Si hay problema de espacio• AAC para música de fondo• IMA4 para efectos de sonido

• Herramientas afconvert, afinfo, afplay

• Por ejemplo, para PCM LEI16 en CAFF:

7

afconvert -‐d [out data format] -‐f [out file format] [in file] [out file]

afconvert -‐f caff -‐d LEI16 sonido.wav sonido.caf



Reproducción de sonidos del sistema• Sonidos básicos de la interfaz (soporta CAFF, AIFF y WAV)• Alarma, click, beep, vibración

• Contamos con una API C• Crear sonido del sistema y obtener ID asignado

• Reproducir sonido

• Reproducir con vibración

8

SystemSoundID sonido;NSURL *urlSonido = [[NSBundle mainBundle] URLForResource:@"alarma" withExtension:@"caf"];AudioServicesCreateSystemSoundID((CFURLRef)urlSonido, &sonido);

AudioServicesPlaySystemSound(sonido);

AudioServicesPlayAlertSound(kSystemSoundID_Vibrate);



Reproducción de música• Para reproducir música podemos utilizar AVAudioPlayer• Sólo una música simultáneamente

• Puede tardar en empezar a reproducir: prepareToPlay• Podemos controlar la reproducción: play, pause, stop• Podemos definir un delegado

• Para un mayor control sobre el audio utilizaremos OpenAL• Por ejemplo, para videojuegos

9

NSError *error = nil;NSURL *urlMusica = [[NSBundle mainBundle] URLForResource:@"musica" withExtension:@"mp3"]; AVAudioPlayer *player = [[AVAudioPlayer alloc] initWithContentsOfURL:urlMusica error:&error]; [player prepareToPlay];[player play];



Formatos de vídeo

• Soporta ficheros mov, mp4, m4v y 3gp

• Formatos de codificación soportados

• H.264, hasta 1.5 Mbps, 640 x 480, 30 fps, versión de baja complejidad del H.264 Baseline Profile con audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo

• H.264, hasta 768 Kbps, 320 x 240, 30 fps, Baseline Profile hasta nivel 1.3 con audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo

• MPEG-4, hasta 2.5 Mbps, 640 x 480, 30 frames per second, Simple Profile con audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo

10



Reproducción de vídeo básica• Podemos utilizar el reproductor del sistema• Pantalla modal con el reproductor

• Crear URL que nos dé acceso al vídeo

• Abrir vista modal

11

NSURL *movieUrl = [[NSBundle mainBundle] URLForResource:@"video" withExtension:@"m4v"];

MPMoviePlayerViewController *controller = [[MPMoviePlayerViewController alloc] initWithContentURL:movieUrl];[self presentMoviePlayerViewControllerAnimated: controller];[controller release];



Reproductor integrado• Podemos integrar el reproductor en nuestras vistas• Creamos controlador de reproducción (no es UIViewController)

• Le asignamos un tamaño y lo añadimos como subvista

• Comenzamos la reproducción

12

self.moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:movieUrl];

self.moviePlayer.view.frame = self.view.bounds;[self.view addSubview: self.moviePlayer.view];

[self.moviePlayer play];



Notificaciones del reproductor• Nos permite escuchar los eventos del reproductor

• Por ejemplo, cerrar la vista el terminar el vídeo

13

[[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(videoPlaybackDidFinish:) name: MPMoviePlayerPlaybackDidFinishNotification object: self.moviePlayer];

-‐(void) videoPlaybackDidFinish: (NSNotification*) notification { [self.moviePlayer.view removeFromSuperview]; [[NSNotificationCenter defaultCenter] removeObserver: self name: MPMoviePlayerPlaybackDidFinishNotification object: self.moviePlayer]; self.moviePlayer = nil; }



Personalización del reproductor• Ajustar el tamaño al girar

• Poner una vista de fondo

• Cambiar los controles

14

self.moviePlayer.controlStyle = MPMovieControlStyleNone;

[self.moviePlayer.backgroundView addSubview: [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"fondo.png"]];

self.moviePlayer.view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;



Reproducción con AV Foundation• Permite un mayor control sobre la reproducción de vídeo

• Desacopla reproductor y visualización• AVPlayer• AVPlayerLayer

• Reproduce en una capa CALayer (CoreAnimation)

15

AVPlayer *player = [AVPlayer playerWithUrl: videoUrl]; AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player];[self.view.layer addSublayer:playerLayer];



Captura de fotografías• Contamos con un controlador para capturar fotografías

• Debemos definir un delegado para obtener la imagen

16

UIImagePickerController *picker = [[UIImagePickerController alloc] init];picker.sourceType = UIImagePickerControllerSourceTypeCamera;[self presentModalViewController:picker animated:YES];

-‐ (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { UIImage *imagen = [info valueForKey: UIImagePickerControllerOriginalImage]; UIImageWriteToSavedPhotosAlbum(imagen, self, @selector(guardada:), nil);}



Álbum de fotos• El mismo controlador nos permite obtener fotografías de la

librería de fotos o del carrete de la cámara

• Podemos cambiar la fuente de las imágenes• UIImagePickerControllerSourceTypePhotoLibrary• UIImagePickerControllerSourceTypeSavedPhotosAlbum

• Podemos también almacenar una fotografía en el carrete

17

picker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;

UIImageWriteToSavedPhotosAlbum(image, self, @selector(guardada:), nil);



Captura avanzada de audio/vídeo

• A partir de iOS 4.0 tenemos control total sobre la captura

• Sesión de captura (AVCaptureSession) coordina• Entrada (AVCaptureInput): dispositivo• Salida (AVCaptureOutput): fichero, datos, imágenes

• Podemos mostrar preview del video capturado

• Podemos procesar los fotogramas del vídeo en tiempo real

18



Procesamiento de imágenes• Se trata de una operación altamente costosa• Debe implementarse sobre una arquitectura hardware adecuada

• NEON• Unidad SIMD (Single Instruction Multiple Data) en ARMv7• Mismo código para cualquier dispositivo ARMv7 (Android e iOS)• Debemos vectorizar algoritmos

• Shaders• Programación de la GPU• OpenGL tiene el lenguaje GLSL• Manipulación de gráficos con altos niveles de paralelismo

19



Core Image

• Implementación optimizada de distintos filtros de procesamiento de imágenes y detectores de características

• Se incorpora en iOS 5• Versión reducida respecto a MacOS• Por el momento no soporta crear nuestros propios filtros• Contamos con unos 50 filtros disponibles• Detector de caras

20



Imágenes de CoreImage• Se representan mediante CIImage

• No contienen una imagen para mostrar, sino que contienen una imagen original y una secuencia de filtros a aplicar sobre ella

• Podemos transformar entre CIImage y UIImage• La imagen puede no mostrarse en determinados ámbitos

• Tamaño de la imagen

21

CGImageRef cgImage = [UIImage imageNamed: @"imagen.png"].CGImage;CIImage *ciImage = [CIImage imageWithCGImage: cgImage];

UIImage *uiImage = [UIImage imageWithCIImage: ciImage];CIImage *ciImage = uiImage.CIImage;

CGRect area = ciImage.extent;



Filtros• Se definen mediante el nombre del filtro

• Cada filtro tiene una serie de parámetros• Siempre tendrán como parámetros la imagen original a procesar

• Obtener la imagen resultante• No realiza el procesamiento, sólo encadena el filtro

22

CIFilter *filter = [CIFilter filterWithName: @"CISepiaTone"];

CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone" keysAndValues: kCIInputImageKey, ciImage, @"inputIntensity", [NSNumber numberWithFloat:0.8], nil];

CIImage *filteredImage = filter.outputImage;



Contexto de CoreImage• Se encarga de realizar el procesamiento de las imágenes• Tenemos dos tipos: CPU y GPU• CPU• Realiza el procesamiento utilizando la CPU

• Renderiza la imagen como CGImageRef

• GPU• Realiza el procesamiento sobre la GPU• Muestra la imagen con OpenGL• No puede funcionar en segundo plano

23

CIContext *context = [CIContext contextWithOptions:nil];

CGImageRef cgImage = [context createCGImage:filteredImage fromRect:filteredImage.extent];



Aplicación con vista OpenGL• Debemos crear contexto OpenGL• Esto lo tendremos hecho en la plantilla de proyecto OpenGL

• Creamos y añadimos una vista de tipo GLKView

• Definir método del delegado para dibujar en dicha vista

24

EAGLContext *glContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

GLKView *glkView = [[GLKView alloc] initWithFrame: CGRect(0,0,320,480) context: glContext];glkView.delegate = self;[self.view addSubview: glkView];

-‐ (void)glkView:(GLKView *)view drawInRect:(CGRect)rect { glClearColor(1.0, 1.0, 0.5, 1.0); glClear(GL_COLOR_BUFFER_BIT);}



Procesamiento con GPU• Contexto GPU de CoreImage a partir del contexto OpenGL

• Renderizar imagen resultante en el delegado de GLKView

• Repintar la vista tras actualizar la imagen de salida

25

CIContext *context = [CIContext contextWithEAGLContext: glContext];

-‐ (void)glkView:(GLKView *)view drawInRect:(CGRect)rect { [context drawImage: filteredImage atPoint: CGPointZero fromRect: filteredImage.extent];}

[glkView display];



Detección de características• Se utiliza CIDetector• Por el momento sólo contamos con el detector de caras• Está preparado para incorporar nuevos detectores

• Obtener características obtenidas

• En el caso del detector de caras son de tipo CIFaceFeature• Nos dan el área (CGRect) de la característica (cara)• También nos dará el área de la boca y los ojos

26

CIDetector* detector = [CIDetector detectorOfType:CIDetectorTypeFace context:nil options:[NSDictionary dictionaryWithObject:CIDetectorAccuracyHigh forKey:CIDetectorAccuracy]];

NSArray* features = [detector featuresInImage:ciImage];



¿Preguntas...?

27

Sesión 3: Procesamiento de vídeo e imagen en iOS...Reproducción de vídeo básica • Podemos...

Documents

Transcript of Sesión 3: Procesamiento de vídeo e imagen en iOS...Reproducción de vídeo básica • Podemos...