Compartilhar:
){kind=small}
Sina é um ex-membro da equipe da Vonage. Ele atuou como Java Developer Advocate na Vonage. Com formação acadêmica, ele tem uma curiosidade geral por tudo o que se relaciona a carros, computadores, programação, tecnologia e natureza humana. Em seu tempo livre, ele gosta de caminhar ou jogar videogames competitivos.
Desfoque para maior clareza: proteja a privacidade dos participantes e estimule a atenção
Tempo de leitura: 5 minutos
As reuniões virtuais têm uma atmosfera diferente das reuniões presenciais. Uma das muitas razões para isso é a necessidade de um ambiente compartilhado. Como a localização de cada um (e, portanto, o que aparece no fundo) é diferente, isso pode distrair os participantes. Além disso, os participantes podem querer proteger sua privacidade durante as videochamadas sem precisar se deslocar, o que nem sempre é prático.
Uma solução é desfocar o fundo dos participantes para que o rosto deles fique em foco. Isso permite manter o ambiente natural ao redor deles, ao mesmo tempo em que reduz os detalhes para que não distraiam tanto. Outra solução é substituir o fundo por outra imagem, que pode ser aplicada a alguns ou a todos os participantes. A vantagem dessa abordagem é que é possível usar um cenário de fundo adequado, dependendo do tom e da natureza da reunião. Por exemplo, se uma videochamada for uma reunião entre pessoas de diferentes organizações, um logotipo ou um fundo padronizado pode ser aplicado aos representantes de cada organização para maior clareza.
Ambas as soluções podem ser facilmente aplicadas ao seu aplicativo de vídeo da Vonage com a adição de apenas algumas linhas de código. Este artigo irá orientá-lo sobre como aplicar esses filtros por meio de um guia passo a passo, utilizando um exemplo simples.
Serão necessárias credenciais para que o aplicativo de demonstração funcione. Faça login ou crie uma Vonage Video Account e, em seguida, clique em “Projetos” no menu à esquerda. Você pode selecionar um projeto personalizado anterior ou criar um novo. Navegue até o seu projeto — a página terá uma aparência semelhante a esta:
Anote a chave da API do projeto. Role a página para baixo até a seção “Ferramentas do projeto” (na parte inferior da página) e clique em “Criar ID de sessão”. Copie-a e cole-a na próxima seção para gerar um token. Para a função, selecione “Editor” e defina o prazo de validade para 24 horas (ou pelo tempo que você precisar da sessão). Você precisará da Chave de API do projeto, do ID da sessão e do token para este exercício.
Crie um diretório para trabalhar e acesse-o. Em seguida, crie os arquivos do aplicativo da seguinte maneira:
Agora que criamos nosso projeto, vamos adicionar um pouco de código ao nosso index.js arquivo. É claro que você deve definir os valores de apiKey, sessionIde token de forma adequada.
const apiKey = '';
const sessionId = '';
const token = '';
function handleError(error) {
if (error) {
alert(error.message);
}
}
const session = OT.initSession(apiKey, sessionId);
const subscriberOptions = {};
const publisherOptions = {
insertMode: 'append',
width: '100%',
height: '100%',
resolution: '1280x720'
};
const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
session.on({
streamCreated: event => session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError),
sessionConnected: event => session.publish(publisher)
});
session.connect(token, error => handleError(error));
No código acima, inicializamos a sessão e Publisher usando OT.initSession e OT.initPublisher métodos, respectivamente. Em seguida, definimos ouvintes de eventos no objeto de sessão para streamCreated e sessionConnected onde nos inscrevemos em um stream quando ele é criado e publicamos nosso stream quando estamos conectados à sessão. Após definir os ouvintes de eventos da sessão, tentamos nos conectar à sessão usando um token do OpenTok.
Carregue o index.js e index.css arquivos em index.html juntamente com o SDK do OpenTok.js:
<html>
<head>
<title>Vonage Video Background Filter demo</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
</head>
<body>
<div id="videos">
<div id="subscriber"></div>
<div id="publisher"></div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Adicione o seguinte ao seu index.css arquivo:
body, html {
background-color: gray;
height: 100%;
}
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 640px;
height: 480px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}Agora, se você abrir index.html em um navegador e permitir o acesso à sua webcam e ao microfone, você deverá ver a imagem da câmera. Verifique seu código e os valores do token, do ID de sessão e da chave de API caso isso não ocorra. Você pode obter mais informações sobre o problema no console de desenvolvedor do navegador (geralmente acessado pressionando F12).
Podemos adicionar filtros ao nosso Video usando a videoFilter opção. Isso pode ser aplicado durante ou após a inicialização do publisher. Normalmente, faz sentido fazer isso imediatamente. Observe que esse recurso não é compatível com todos os navegadores (especialmente os mais antigos). Não se preocupe — podemos aplicar filtros de forma condicional. Por exemplo, veja aqui como você pode desfocar o fundo adicionando um filtro ao publisherOptions objeto que criamos anteriormente:
// Add background blur, if supported
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundBlur',
blurStrength: 'low'
};
}Se a lógica do seu aplicativo exigir que o filtro seja aplicado posteriormente (por exemplo, em resposta a um evento), você pode fazer isso da seguinte maneira:
publisher.applyVideoFilter({
type: 'backgroundBlur',
blurStrength: 'high'
});Para remover o filtro mais tarde, você pode chamar publisher.clearVideoFilter(). Adicione o seguinte ao seu index.js arquivo para desativar o efeito após 8 segundos:
setTimeout(() => publisher.clearVideoFilter(), 8000);
Para alterar o plano de fundo, use a seguinte configuração para o videoFilter:
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundReplacement',
backgroundImgUrl: 'https://example.com/image.jpg'
};
}
Observe que não é possível usar a substituição de imagem e o desfoque de fundo ao mesmo tempo. Se você tiver problemas com a imagem de fundo que não está sendo aplicada, isso pode ser devido a CORS. Trata-se de um problema do servidor; portanto, tente usar uma imagem de outro site. Observe que a imagem precisa estar no formato BMP, PNG, JPEG ou GIF.
Agora que você tem um exemplo funcional, pode personalizar a aparência editando index.css se desejar e incorporar mais lógica ao seu aplicativo. Para um aplicativo de produção, você precisará automatizar a obtenção da sua chave de API, do token e do ID de sessão do servidor. Confira nossos tutoriais para saber mais.
Para obter mais informações sobre como usar o Publisher e os filtros de Video, consulte a referência da API para Publisher. Você pode encontrar os parâmetros de opções de publisher suportados no OT.initPublisher documentação documentação.
Você pode encontrar o exemplo de código completo usado nesta demonstração e testá-lo por conta própria no este aplicativo do Glitch. Depois, basta colar sua chave de API, seu token e seu ID de sessão para que tudo funcione!
Fique à vontade para entrar em contato conosco pelo nosso Slack da Comunidade ou Twitter se tiver alguma dúvida ou sugestão!
Compartilhar:
Sina é um ex-membro da equipe da Vonage. Ele atuou como Java Developer Advocate na Vonage. Com formação acadêmica, ele tem uma curiosidade geral por tudo o que se relaciona a carros, computadores, programação, tecnologia e natureza humana. Em seu tempo livre, ele gosta de caminhar ou jogar videogames competitivos.