Configurar un cliente básico de iOS (Swift)

Este tutorial te guiará paso a paso por el proceso de configuración de un cliente básico para iOS que utilice la Video API de Vonage.

Visión general

Todas las aplicaciones que utilizan la Video API de Vonage requieren tanto un cliente y un servidor componente. El código del lado del cliente es el que se carga en el dispositivo iOS del usuario final y se encarga de la mayor parte de las funciones de OpenTok, entre las que se incluyen conectando a la sesión, edición audio-vídeo arroyos a la sesión, y suscribiéndose a a los flujos de otros clientes. Para más información sobre clientes, servidores y sesiones, véase Conceptos básicos de la Video API.

En este tutorial, utilizará la función SDK de OpenTok para iOS, la biblioteca del lado del cliente de OpenTok para dispositivos iOS, que permite crear de forma rápida y sencilla una aplicación de vídeo interactiva en tiempo real.

Nota: El código de este tutorial está escrito en Swift. También hay un tutorial con el código escrito en Objetivo-C.

Estos son los temas que se tratarán en este tutorial:

Tiempo estimado: 25 minutos

¿Quieres saltarte este tutorial? Puede acceder al código completo del cliente Swift de iOS en la sección Videochat básico de nuestra Repositorio de una aplicación de ejemplo en Swift en GitHub. El repositorio incluye un archivo README con documentación sobre cómo ejecutar y explorar el código.

Requisitos

Para completar este tutorial, necesitarás:

Paso 1: Crear un nuevo proyecto

  1. Abre Xcode y crea un nuevo proyecto.

  2. Seleccionar Aplicación de vista única como plantilla.

  3. Seleccionar Swift como lenguaje para el código de la aplicación.

Paso 2: Incorporación de la biblioteca OpenTok

Sigue los pasos que se indican a continuación para utilizar CocoaPods y añadir la biblioteca OpenTok y sus dependencias a tu aplicación. Si prefieres no utilizar CocoaPods, sigue estas instrucciones para utilizar el SDK.

  1. En el Terminal, navegue hasta el directorio raíz de su proyecto e introduzca:

    pod init

    Esto crea un Podfile en la raíz del directorio de su proyecto.

  2. Edita el Podfile y añade la siguiente línea después del comentario que dice # Pods for [YourProjectName] (El archivo `podfile` no aparecerá en tu proyecto de Xcode, por lo que tendrás que abrirlo directamente desde la carpeta del proyecto):

    pod 'OpenTok'

  3. Guarde los cambios en el archivo Podfile.

  4. Abra el directorio raíz de su proyecto en el Terminal y escriba:

    pod install

  5. Cierra tu proyecto en Xcode. A continuación, vuelve a abrirlo haciendo doble clic en el nuevo archivo .xcworkspace en el Finder (en el directorio raíz de tu proyecto).

Para acceder a la cámara y al micrófono, debe modificar el archivo Info.plist:

  1. En el panel de navegación de la izquierda de Xcode, haz clic en el archivo del proyecto (que lleva el nombre de tu proyecto) para abrir el panel central del proyecto.

    A la izquierda del General En la pestaña del panel del proyecto, deberías ver el nombre de tu proyecto. Si el nombre es diferente al de tu proyecto (por ejemplo, [NombreDeTuProyecto]Tests), haz clic en él y configura el destino con el nombre de tu proyecto.

  2. Dentro del panel, cambie a la pestaña Información.

  3. Despliega la sección «Propiedades del destino personalizado de iOS» si está contraída.

  4. Pasa el cursor por encima de cualquier clave y haz clic en el botón «+» para añadir una nueva clave. Añade una Privacy - Camera Usage Description y asígnale la siguiente cadena:

    $(PRODUCT_NAME) uses the camera.

    A continuación, haga clic en el botón + para añadir un nuevo Privacy - Microphone Usage Description y asígnale la siguiente cadena:

    $(PRODUCT_NAME) uses the microphone.

    La aplicación muestra estos mensajes la primera vez que accede a la cámara y al micrófono.

    (Estas funciones de seguridad se incorporaron en iOS 10.)

Añade la biblioteca de OpenTok al controlador de vista.

  • En Xcode, abre el archivo ViewController.swift y, al principio del archivo, añade una línea para importar la biblioteca OpenTok:

    import UIKit import OpenTok

Paso 3: Configuración de la autenticación

Para conectarse a una sesión de OpenTok, el cliente necesitará tener acceso a unas credenciales de autenticación: un Clave API, ID de sesióny ficha. En una aplicación de producción, estas credenciales deberían generarlas un servidor, pero para agilizar el proceso, por ahora simplemente vamos a introducir los valores de forma fija:

  1. Empieza copiando el siguiente bloque de código y añadiéndolo a tu archivo ViewController.swift:

    // Replace with your OpenTok API key var kApiKey = "" // Replace with your generated session ID var kSessionId = "" // Replace with your generated token var kToken = ""

    Añade estas líneas antes del class ViewController declaración.

  2. Ajuste el código mediante la codificación de los valores para el kApiKey, kSessionId y kToken.

    Para ello, inicia sesión en tu Account de la Video API, crea un nuevo proyecto de la API de OpenTok o utiliza uno ya existente; a continuación, ve a la página de tu proyecto y desplázate hacia abajo hasta la sección Herramientas del proyecto sección. Desde allí, puedes generar manualmente un ID de sesión y un token. Utiliza la clave API del proyecto junto con el ID de sesión y el token que hayas generado.

Importante: Puedes seguir obteniendo los valores del ID de sesión y del token de tu Account durante las fases de prueba y desarrollo, pero antes de pasar a producción debes configurar un servidor. Trataremos este tema en Próximos pasos al final de este tutorial.

Para más información sobre sesiones, tokens y servidores, consulte Conceptos básicos de la Video API.

Paso 4: Conexión a la sesión

A continuación, nos conectaremos a la sesión de OpenTok. Debes hacerlo antes de poder publicar tu transmisión de audio y vídeo en la sesión o ver las transmisiones de los demás participantes.

  1. Añade un session propiedad de la clase ViewController:

    class ViewController: UIViewController var session: OTSession?

    La clase OTSession está definida en el SDK de OpenTok para iOS. Representa una sesión de OpenTok e incluye métodos para interactuar con la sesión.

  2. Añade un método para crear una instancia del objeto OTSession y llamar a su [OTSession connectWithToken: error:] método. A continuación, puede llamarlo en viewDidLoad:

    override func viewDidLoad() { super.viewDidLoad() connectToAnOpenTokSession() } func connectToAnOpenTokSession() { session = OTSession(apiKey: kApiKey, sessionId: kSessionId, delegate: self) var error: OTError? session?.connect(withToken: kToken, error: &error) if error != nil { print(error!) } }

    El OTSession() toma tres parámetros:

    • Tu clave API de OpenTok
    • El identificador de sesión
    • El objeto que implementa el protocolo OTSessionDelegate

    El connect() método del session El objeto conecta la aplicación cliente a la sesión de OpenTok. Debes conectarte antes de enviar o recibir flujos de audio y vídeo en la sesión (o antes de interactuar con la sesión de cualquier forma). El connect() recibe dos parámetros:

    • token es el token de autenticación que permite a este cliente conectarse a la sesión de OpenTok.

    • error se establece en un objeto OTError si se produce un error sincrónico al llamar al método.

  3. A continuación, implementaremos los métodos del protocolo OTSessionDelegate. Añade el siguiente código al final del archivo ViewController.swift, después del corchete de cierre de la clase ViewController:

    // MARK: - OTSessionDelegate callbacks extension ViewController: OTSessionDelegate { func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") } func sessionDidDisconnect(_ session: OTSession) { print("The client disconnected from the OpenTok session.") } func session(_ session: OTSession, didFailWithError error: OTError) { print("The client failed to connect to the OpenTok session: \(error).") } func session(_ session: OTSession, streamCreated stream: OTStream) { print("A stream was created in the session.") } func session(_ session: OTSession, streamDestroyed stream: OTStream) { print("A stream was destroyed in the session.") } }

    Este protocolo incluye métodos para manejar eventos relacionados con la sesión:

    • Cuando el cliente se conecta a la sesión de OpenTok, el sessionDidConnect(_:) se llama al método.

    • Si el cliente no consigue conectarse a la sesión de OpenTok, se pasa un objeto OTError a la session(_: didFailWithError:) método.

    • Cuando el cliente se desconecta de la sesión OpenTok, el sessionDidDisconnect(_:) se llama al método.

    • Cuando otro cliente publica una transmisión en la sesión de OpenTok.

    • Cuando otro cliente deja de publicar un flujo en la sesión de OpenTok.

    Por ahora, la aplicación muestra un mensaje en la consola del depurador cuando se produce cualquiera de estos eventos.

Depura tu aplicación. Si la aplicación se conecta correctamente a la sesión de OpenTok, el sessionDidConnect(_:) imprime en la consola de depuración.

Paso 5: Publicación de un flujo en la sesión

Cuando la aplicación se conecte a la sesión de OpenTok, queremos que publique una transmisión de audio y vídeo en la sesión, utilizando la cámara y el micrófono del dispositivo:

  1. Añade un publisher propiedad de la clase ViewController:

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher?

    La clase OTPublisher está definida en el SDK de OpenTok para iOS. Utiliza la cámara y el micrófono del dispositivo para publicar una sesión de OpenTok en streaming.

  2. Modificar la aplicación del sessionDidConnect(_:) Método para incluir código que permita publicar un flujo en la sesión:

    func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") let settings = OTPublisherSettings() settings.name = UIDevice.current.name guard let publisher = OTPublisher(delegate: self, settings: settings) else { return } var error: OTError? session.publish(publisher, error: &error) guard error == nil else { print(error!) return } guard let publisherView = publisher.view else { return } let screenBounds = UIScreen.main.bounds publisherView.frame = CGRect(x: screenBounds.width - 150 - 20, y: screenBounds.height - 150 - 20, width: 150, height: 150) view.addSubview(publisherView) }

    Cuando la aplicación se conecta a una sesión, inicializa una instancia de OTPublisher, definida en el SDK de OpenTok para iOS. El constructor toma un parámetro: el objeto que implementa el protocolo OTPublisherDelegate.

    A continuación, el código pasa el objeto OTPublisher como parámetro de la función session.publish() método. Este método transmite un flujo de audio y vídeo a la sesión de OpenTok utilizando la cámara y el micrófono del dispositivo iOS. (Ten en cuenta que, en el simulador de Xcode, el SDK de OpenTok para iOS utiliza un vídeo de prueba al transmitir un flujo.)

    El objeto OTPublisher tiene un view propiedad, que es un objeto UIView. Esta vista muestra el vídeo capturado con la cámara del dispositivo. El código añade esta vista como una subvista de la vista del ViewController principal.

  3. A continuación, implementaremos los métodos del protocolo OTPublisherDelegate. Este protocolo incluye métodos para gestionar los eventos relacionados con el editor. Añade el siguiente código al final del archivo ViewController.swift, después del corchete de cierre de la extensión de OTSessionDelegate:

    // MARK: - OTPublisherDelegate callbacks extension ViewController: OTPublisherDelegate { func publisher(_ publisher: OTPublisherKit, didFailWithError error: OTError) { print("The publisher failed: \(error)") } }

    • Si el cliente no consigue publicar en la sesión de OpenTok, se pasa un objeto OTError a la publisher(_: didFailWithError:) método.

Depura tu aplicación. Si la aplicación se conecta correctamente a la sesión de OpenTok, publicará una transmisión en la sesión y podrás ver el vídeo del emisor en la aplicación.

Paso 6: Suscribirse a las transmisiones de otros clientes

Por último, queremos que los clientes puedan suscríbase a a (o ver) los flujos de otros clientes en la sesión:

  1. Añade un subscriber propiedad de la clase ViewController:

    class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher? var subscriber: OTSubscriber?

    La clase OTSubscriber está definida en el SDK de OpenTok para iOS. Utiliza la cámara y el micrófono del dispositivo para suscribirse a una sesión de transmisión de OpenTok.

  2. Modificar la aplicación del session(_: streamCreated) método (una de las llamadas de retorno de OTSessionDelegate) para incluir código que permita suscribirse a las transmisiones de otros clientes en la sesión:

    func session(_ session: OTSession, streamCreated stream: OTStream) { subscriber = OTSubscriber(stream: stream, delegate: self) guard let subscriber = subscriber else { return } var error: OTError? session.subscribe(subscriber, error: &error) guard error == nil else { print(error!) return } guard let subscriberView = subscriber.view else { return } subscriberView.frame = UIScreen.main.bounds view.insertSubview(subscriberView, at: 0) }

    Cuando otro cliente publica un flujo en una sesión, se invoca este método y se le pasa un objeto OTStream. La clase OTStream está definida en el SDK de OpenTok para iOS y representa un flujo de audio y vídeo en la sesión de OpenTok. El código inicializa una instancia de la clase OTSubscriber, definida en el SDK de OpenTok para iOS. El OTSubscriber() El constructor admite dos parámetros: el objeto OTStream (correspondiente al flujo que se desea visualizar) y el objeto que implementa el protocolo OTSubscriberDelegate.

  3. A continuación, implementaremos los métodos del protocolo OTSubscriberDelegate. Este protocolo incluye métodos para gestionar los eventos relacionados con el suscriptor. Añade el siguiente código al final del archivo ViewController.swift, después del corchete de cierre de la extensión OTPublisherDelegate:

    // MARK: - OTSubscriberDelegate callbacks extension ViewController: OTSubscriberDelegate { public func subscriberDidConnect(toStream subscriber: OTSubscriberKit) { print("The subscriber did connect to the stream.") } public func subscriber(_ subscriber: OTSubscriberKit, didFailWithError error: OTError) { print("The subscriber failed to connect to the stream.") } }

    • Cuando el cliente se conecta a la sesión de OpenTok, el subscriberDidConnect(_:) se llama al método.

    • Si el cliente no consigue conectarse a la sesión de OpenTok, se pasa un objeto OTError a la subscriber(_: didFailWithError:) método.

Paso 7: Ejecutar la aplicación

Ahora que has terminado el código, puedes ejecutar la aplicación en el emulador de Xcode. Esto creará un vídeo simulado del editor; dado que el emulador no puede acceder a tu cámara web, el vídeo del editor mostrará un gráfico de una tetera girando en lugar de la imagen de tu cámara.

Para añadir un segundo editor (que aparecerá como suscriptor en tu emulador), ejecuta la aplicación por segunda vez en un dispositivo iOS conectado o utiliza el OpenTok Playground para conectarse a la sesión en un navegador web compatible siguiendo los pasos que se indican a continuación:

  1. Ir a OpenTok Playground (debe estar conectado a su Account)

  2. Selecciona el Unirse a una sesión existente pestaña

  3. Copia el ID de sesión que has utilizado en tu archivo ViewController.swift y pégalo en ID de sesión campo de entrada

  4. Haz clic Unirse a la sesión

  5. En la pantalla siguiente, pulse Conectar, y a continuación haz clic en Publicar flujo

  6. Puede ajustar las opciones del editor (no es necesario) y, a continuación, haga clic en Continúe en para conectarse y empezar a publicar y suscribirse

En este momento deberías ver la transmisión que se está publicando desde tu cámara web, así como la transmisión que está publicando el emulador. Al volver al emulador, también deberías ver el nuevo editor que aparece en la pantalla emulada.

¡Enhorabuena! Has terminado el tutorial 'Configurar un cliente iOS básico (Swift)'.
Puedes seguir jugando y ajustando el código que has desarrollado aquí para el lado del cliente de tu aplicación, pero ten en cuenta que tendrás que implementar la función componente de servidor de su aplicación antes de pasar a producción (véase Configuración del servidor más abajo).

Puede ver una versión completa de esta aplicación de ejemplo en la página Videochat básico carpeta de la vonage-ios-sdk-ejemplos-swift repositorio en GitHub. Esta versión completa incluye código para cargar el ID de sesión, el token y la clave de API desde un servicio web (en lugar de utilizar valores fijos).

Próximos pasos

Cuando hayas terminado aquí, sigue desarrollando y mejorando tu aplicación de OpenTok con estos útiles recursos:

Configuración del servidor

En el tutorial anterior, te pedimos que introducir las credenciales de autenticación de forma estática. Sin embargo, en el caso de una aplicación de producción, el sessionId y token Los valores de tu código deben ser generados por el servidor de la aplicación y transmitidos al cliente. A continuación te explicamos un par de razones por las que no es recomendable incluir credenciales codificadas de forma fija en tu aplicación de producción:

  • Los tokens caducan tras un tiempo determinado (especificado en el momento de su generación), por lo que es necesario generar otros nuevos periódicamente.
  • No podrás crear nuevas sesiones de forma dinámica, por lo que todos los usuarios de tu aplicación se quedarían atrapados en una única «sala».

Puedes seguir probando tu aplicación con valores fijados de forma estática, pero cuando estés listo para configurar un servidor, hay varias formas de hacerlo:

Opción de servidor 1: poner en marcha un servidor REST sencillo en Heroku con un solo clic

Probablemente esta sea la forma más rápida de poner en marcha un servidor, pero tiene una funcionalidad limitada. Solo tienes que hacer clic en el botón de Heroku que aparece a continuación; se te redirigirá a la página web de Heroku y se te pedirá tu clave API y tu secreto API de OpenTok; puedes encontrar estos valores en la página de tu proyecto en tu Account de la Video API. Si no tienes un Account de Heroku, tendrás que registrarte (es gratis).

Deploy

¿Quieres echar un vistazo al código? El botón de arriba ejecuta el código del servidor desde el aprender-opentok-php Repositorio de GitHub. Visita el repositorio para revisar el código y consultar la documentación adicional; incluso puedes crear una bifurcación del repositorio y realizar cambios antes de la implementación.

¿Prefieres Node.js? Visita la aprender-opentok-node Repositorio con la misma funcionalidad utilizando Node.js (incluido el botón de implementación en Heroku).

Una vez que el servidor esté implementado en Heroku, tendrás que añadir unas cuantas líneas al código del lado del cliente. En lugar de llamar a connectToAnOpenTokSession directamente, tendrás que realizar una llamada de red a la ruta /session en tu servidor para obtener primero unas credenciales válidas de OpenTok.

Copia el siguiente código y utilízalo para sustituir viewDidLoad En tu archivo ViewController.swift:

override func viewDidLoad() { super.viewDidLoad() let configuration = URLSessionConfiguration.default let session = URLSession(configuration: configuration) let url = URL(string: <#https://YOURAPPNAME.herokuapp.com/session#>) let dataTask = session.dataTask(with: url!) { (data: Data?, response: URLResponse?, error: Error?) in guard error == nil, let data = data else { print(error!) return } let dict = try! JSONSerialization.jsonObject(with: data, options: .allowFragments) as? [AnyHashable: Any] kApiKey = dict?["apiKey"] as? String ?? "" kSessionId = dict?["sessionId"] as? String ?? "" kToken = dict?["token"] as? String ?? "" self.connectToAnOpenTokSession() } dataTask.resume() session.finishTasksAndInvalidate() }

Tendrás que sustituir https://YOURAPPNAME.herokuapp.com con la URL real de tu aplicación de Heroku; la encontrarás en la página de tu aplicación en la web de Heroku.

El código anterior envía una solicitud al /sesión punto final (https://YOURAPPNAME.herokuapp.com/session), que debería devolver una respuesta HTTP que incluya el ID de sesión, el token y la clave de API en formato JSON, datos que luego se asignan a las variables correspondientes.

Este /session El punto final siempre devolverá el mismo ID de sesión, pero generará un nuevo token cada vez que se llame a él, lo que hace que cada cliente reciba un token único.

Opción 2 para el servidor: compilar desde cero utilizando los SDK del servidor

La opción 1 utiliza puntos finales REST para transmitir las credenciales al cliente, pero esa es solo una de las muchas formas de implementar un servidor con OpenTok. Si deseas un mayor nivel de personalización, puedes consultar la documentación de OpenTok sobre Documentación del SDK del servidor para el lenguaje del lado del servidor que elijas (disponible para PHP, Node.js, Java, .NET, Python y Rubí). La documentación explica el proceso de configuración y los distintos métodos que necesitarás para generar sesiones y tokens, así como otras funcionalidades del lado del servidor.