Configuración de una VPN autenticada con usuario y contraseña en Endian
Presentación de PowerPoint - ua · • PCM Little-Endian Integer 16-bit (LEI16) • Empaquetado en...
Transcript of Presentación de PowerPoint - ua · • PCM Little-Endian Integer 16-bit (LEI16) • Empaquetado en...
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IA
Multimedia
Sesión 2: Procesamiento de vídeo e imagen en iOS
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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; }
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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;
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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);}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
Álbum de fotos• El mismo controlador nos permite obtener fotografías de la
librería de fotos o del carrete de la cámara• En iOS 6 se pregunta al usuario si desea dar acceso• Se puede cambiar en Ajustes > Privacidad > Fotos
• 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);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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
• En iOS 6 el conjunto de filtros se amplia hasta contar con aproximadamente 100 filtros en total
20
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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;
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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;
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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);}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Multimedia © 2012-2013 Depto. Ciencia de la Computación e IA Procesamiento de vídeo e imagen
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];