Personalização da interface do usuário — iOS

Estas são as configurações que você pode fazer para personalizar a interface do usuário dos vídeos do OpenTok:

Adicionar um nome a um stream publicado

Para definir a propriedade “name” do fluxo publicado, defina o name propriedade do objeto OTPublisherSettings que você usa ao inicializar um Publisher:

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

A classe OTStream possui um name propriedade. Quando você inscrever-se em um canal, você pode exibir esse nome em um elemento da interface do usuário. (Além disso, esse nome é exibido quando o vídeo é exibido em uma página da web que utiliza a biblioteca OpenTok.js.)

Não utilize informações pessoais no campo “nome” do editor — o nome do editor pode ser exibido para outros participantes da sessão e também pode aparecer na Ferramenta de Inspeção e nos registros internos da Vonage; portanto, você nunca deve usar informações confidenciais ou pessoais não criptografadas no nome do editor. Veja as melhores práticas de segurança.

Adicionar um botão de silenciar para um editor

Não há nenhum elemento padrão na interface do usuário para silenciar o microfone do apresentador. No entanto, é possível adicionar um elemento, como um botão, que configure o publishAudio propriedade do objeto OTPublisher quando o usuário clica nele. Defina a publishAudio propriedade para NO para silenciar o editor:

publisher.publishAudio = NO;

Defina o publishAudio propriedade para YES para publicar áudio.

publisher.publishAudio = YES;

Como exemplo, consulte o exemplo “Projeto 4: Gráficos sobrepostos” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Adicionar um botão de silenciar para um assinante

Não há nenhum elemento padrão da interface do usuário para silenciar o áudio do assinante. No entanto, é possível adicionar um elemento, como um botão, que configure o subscribeToAudio do objeto OTSubscriber quando o usuário clicar nele. Defina o subscribeToAudio propriedade para NO para silenciar o assinante

subscriber.subscribeToAudio = NO;

Defina o subscribeToAudio propriedade para YES para se inscrever no áudio (se houver uma transmissão de áudio):

subscriber.subscribeToAudio = YES;

Como exemplo, consulte o exemplo “Projeto 4: Gráficos sobrepostos” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Adicionar um botão para ativar/desativar a câmera do editor

Não há nenhum elemento padrão da interface do usuário para alternar a câmera utilizada pelo editor. No entanto, é possível adicionar um elemento, como um botão, que defina a cameraPosition propriedade do objeto OTPublisher. Defina a propriedade com um valor definido na enumeração AVCaptureDevicePosition. Por exemplo, o código a seguir configura o publisher para usar a câmera traseira:

publisher.cameraPosition = AVCaptureDevicePositionBack;

Observe que o cameraPosition A propriedade não está disponível na classe OTPublisherKit. Se você estiver usando a classe OTPublisherKit para implementar um capturador de vídeo personalizado, você pode definir a câmera a ser usada no código personalizado de captura de vídeo.

Como exemplo, consulte o exemplo “Projeto 4: Gráficos sobrepostos” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Ajustar a interface do usuário quando o vídeo estiver ativado ou desativado

Quando o vídeo de um assinante é desativado, o [OTSubscriberKitDelegate subscriberVideoDisabled:reason:] A mensagem é enviada. Quando isso ocorre, você pode adicionar um elemento da interface do usuário (como um ícone) para indicar que o vídeo foi desativado:

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

Quando o vídeo de um assinante é reativado, o [OTSubscriberKitDelegate subscriberVideoEnabled:reason:] A mensagem é enviada. Quando isso ocorrer, você poderá remover um elemento da interface do usuário (como um ícone) que indique que o vídeo foi reativado:

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

Em sessões que utilizam o Roteador de mídia OpenTok (sessões com o modo de mídia definido como “roteado”), também é possível enviar as seguintes mensagens:

Você também pode querer exibir e remover uma notificação na interface do usuário (como um ícone) quando essas mensagens forem enviadas.

Como exemplo, consulte o exemplo “Projeto 4: Gráficos sobrepostos” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Observe que, ao publicar um stream, você ativa ou desativa o recurso de fallback de áudio para emissores e assinantes. O recurso de fallback de áudio desativa o vídeo (tanto nos emissores quanto nos assinantes) quando as condições da rede ou da CPU não permitem a exibição do vídeo. Consulte Opção alternativa de áudio (iOS).

Se você ativar o recurso de substituição de áudio do editor, o PublisherKitDelegate O objeto enviará as seguintes mensagens relacionadas a eventos de fallback de áudio do editor:

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

É possível exibir indicadores da interface do usuário em resposta a esses eventos.

Exibição de um elemento indicador quando uma sessão está sendo arquivada

Quando a gravação de uma sessão é iniciada (ou se você se conectar a uma sessão que está sendo gravada), o [OTSessionDelegate session:archiveStartedWithId:name:] a mensagem é enviada. Quando a gravação é interrompida, o [OTSessionDelegate session:archiveStoppedWithId:] A mensagem é enviada. É possível adicionar um elemento da interface do usuário, como um ícone exibido em uma visualização do OTPublisher, para indicar que um vídeo está sendo gravado:

- (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
}

Como exemplo, consulte o exemplo “Projeto 5: Chamada com vários participantes” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Capturar um quadro de um vídeo

O código a seguir captura e exibe uma imagem estática do vídeo do Publisher, adiciona-a à visualização principal e define um objeto UIImage para a imagem:

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();

O código a seguir captura e exibe uma imagem estática do vídeo do assinante, adiciona-a à visualização principal e define um objeto UIImage para a imagem:

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 um exemplo de como obter uma imagem em alta resolução de uma editora, consulte o exemplo “Live Photo Capture” no Repositório de exemplos do OpenTok para iOS. Esse exemplo também está no diretório de exemplos do SDK do OpenTok para iOS.

Ajuste da interface do usuário com base nos níveis de áudio

O [OTPublisherKitAudioLevelDelegate publisher:audioLevelUpdated:] e [OTSubscriberKitAudioLevelDelegate subscriber:audioLevelUpdated:] As mensagens são enviadas em intervalos regulares com o nível de áudio do assinante e do emissor. Você pode usar o audioLevel valor para atualizar a exibição em um medidor de nível de áudio.

Como exemplo, consulte o exemplo “Projeto 6: Níveis de áudio” no diretório de exemplos do SDK do OpenTok para iOS (ou no exemplos-do-opentok-ios-sdk repositório no GitHub).

Observação: O nível de áudio de um emissor não fica disponível até que seu fluxo seja publicado em uma sessão. Para obter uma prévia do áudio antes que o emissor comece a transmitir para a sessão, use um driver de áudio personalizado.

Por padrão, por motivos de privacidade, quando todos os editores estão silenciados, a captura de áudio é interrompida e o microfone é liberado. Isso significa que não haverá mais atualizações no nível de áudio até que uma instância do editor reative o áudio. A partir da versão 2.31.0, o editor conta com uma propriedade que permite que a captura de áudio continue mesmo quando silenciado.

Ao instanciar uma nova instância do publisher, o desenvolvedor pode ativar esse comportamento:


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

Observação: Ao ativar esse recurso, o microfone será utilizado mesmo quando o emissor estiver silenciado.

Utilizando um renderizador de vídeo personalizado

As classes OTPublisher e OTSubscriber fornecem uma instância padrão da UIView que exibe o vídeo do editor ou do assinante. Você pode usar a API de fluxo de vídeo personalizado para definir um renderizador de vídeo personalizado, utilizando as classes OTPublisherKit, OTSubscriberKit e OTVideoRender. Para ver um exemplo, consulte o exemplo “Projeto 2: Vamos criar o OTPublisher” no diretório de exemplos do SDK do OpenTok para iOS (ou em exemplos-do-opentok-ios-sdk repositório no GitHub).

Você também pode configurar um editor para usar um capturador de vídeo personalizado.