Personalização geral
Existem várias configurações que você pode fazer para personalizar a interface do usuário do Vonage Video:
Adicionar um nome a um stream publicado
Ao criar um Publisher, você pode (opcionalmente) especificar um nome a ser exibido no vídeo:
// Replace the first parameter with the target element ID:
var publisher = OT.initPublisher("myPublisher",
{name: "John"})
session.publish(publisher);
Você pode usar esse nome para identificar o cliente.
Observe que você também pode adicionar metadados sobre o cliente ao criar um token. Esse nome não é exibido automaticamente no vídeo. No entanto, ao adicionar esses dados durante a criação do token, você pode inserir informações de forma mais segura (já que os tokens são criados no servidor, e não no cliente). Para obter mais informações, consulte Criação de tokens.
Os clientes podem optar por ocultar o nome na visualização do Editor ou do Assinante. Consulte esta seção
Você pode especificar o nome da editora chamando a função name() método do objeto Publisher.Builder quando você instanciar o objeto Publisher:
mPublisher = new Publisher.Builder(context)
.name("Bob's video")
.build();
Você pode usar esse nome para identificar o cliente que está publicando o fluxo. A classe Stream possui um name propriedade. Quando você inscrever-se em um canal, você pode exibir esse nome em um elemento da interface do usuário.
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 Inspetora e nos registros internos da Vonage; portanto, você nunca deve usar informações confidenciais ou pessoais não criptografadas no nome do editor. Consulte melhores práticas de segurança.
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.)
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.)
Você pode especificar o nome da editora chamando a função name() método do objeto Publisher.Builder quando você instanciar o objeto Publisher:
publisher = new Publisher(Context.Instance,
renderer: publisherVideoRenderer,
name: "Bob's video",
capturer: capturer);
Você pode usar esse nome para identificar o cliente que está publicando o fluxo. A classe Stream possui um Name propriedade. Quando você inscrever-se em um canal, você pode exibir esse nome em um elemento da interface do usuário.
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 Inspetora e nos registros internos da Vonage; portanto, você nunca deve usar informações confidenciais ou pessoais não criptografadas no nome do editor. Consulte melhores práticas de segurança.
Adicionar um botão de silenciar para um editor
Por padrão, a interface do usuário de um Emissor ou de um Assinante inclui um botão para silenciar o áudio. No caso de um Emissor, o usuário pode clicar nesse botão para ativar ou desativar o microfone.
Ao publicar uma transmissão, você pode especificar se o botão de silenciar será exibido passando um style.buttonDisplayMode propriedade na OT.initPublisher() método:
const publisher = OT.initPublisher(
'publisher-element-id', // Replace with the replacement element ID
{
name: 'John',
style: {buttonDisplayMode: 'on'}
}
);
session.publish(publisher);
O style.buttonDisplayMode essa propriedade pode ser definida como um dos três valores:
- "auto" — O botão de silenciar é exibido quando a transmissão é exibida pela primeira vez e quando o usuário passa o mouse sobre o vídeo (configuração padrão).
- "desligado" — O botão de mudo não é exibido.
- "ligado" — O botão de mudo é exibido.
Depois de criar o Publisher, você pode alterar o modo de exibição do botão de mudo, chamando a função setStyle() método do objeto Publisher. Consulte a documentação sobre Publisher.setStyle().
Não há nenhum elemento padrão da interface do usuário para silenciar o microfone do apresentador. No entanto, é possível adicionar um elemento, como um botão, que acione o setPublishAudio() método do objeto PublisherKit quando o usuário clica nele. Passe false para silenciar o editor:
mPublisher.setPublishAudio(false);
Passe para true para publicar áudio.
mPublisher.setPublishAudio(true);
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
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;
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 do objeto Publisher quando o usuário clicar nele. Defina a propriedade como false para silenciar o editor:
publisher.PublishAudio = false;
Defina a propriedade como true para publicar áudio.
publisher.PublishAudio = true;
Adicionar um botão de silenciar para um assinante
Por padrão, a interface do usuário de um Emissor ou de um Assinante inclui um botão para silenciar o áudio. No caso de um Assinante, o usuário pode clicar nesse botão para ativar ou desativar o som.
Ao se inscrever em um stream, você pode especificar se o alto-falante silenciado será exibido passando um style.buttonDisplayMode propriedade na Session.subscribe() método:
const subscriber = session.subscribe(stream,
'subscriber-element-id', // Replace with the replacement element ID
{
style: {buttonDisplayMode: 'on'}
}
);
O style.buttonDisplayMode essa propriedade pode ser definida como um dos três valores:
- "auto" — O botão de silenciar é exibido quando a transmissão é exibida pela primeira vez e quando o usuário passa o mouse sobre o vídeo (configuração padrão).
- "desligado" — O botão de mudo não é exibido.
- "ligado" — O botão de mudo é exibido.
Depois de criar o Assinante, você pode alterar o modo de exibição do botão de silenciar, chamando a função setStyle() método do objeto Subscriber. Consulte a documentação sobre Subscriber.setStyle().
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 chame a função setSubscribeToAudio() método do objeto SubscriberKit quando o usuário clica nele. Passe false para silenciar o assinante
mSubscriber.setSubscribeToAudio(false);
Passe para true para se inscrever no áudio (se houver uma transmissão de áudio):
mSubscriber.setSubscribeToAudio(true);
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
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;
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 Subscriber quando o usuário clicar nele. Defina a propriedade como false para silenciar o áudio:
subscriber.SubscribeToAudio = false;
Defina a propriedade como true para ativar a reprodução de áudio (se o stream tiver áudio):
subscriber.SubscribeToAudio = true;
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 chame a swapCamera método do objeto Publisher:
mPublisher.swapCamera();
Observe que o cameraPosition A propriedade não está disponível na classe PublisherKit. Se você estiver usando a classe PublisherKit 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.
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.
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.
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 VideoCapturer propriedade do objeto Publisher:
publisher.VideoCapturer = newCapturer;
Para obter mais informações, consulte Utilizando um capturador de vídeo personalizado.
Ajustar a interface do usuário quando o vídeo estiver ativado ou desativado
Um assinante que recebe uma objeção dispara os seguintes eventos relacionados à ativação ou desativação do vídeo na transmissão do assinante:
videoEnabled— Enviado quando o vídeo é ativado após ter sido desativado anteriormente.videoDisabled— É disparado quando o vídeo é desativado. A propriedade “reason” do objeto de evento indica o motivo pelo qual o vídeo foi desativado. (Esse objeto de evento é um Evento de alteração da ativação de vídeo objeto.)videoDisableWarning— Enviada quando o Media Router determina que a qualidade da transmissão se deteriorou e que o vídeo será desativado caso a qualidade se deteriore ainda mais. Se a qualidade se deteriorar ainda mais, o Assinante desativa o vídeo e envia umavideoDisabledevento.videoDisableWarningLifted— O vídeo foi ativado depois de ter sido desativado anteriormente.
O videoDisableWarning e videoDisableWarningLifted os eventos só estão disponíveis em sessões que utilizam o Roteador de mídia (sessões com o modo de mídia configurado como “roteado”).
Por padrão, o Assinante exibe um indicador de aviso de vídeo desativado e um indicador de vídeo desativado quando o videoDisableWarning e videoDisableWarningLifted os eventos são acionados. É possível desativar a exibição padrão do indicador configurando o videoDisabledDisplayMode configuração de estilo do objeto Subscriber.
O exemplo a seguir utiliza o videoDisabledDisplayMode configuração de estilo para que o indicador de aviso de vídeo desativado e o indicador de vídeo desativado pisquem a cada segundo quando o videoDisableWarning e videoDisableWarningLifted os eventos são acionados:
var indicatorBlinker = new IndicatorBlinker(subscriber);
var IndicatorBlinker = function(subscriber) {
var timer;
var indicatorOn = false;
subscriber.on({
videoDisabled: function(event) {
start();
},
videoDisableWarning: function(event) {
start();
},
videoDisableWarningLifted: function(event) {
stop();
},
videoEnabled: function(event) {
stop();
}
});
var start = function() {
subscriber.setStyle('videoDisabledDisplayMode', 'on');
if (timer) {
clearInterval(timer);
}
timer = setInterval(function() {
if (indicatorOn) {
subscriber.setStyle('videoDisabledDisplayMode', 'off');
} else {
subscriber.setStyle('videoDisabledDisplayMode', 'on');
}
indicatorOn = !indicatorOn;
}, 1000);
indicatorOn = true;
};
var stop = function() {
if (timer) {
clearInterval(timer);
}
};
};
Você também pode definir o videoDisabledDisplayMode defina o estilo como “desativado” e adicione seus próprios elementos de interface de usuário com base no videoDisableWarning, videoDisabled, videoDisableWarningLifted, e videoEnabled eventos.
Quando o vídeo de um assinante é desativado, o SubscriberKit.VideoListener.onVideoDisabled(subscriber, reason) o método é chamado. Quando isso ocorre, você pode adicionar um elemento da interface do usuário (como um ícone) para indicar que o vídeo foi desativado:
@Override
public void onVideoDisabled(SubscriberKit subscriber, String reason) {
// Display the video disabled indicator
}
Quando o vídeo de um assinante é reativado, o SubscriberKit.VideoListener.onVideoEnabled(subscriber, reason) o método é chamado. Quando isso ocorre, você pode remover um elemento da interface do usuário (como um ícone) que indique que o vídeo foi reativado:
@Override
public void onVideoEnabled(SubscriberKit subscriber, String reason) {
// Display the video disabled indicator
}
Em sessões que utilizam o Roteador de mídia de vídeo da Vonage (sessões com o modo de mídia definido como “routed”), o SubscriberKit.VideoListener também pode chamar os seguintes métodos:
- onVideoDisableWarning(assinante) — O Vonage Video Media Router detectou que a qualidade da transmissão diminuiu e o vídeo será desativado caso a qualidade continue a piorar.
- onVideoDisableWarningLifted(assinante) — O Vonage Video Media Router constatou que a qualidade da transmissão melhorou a ponto de a desativação do vídeo não representar um risco imediato.
Você também pode querer exibir e remover uma notificação na interface do usuário (como um ícone) quando essas mensagens forem enviadas.
Observe que, ao publicar uma transmissão, você pode evitar que o vídeo seja desativado devido à qualidade da transmissão. Antes de publicar a transmissão (chamando a função Session.publish(publisher) (método), chame o setAudioFallbackEnabled(boolean enabled) método do objeto Publisher (ou do objeto PublisherKit) e passar false.
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 de vídeo da Vonage (sessões com o modo de mídia definido como “roteado”), também é possível enviar as seguintes mensagens:
- OTSubscriberKitDelegate subscriberVideoDisableWarning(_:) — O Vonage Video Media Router detectou que a qualidade da transmissão diminuiu e o vídeo será desativado caso a qualidade continue a piorar.
- OTSubscriberKitDelegate subscriberVideoDisableWarningLifted(_:)] — O Vonage Video Media Router constatou que a qualidade da transmissão melhorou a ponto de a desativação do vídeo não representar um risco imediato.
Você também pode querer exibir e remover uma notificação na interface do usuário (como um ícone) quando essas mensagens forem enviadas.
Observe que, ao publicar uma transmissão, você pode evitar que o vídeo seja desativado devido à qualidade da transmissão. Antes de publicar a transmissão (chamando a função OTSession publish(_:error:) (método), defina o audioFallbackEnabled propriedade do objeto Publisher (ou do objeto PublisherKit) para “false”.
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 de vídeo da Vonage (sessões com o modo de mídia definido como “roteado”), também é possível enviar as seguintes mensagens:
- [OTSubscriberKitDelegate subscriberVideoDisableWarning:] — O Vonage Video Media Router detectou que a qualidade da transmissão diminuiu e o vídeo será desativado caso a qualidade continue a piorar.
- [OTSubscriberKitDelegate subscriberVideoDisableWarningLifted:] — O Vonage Video Media Router constatou que a qualidade da transmissão melhorou a ponto de a desativação do vídeo não representar um risco imediato.
Você também pode querer exibir e remover uma notificação na interface do usuário (como um ícone) quando essas mensagens forem enviadas.
Observe que, ao publicar uma transmissão, você pode evitar que o vídeo seja desativado devido à qualidade da transmissão. Antes de publicar a transmissão (chamando a função [OTSession publish:error] (método), defina o audioFallbackEnabled propriedade do objeto Publisher (ou do objeto PublisherKit) para NO.
Quando o vídeo de um assinante é desativado, o objeto Assinante envia um VideoDisabled evento. Quando isso ocorre, é possível adicionar um elemento da interface do usuário (como um ícone) para indicar que o vídeo foi desativado:
subscriber.VideoDisabled += Subscriber_VideoDisabled;
private void Subscriber_VideoDisabled(object sender, EventArgs e) {
// Display the video disabled indicator
}
Quando o vídeo de um assinante é reativado, o objeto Assinante envia um VideoEnabled evento. Quando isso ocorrer, você poderá remover um elemento da interface do usuário (como um ícone) que indique que o vídeo foi reativado:
subscriber.VideoEnabled += Subscriber_VideoEnabled;
private void Subscriber_VideoEnabled(object sender, EventArgs e) {
// Display the video disabled indicator
}
Em sessões que utilizam o Roteador de mídia de vídeo da Vonage (sessões com o modo de mídia definido como “roteado”), o Subscribe também pode enviar os seguintes eventos:
VideoDisableWarning— O Vonage Video Media Router detectou que a qualidade da transmissão diminuiu e o vídeo será desativado caso a qualidade continue a piorar.VideoDisableWarningLifted— O Vonage Video Media Router constatou que a qualidade da transmissão melhorou a ponto de a desativação do vídeo não representar um risco imediato.
Você também pode querer exibir e remover uma notificação da interface do usuário (como um ícone) quando esses eventos forem enviados.
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 Session.ArchiveListener.onArchiveStarted(session, name) método é chamado. Quando a gravação é interrompida, o Session.ArchiveListener.onArchiveStopped(session, name) o método é chamado. Você pode adicionar um elemento de interface do usuário, como um ícone exibido na visualização do editor, para indicar que um vídeo está sendo gravado:
@Override
public void onArchiveStarted(Session session, String id, String name) {
// Display the archive indicator
}
@Override
public void onArchiveStopped(Session session, String id, String name) {
// Hide the archive indicator
}
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
}
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
}
Quando a gravação de um arquivo de uma sessão é iniciada (ou se você se conectar a uma sessão que está sendo gravada), o objeto Session envia um ArchiveStarted evento. Quando a gravação é interrompida, o objeto Session envia um ArchiveStopped evento. É possível adicionar um elemento da interface do usuário, como um ícone exibido na visualização do editor, para indicar que um vídeo está sendo gravado:
session.ArchiveStarted += Session_ArchiveStarted;
session.ArchiveStopped += Session_ArchiveStopped;
private void Session_ArchiveStarted(object sender, EventArgs e) {
// Display the archive indicator
}
private void Session_ArchiveStopped(object sender, EventArgs e) {
// Hide the archive indicator
}
Ajuste da interface do usuário com base nos níveis de áudio
Despacho dos objetos Publisher e Subscriber audioLevelUpdated eventos que ocorrem periodicamente para informar o nível de áudio. Você pode usar esses eventos para exibir um indicador de nível de áudio. Também é possível usar esses eventos para detectar alto-falantes ativos em uma sessão.
O exemplo a seguir ajusta o valor de um elemento de medidor que exibe o volume de um assinante. O código define o audioLevelDisplayMode estilo para 'off', o que desativa o medidor de nível de áudio padrão exibido no Subscriber. Observe que o nível de áudio é ajustado logaritmicamente e que é aplicada uma média móvel:
subscriber.setStyle('audioLevelDisplayMode', 'off');
var movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
if (movingAvg === null || movingAvg <= event.audioLevel) {
movingAvg = event.audioLevel;
} else {
movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
}
// 1.5 scaling to map the -30 - 0 dBm range to [0,1]
var logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
logLevel = Math.min(Math.max(logLevel, 0), 1);
document.getElementById('subscriberMeter').value = logLevel;
});
O exemplo pressupõe que existe um elemento HTML `meter` com o ID “subscriberMeter”.
Observe que, no modo somente áudio, um elemento DOM do tipo Publisher ou Subscriber exibe um indicador de volume por padrão (no canto superior direito do elemento). É possível desativar esse elemento padrão da interface do usuário e exibir seu próprio medidor de volume. Consulte o próximo tópico, Ajustar a interface do usuário quando o vídeo estiver ativado ou desativado.
Você também pode usar o audioLevelUpdated evento para determinar quando o áudio de um emissor ou receptor está alto o suficiente por tempo suficiente para considerar que o participante começou a falar. Ou, se o áudio estiver baixo por tempo suficiente, é possível identificar que o participante parou de falar:
var subscriber = session.subscribe(event.stream);
SpeakerDetection(subscriber, function() {
console.log('started talking');
}, function() {
console.log('stopped talking');
});
var SpeakerDetection = function(subscriber, startTalking, stopTalking) {
var activity = null;
subscriber.on('audioLevelUpdated', function(event) {
var now = Date.now();
if (event.audioLevel > 0.2) {
if (!activity) {
activity = {timestamp: now, talking: false};
} else if (activity.talking) {
activity.timestamp = now;
} else if (now- activity.timestamp > 1000) {
// detected audio activity for more than 1s
// for the first time.
activity.talking = true;
if (typeof(startTalking) === 'function') {
startTalking();
}
}
} else if (activity && now - activity.timestamp > 3000) {
// detected low audio activity for more than 3s
if (activity.talking) {
if (typeof(stopTalking) === 'function') {
stopTalking();
}
}
activity = null;
}
});
};
(Em vez de registrar mensagens no console, seu aplicativo poderia ajustar um elemento da interface do usuário quando o usuário começar e parar de falar.)
O SubscriberKit.AudioLevelListener.onAudioLevelUpdated(subscriber, audioLevel) e PublisherKit.AudioLevelListener.onAudioLevelUpdated(publisher, audioLevel) 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:
@Override
public void onAudioLevelUpdated(
SubscriberKit subscriber, float audioLevel) {
// Adjust an audio meter UI element based on the audioLevel value.
}
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:
mPublisher = new Publisher.Builder(this).name(mUsername).allowAudioCaptureWhileMuted(true).build();
Observação: Ao ativar esse recurso, o microfone será utilizado mesmo quando o emissor estiver silenciado.
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.
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.
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.
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.
O Subscriber.AudioLevel e Publisher.AudioLevel Os eventos são enviados em intervalos regulares com o nível de áudio do assinante e do emissor. Você pode usar o AudioLevel propriedade dos argumentos do evento para atualizar a exibição em um medidor de nível de áudio:
@Override
publisher.AudioLevel += Publisher_AudioLevel;
subscriber.AudioLevel += Subscriber_AudioLevel;
private void Publisher_AudioLevel(object sender, EventArgs e) {
// Display the audio level based on e.AudioLevel
}
private void Subscriber_AudioLevel(object sender, EventArgs e) {
// Display the audio level based on e.AudioLevel
}
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:
publisher = new Publisher.Builder(_context)
{
AllowAudioCaptureWhileMuted = true
}.Build();
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 `Subscriber` e `Publisher` implementam um renderizador de vídeo padrão que exibe o stream e fornece controles da interface do usuário para mostrar o nome do stream e silenciar o microfone ou a câmera. É possível usar as classes `SubscriberKit` e `PublisherKit` para implementar um renderizador de vídeo personalizado.
O SDK do Android inclui uma classe chamada BaseVideoRenderer. Sobrescreva essa classe para criar um renderizador de vídeo personalizado.
Após instanciar um objeto PublisherKit, você pode definir um renderizador de vídeo personalizado chamando o setRenderer() método do objeto PublisherKit:
mPublisher = new PublisherKit(MyClass.this, "publisher");
// Use a custom video renderer.
// MyVideoRenderer extends BaseVideoRenderer
mRenderer = new MyVideoRenderer();
mPublisher.setRenderer(new mRenderer);
A classe SubscriberKit também possui um setRenderer() método.
O onFrame() O método da classe BaseVideoRenderer é chamado quando um novo quadro fica disponível:
public void onFrame(Frame frame) {
// The new frame is available.
}
O frame é um objeto BaseVideoRenderer.Frame. Esse objeto inclui um getBuffer() que retorna o buffer de bytes contendo os dados do quadro de vídeo. Você pode usar esse buffer de bytes para adicionar a imagem do quadro de vídeo à visualização do editor.
Como exemplo, consulte a classe `OpenTokVideoRenderer` no aplicativo de exemplo `OpenTokHelloWorld`.
Você também pode configurar um editor para usar um capturador 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. É possível usar a Video API para definir um renderizador de vídeo personalizado, utilizando as classes OTPublisherKit, OTSubscriberKit e OTVideoRender.
Você também pode configurar um editor para usar um capturador 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. É possível usar a Video API para definir um renderizador de vídeo personalizado, utilizando as classes OTPublisherKit, OTSubscriberKit e OTVideoRender.
Você também pode configurar um editor para usar um capturador de vídeo personalizado.
Por padrão, os desenvolvedores utilizam um renderizador de vídeo padrão para o Windows Presentation Foundation, que é definido pelo SDK do Vonage Video para Windows.
Você também pode especificar um renderizador para o vídeo criando uma classe que implemente a interface IVideoRenderer. A interface inclui um RenderFrame(frame) método que é chamado quando um novo quadro de vídeo fica disponível. Na sua implementação desse método, use o objeto frame passado para o método para criar uma imagem a ser renderizada. Além disso, ao final da sua implementação desse método, certifique-se de chamar o Dispose() método do frame objeto, para evitar vazamentos de memória.
Ao instanciar um objeto Publisher ou Subscriber, é possível passar o objeto do renderizador de vídeo personalizado para o Publisher() ou Subscriber() construtor (como o renderer parâmetro).