Cómo adoptar Picture in Picture de iOS para las videollamadas de Vonage

Con el lanzamiento de iOS 15, Apple introdujo la función Picture in Picture, una mejora significativa para la multitarea en iPhones y iPads. Picture in Picture te permite continuar con las videollamadas mientras utilizas otras apps, lo que ofrece una gran flexibilidad y comodidad. Esto te hace más productivo y receptivo, demostrando lo importante que es esta función para la comunicación moderna.

En este artículo, exploraremos cómo los desarrolladores pueden usar iOS Picture in Picture para integrar las videollamadas de Vonage en sus aplicaciones de manera efectiva.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Requisitos previos

• A Cuenta de desarrollador de Vonage

• A versión compatible de Xcode

• Instalar CocoaPods

• Dispositivo con iOS 15 o superior

Renderización de Video personalizada de Vonage

Antes de integrar las videollamadas de Vonage en iOS Picture in Picture, los desarrolladores deberán obtener y procesar los datos de vídeo sin procesar del renderizador de vídeo de Vonage. Estos datos son esenciales para acceder a la transmisión de video directamente dentro de tu aplicación. Comencemos por construir la base de nuestra aplicación.

Sigue el tutorial para crear una aplicación básica de videochat (tiempo estimado de finalización: 25 minutos). Si no quieres empezar desde cero, puedes clonar nuestro repositorio de aplicaciones Swift de ejemplo en GitHub.

Si ha clonado el repositorio, asegúrese de sustituir los valores de su propio ID de aplicación, ID de sesión y token por los suyos propios:

• El ID de la aplicación es tu clave API de Vonage que se encuentra en tu panel cuando creaste la aplicación.

• El identificador de sesión se crea cuando eliges "Crear una sesión de vídeo" en tu panel de control.

• Se puede generar un token utilizando uno de los SDK del servidor de Vonage eligiendo un idioma y encontrando el fragmento de código en "Generación de tokens") con tus propios valores.

Asumiendo que tienes CocoaPods instalado, abre tu terminal, cd al directorio de tu proyecto y escribe pod install. Vuelva a abrir su proyecto en Xcode utilizando el archivo .xcworkspace.

En el archivo ViewController.swift, sustituya las siguientes cadenas vacías por los correspondientes valores de clave de API, ID de sesión y token:

// *** Fill the following variables using your own Project info  ***

//  ***            https://tokbox.com/account/#/                  ***

// Replace with your OpenTok API key

let kApiKey = ""

// Replace with your generated session ID

let kSessionId = ""

// Replace with your generated token

let kToken = ""

Cree y ejecute la aplicación.

En el archivo ViewController.swift de la aplicación de ejemplo, ya ha creado un suscriptor utilizando OTSubscriber:

  subscriber = OTSubscriber(stream: stream, delegate: self)

El suscriptor tiene una propiedad llamada videoRendera la que puedes asignar un renderizador personalizado para el flujo suscrito. Ahora tienes que asignar la propiedad videoRender del suscriptor a la propiedad ExampleVideoRender una clase personalizada que implementa la clase OTVideoRender (definido en el SDK de iOS). Este protocolo te permite definir un renderizador de video personalizado para ser utilizado por un editor o suscriptor de Vonage Video.

   let videoRender = ExampleVideoRender()
   subscriber?.videoRender = videoRender

Para la transmisión continua de vídeo, deberá eliminar el parámetro willResignActiveNotification del suscriptor. Esto permitirá que la app mantenga las operaciones de flujo de vídeo incluso cuando esté en segundo plano.

NotificationCenter.default.removeObserver(subscriber, name: UIApplication.willResignActiveNotification, object: nil)

El sitio ExampleVideoRender gestiona y procesa los datos de flujo de vídeo entrantes, garantizando que se pueda acceder a los fotogramas de vídeo del suscriptor y ajustarlos dentro de la aplicación. La clase renderVideoFrame se ejecuta cuando el suscriptor renderiza un fotograma de vídeo en el renderizador de vídeo. El fotograma es un OTVideoFrame (definido por el SDK de iOS), que contiene información sobre el fotograma de vídeo, como metadatos y datos del plano.

Desde OTVideoFrame sólo proporciona datos planos YUV, necesitamos convertirlos a CMSampleBuffer antes de poder mostrarlo en UIView y Picture in Picture. Pasaremos por el proceso de conversión más adelante en el artículo.

Con el CMSampleBuffer listo, puedes recuperarlo y mostrarlo en un UIView designado.

let bufferDisplayLayer = videoRender.bufferDisplayLayer

bufferDisplayLayer.frame = frame

videoContainerView.layer.addSublayer(bufferDisplayLayer)

Conversión de datos YUV a tampón de muestra

YUV (YCbCr) es un espacio de color común para el vídeo, que representa la luminancia (Y) y la crominancia (UV) por separado. Al extraer los datos del plano YUV, los desarrolladores pueden manipular y convertir estos componentes en un formato compatible con el búfer de muestra de iOS. Esto es necesario para mostrar fotogramas de vídeo en el modo Picture in Picture de iOS.

Como se mencionó anteriormente, puede obtener el OTVideoFrame bajo el comando renderVideoFrame que se ejecuta cuando el suscriptor renderiza un fotograma de vídeo. Este fotograma incluye datos de plano YUV, que los desarrolladores pueden utilizar para crear un CVPixelBuffer. Este paso organiza y mapea correctamente los componentes YUV en el búfer de píxeles.

let pixelAttributes: NSDictionary = [kCVPixelBufferIOSurfacePropertiesKey as String: [:]]

var pixelBuffer: CVPixelBuffer?

let result = CVPixelBufferCreate(kCFAllocatorDefault, width, height, kCVPixelFormatType_32BGRA, pixelAttributes as CFDictionary, &pixelBuffer)
         _ = accel.convertFrameVImageYUV(frame, to: pixelBuffer)

A continuación, cree CMSampleBuffer a partir del CVPixelBufferincluyendo los metadatos necesarios, como la marca de tiempo y la descripción del formato. Estos pasos son cruciales para preparar los fotogramas de vídeo para su visualización en el modo Picture in Picture de iOS, garantizando una reproducción fluida y el cumplimiento de los estándares de iOS.

func createSampleBufferFrom(pixelBuffer: CVPixelBuffer) -> CMSampleBuffer? {
        CVPixelBufferLockBaseAddress(pixelBuffer, .readOnly)
        
        var sampleBuffer: CMSampleBuffer?
        
        
        let now = CMTimeMakeWithSeconds(CACurrentMediaTime(), preferredTimescale: 1000)
        var timingInfo = CMSampleTimingInfo(duration: CMTimeMakeWithSeconds(1, preferredTimescale: 1000), presentationTimeStamp: now, decodeTimeStamp: now)
        var formatDescription: CMFormatDescription? = nil
        CMVideoFormatDescriptionCreateForImageBuffer(allocator: kCFAllocatorDefault, imageBuffer: pixelBuffer, formatDescriptionOut: &formatDescription)
        
        let osStatus = CMSampleBufferCreateReadyWithImageBuffer(
            allocator: kCFAllocatorDefault,
            imageBuffer: pixelBuffer,
            formatDescription: formatDescription!,
            sampleTiming: &timingInfo,
            sampleBufferOut: &sampleBuffer
        )
        
        if osStatus != noErr {
            let errorMessage = osStatusToString(status: osStatus)
            print("osStatus error: \(errorMessage)")
        }
        
        guard let buffer = sampleBuffer else {
            print("Cannot create sample buffer")
            return nil
        }
        
        CVPixelBufferUnlockBaseAddress(pixelBuffer, [])
        
        return buffer
    }

Implementación del componente Picture in Picture

Ahora que el CMSampleBuffer está listo, siga estos pasos para añadir Picture in Picture para videollamadas:

1. Cree la vista de origen que se mostrará dentro del controlador de vista de videollamada.

class SampleBufferVideoCallView: UIView {

    override class var layerClass: AnyClass {

        AVSampleBufferDisplayLayer.self

    }

    var sampleBufferDisplayLayer: AVSampleBufferDisplayLayer {

        layer as! AVSampleBufferDisplayLayer

    }

}

2. Crear un AVPictureInPictureVideoCallViewController y añada la fuente como una subvista para mostrar la vista de la fuente.

let pipVideoCallViewController = AVPictureInPictureVideoCallViewController()

pipVideoCallViewController.preferredContentSize = CGSize(width: 640, height: 480)  

pipVideoCallViewController.view.addSubview(sampleBufferVideoCallView)

3. Cree un AVPictureInPictureController.ContentSource que representa la fuente del contenido que el sistema muestra en el archivo ViewController.swift.

let contentSource = AVPictureInPictureController.ContentSource(

            activeVideoCallSourceView: videoContainerView,

            contentViewController: pipVideoCallViewController)

4. Inicializar AVPictureInPictureController y establezca canStartPictureInPictureAutomaticallyFromInline a true.

pipController = AVPictureInPictureController(contentSource: contentSource)   

pipController.canStartPictureInPictureAutomaticallyFromInline = true

Con la configuración anterior, tu aplicación debería estar lista para el modo Picture in Picture. Podrás ver cómo se inicia la videollamada cuando un usuario pasa al segundo plano. Si no lo ves, comprueba el modo Picture in Picture en los ajustes de tu iPhone/iPad para ver si está activado.

iOS Demo

Resumen del proceso de integración

La integración de las videollamadas de Vonage con iOS Picture in Picture mejora la multitarea, ya que permite a los usuarios continuar con las videollamadas sin interrupciones mientras utilizan otras aplicaciones. Esta capacidad aumenta la productividad, especialmente en reuniones profesionales y trabajo colaborativo.

Encontrará más información y el código completo de la aplicación de ejemplo Picture in Picture en nuestro repositorio de repositorio de GitHub.

Si tiene alguna pregunta, únase a nuestra Slack de la comunidad o envíenos un mensaje en Xantes conocido como Twitter.

Recursos adicionales

• Funcionalidad básica de Video API de Vonage

• API relacionadas con Video de Vonage