Personalización de la interfaz de usuario — iOS

Estos son los ajustes que puedes realizar para personalizar la interfaz de usuario de los vídeos de OpenTok:

Añadir un nombre a un flujo publicado

Para especificar la propiedad name del flujo publicado, establezca la propiedad name del objeto OTPublisherSettings que se utiliza al inicializar un Publisher:

OTPublisherSettings *_publisherSettings = [[OTPublisherSettings alloc] init];
_publisherSettings.name = @"Juan";
_publisher = [[OTPublisher alloc]
              initWithDelegate:self
              settings:_publisherSettings];

La clase OTStream tiene un name propiedad. Cuando tú suscribirse a un flujopuedes mostrar este nombre en un elemento de la interfaz de usuario. (Además, este nombre se muestra cuando el vídeo en una página web que utiliza la biblioteca OpenTok.js).

No introduzcas datos personales en el campo «nombre» del editor. — El nombre del editor puede quedar visible para los demás participantes de la sesión y también puede aparecer en la herramienta Inspector y en los registros internos de Vonage, por lo que nunca debes utilizar información confidencial o personal sin cifrar en el nombre del editor. Consulta las mejores prácticas de seguridad.

Añadir un botón de silenciar para un editor

No existe ningún elemento predeterminado de la interfaz de usuario para silenciar el micrófono del editor. Sin embargo, puede añadir un elemento, como un botón, que establezca la opción publishAudio propiedad del objeto OTPublisher cuando el usuario hace clic en él. Establece el publishAudio propiedad a NO Para silenciar al editor:

publisher.publishAudio = NO;

Fije el publishAudio propiedad a YES para publicar audio.

publisher.publishAudio = YES;

Por ejemplo, consulta el ejemplo «Proyecto 4: Gráficos superpuestos» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Añadir un botón de silencio para un abonado

No existe ningún elemento predeterminado de la interfaz de usuario para silenciar el audio del abonado. Sin embargo, puedes añadir un elemento, como un botón, que active el subscribeToAudio del objeto OTSubscriber cuando el usuario haga clic en él. Establece el subscribeToAudio propiedad a NO para silenciar al abonado

subscriber.subscribeToAudio = NO;

Fije el subscribeToAudio propiedad a YES para suscribirse al audio (si hay un flujo de audio):

subscriber.subscribeToAudio = YES;

Por ejemplo, consulta el ejemplo «Proyecto 4: Gráficos superpuestos» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Añadir un botón para activar la cámara del editor

No existe ningún elemento predeterminado de la interfaz de usuario que permita cambiar la cámara utilizada por el editor. Sin embargo, puedes añadir un elemento, como un botón, que establezca la cameraPosition del objeto OTPublisher. Establezca la propiedad a un valor definido en el enum AVCaptureDevicePosition. Por ejemplo, el siguiente código establece el editor para utilizar la cámara trasera:

publisher.cameraPosition = AVCaptureDevicePositionBack;

Tenga en cuenta que el cameraPosition La propiedad no está disponible en la clase OTPublisherKit. Si estás utilizando la clase OTPublisherKit para implementar un capturador de vídeo personalizadopuede definir la cámara utilizada en el código de captura de vídeo personalizado.

Por ejemplo, consulta el ejemplo «Proyecto 4: Gráficos superpuestos» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Ajuste de la interfaz de usuario cuando el vídeo está activado o desactivado

Cuando se desactiva el vídeo de un abonado, el [OTSubscriberKitDelegate subscriberVideoDisabled:reason:] Se envía el mensaje. Cuando esto ocurre, puedes añadir un elemento de la interfaz de usuario (como un icono) para indicar que el vídeo se ha desactivado:

- (void)subscriberVideoDisabled:(OTSubscriberKit*)subscriber
                         reason:(OTSubscriberVideoEventReason)reason
{
    // Display the video disabled indicator
}

Cuando se vuelve a habilitar el vídeo de un suscriptor, el [OTSubscriberKitDelegate subscriberVideoEnabled:reason:] Se envía el mensaje. Cuando esto ocurra, puedes eliminar un elemento de la interfaz de usuario (como un icono) que indique que el vídeo se ha vuelto a activar:

- (void)subscriberVideoEnabled:(OTSubscriberKit*)subscriber
                        reason:(OTSubscriberVideoEventReason)reason
{
    // Remove the video disabled indicator
}

En las sesiones que utilizan el OpenTok Media Router (sesiones con el modo de medios configurado como enrutado), también se pueden enviar los siguientes mensajes:

Quizá también te interese mostrar y ocultar una notificación en la interfaz de usuario (como un icono) cuando se envíen estos mensajes.

Por ejemplo, consulta el ejemplo «Proyecto 4: Gráficos superpuestos» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Ten en cuenta que, al publicar un flujo, se activa o desactiva la función de recambio de audio para emisores y suscriptores. La función de recambio de audio desactiva el vídeo (tanto en los emisores como en los suscriptores) cuando las condiciones de la red o de la CPU no permiten la transmisión de vídeo. Consulta Opción alternativa de audio (iOS).

Si activas la opción de audio alternativo del editor, el PublisherKitDelegate enviará los siguientes mensajes relativos a eventos relacionados con la caída de audio del editor:

  • [OTPublisherKitDelegate publisherVideoDisabled:reason:]
  • [OTPublisherKitDelegate publisherVideoEnabled:reason:]
  • [OTPublisherKitDelegate publisherVideoDisableWarning:]
  • [OTPublisherKitDelegate publisherVideoDisableWarningLifted:]

Puedes mostrar indicadores de la interfaz de usuario en respuesta a estos eventos.

Visualización de un elemento indicador cuando se archiva una sesión

Cuando un archivo de una sesión comienza a grabar (o si se conecta a una sesión que se está grabando), la pantalla [OTSessionDelegate session:archiveStartedWithId:name:] se envía el mensaje. Cuando se detiene la grabación, el [OTSessionDelegate session:archiveStoppedWithId:] Se envía el mensaje. Puedes añadir un elemento de interfaz de usuario, como un icono que se muestre en una vista de OTPublisher, para indicar que se está grabando un vídeo:

- (void)     session:(OTSession*)session
archiveStartedWithId:(NSString*)archiveId
                name:(NSString*)name
{
    // Display the archive indicator
}

- (void)     session:(OTSession*)session
archiveStoppedWithId:(NSString*)archiveId
{
    // Hide the archive indicator
}

Por ejemplo, consulta el ejemplo «Proyecto 5: Llamada multipartita» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Cómo obtener una imagen fija de un vídeo

El siguiente código captura y muestra una imagen estática del vídeo Publisher, la añade a la vista principal y establece un objeto UIImage para la imagen:

UIView* screenCapture = [publisher.view
    snapshotViewAfterScreenUpdates:YES];
[self.view addSubview:screenCapture];

UIGraphicsBeginImageContextWithOptions(publisher.view.bounds.size,
    NO, [UIScreen mainScreen].scale);
[view drawViewHierarchyInRect:publisher.view.bounds
    afterScreenUpdates:YES];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

El siguiente código captura y muestra una imagen estática del vídeo del suscriptor, la añade a la vista principal y asigna un objeto UIImage a dicha imagen:

UIView* screenCapture = [subscriber.view
    snapshotViewAfterScreenUpdates:YES];
[self.view addSubview:screenCapture];

UIGraphicsBeginImageContextWithOptions(subscriber.view.bounds.size,
    NO, [UIScreen mainScreen].scale);
[view drawViewHierarchyInRect:subscriber.view.bounds
    afterScreenUpdates:YES];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Para ver un ejemplo de cómo obtener una imagen en alta resolución de una editorial, consulta el ejemplo «Captura de Live Photo» en el Repositorio de ejemplos de OpenTok para iOS. Este ejemplo también se encuentra en el directorio «samples» del SDK de OpenTok para iOS.

Ajuste de la interfaz de usuario en función de los niveles de audio

El [OTPublisherKitAudioLevelDelegate publisher:audioLevelUpdated:] y [OTSubscriberKitAudioLevelDelegate subscriber:audioLevelUpdated:] Los mensajes se envían a intervalos regulares con el nivel de audio del suscriptor y del emisor. Puedes utilizar el audioLevel para actualizar la visualización en un medidor de nivel de audio.

Por ejemplo, consulta el ejemplo «Proyecto 6: Niveles de audio» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

Nota: El nivel de audio de un emisor no está disponible hasta que su transmisión se publique en una sesión. Para obtener una vista previa del audio antes de que el emisor comience a transmitir a la sesión, utiliza un controlador de audio personalizado.

Por defecto, por razones de privacidad, cuando todos los editores están silenciados se detiene la captura de audio y se libera el micrófono. Esto significa que no habrá más actualizaciones del nivel de audio hasta que una instancia del editor vuelva a habilitar el audio. A partir de la versión 2.31.0 el editor se habilita con una propiedad para permitir que la captura de audio continúe mientras está silenciado.

Al crear una nueva instancia de «publisher», el desarrollador puede activar este comportamiento:


	OTPublisherKitSettings* settings = [[OTPublisherKitSettings alloc] init];
    settings.allowAudioCaptureWhileMuted = true;
	_publisher = [[OTPublisherKit alloc] initWithDelegate:self settings:settings];

Nota: Al activar este comportamiento, el micrófono se utilizará incluso cuando el editor esté silenciado.

Uso de un renderizador de vídeo personalizado

Las clases OTPublisher y OTSubscriber proporcionan una instancia predeterminada de UIView que muestra el vídeo del editor o del suscriptor. Puedes utilizar la API de transmisión de vídeo personalizada para definir un renderizador de vídeo personalizado, utilizando las clases OTPublisherKit, OTSubscriberKit y OTVideoRender. Para ver un ejemplo, consulta el ejemplo «Proyecto 2: Creemos un OTPublisher» en el directorio de ejemplos del SDK de OpenTok para iOS (o en la opentok-ios-sdk-samples repositorio en GitHub).

También puede configurar un editor para que utilice un capturador de vídeo personalizado.