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

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:

let publisherSettings = OTPublisherSettings()
publisherSettings.name = "Juan"
let publisher = OTPublisher(delegate: 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 false para silenciar o editor:

publisher.publishAudio = false

Defina o publishAudio propriedade para true para publicar áudio.

publisher.publishAudio = true

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 false para silenciar o assinante

subscriber.subscribeToAudio = false

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

subscriber.subscribeToAudio = true

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 = .back

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:

func subscriberVideoDisabled(_ subscriber: OTSubscriberKit, reason: OTSubscriberVideoEventReason) {
    // 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:

func subscriberVideoEnabled(_ subscriber: OTSubscriberKit, reason: OTSubscriberVideoEventReason) {
    // 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 instanciar um objeto PublisherKit, você ativa ou desativa o recurso de fallback de áudio para editores e assinantes. O recurso de fallback de áudio desativa o vídeo (em editores e assinantes) quando as condições da rede ou da CPU não permitem a exibição de vídeo. Consulte Solução alternativa para áudio (iOS Swift).

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:

func session(_ session: OTSession, archiveStartedWithId archiveId: String, name: String?) {
    // Display the archive indicator
}

func session(_ session: OTSession, archiveStoppedWithId archiveId: String) {
    // 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:

if let publisherView = publisher.view,
	 let screenCapture = publisherView.snapshotView(afterScreenUpdates: true) {
	self.view.addSubview(screenCapture)
	UIGraphicsBeginImageContextWithOptions(publisherView.bounds.size, false, UIScreen.main.scale)
	view.drawHierarchy(in: publisherView.bounds, afterScreenUpdates: true)
	let 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:

if let subscriberView = subscriber?.view,
	 let screenCapture = subscriberView.snapshotView(afterScreenUpdates: true) {
	self.view.addSubview(screenCapture)
	UIGraphicsBeginImageContextWithOptions(subscriberView.bounds.size, false, UIScreen.main.scale)
	view.drawHierarchy(in: subscriberView.bounds, afterScreenUpdates: true)
	let 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:


	let settings = OTPublisherSettings()
	settings.allowAudioCaptureWhileMuted = true;
	publisher =  OTPublisher(delegate: 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.