O X do Xamarin Forms — Videoconferência com Opentok

Image for post
Image for post

Fala galera,

tudo beleza?

Quem aqui ja precisou fazer um app de comunicação? Você esta falando de chat? Não só chat, mas utilizando a câmera e conversando por voz.

Existem diversas soluções que podemos utilizar, mas existe um serviço muito legal que utilizamos hoje na NESS e que pode ser extendido para Xamarin.Forms : A Plataforma OpenTok da tokbox!!

Image for post
Image for post

O Opentok utiliza o WebRTC :

WebRTC vem de Real Time Communications (RTC) e é um projeto OpenSource com alguns anos de existência (nasceu em maio de 2011). Seu objetivo é levar comunicações em tempo real para navegadores e aplicativos para dispositivos móveis. As comunicações em tempo real suportadas hoje são voz, texto e vídeo.
Já é uma tecnologia sólida e bem estabelecida, bastando dizer que é utilizada por ninguém menos que WhatsApp e Facebook Messenger.

Fonte : https://www.totalvoice.com.br/blog/introducao-ao-webrtc/

No caso o Opentok utiliza o WebRTC e o implementa, adicionando diversas funcionalidades simplificando a nossa utilização do mesmo.

Certo, mas tem suporte a Xamarin.Forms ? Então hoje a Opentok suporte as seguintes plataformas :

Image for post
Image for post

Ou seja nativamente não tem suporte a Xamarin.Forms… Porem, graças ao meu amigo Andrei Misiukevich agora é possível !! Graças ao Controle OpenTok-Xamarin.Forms ! E Hoje Vamos ver como utiliza-lo!

Configurando o Serviço

Antes de mais nada você vai precisar fazer um cadastro na tokbox . Este serviço é pago ( mas eu recomendo, é muito, mas muito bom!!!) , mas existe uma versão trial para você verificar como funciona

Image for post
Image for post

Com a conta criada basta criar um novo projeto :

Em seguida definir que quer utilizar uma API e adicionar um nome :

Image for post
Image for post

Eu utilizo o VP8 devido a compatibilidade com a maioria dos projetos/dispositivos.

Image for post
Image for post

Pronto! Agora é só guardar a APIKey e o Secret que utilizaremos mais para a frente :)

A tokbox disponibiliza um tutorial completo de como criar projetos, utilizar as apis e gerar sessions. Você pode ver clicando aqui.

Apenas para demonstrar como funciona no Xamarin, no painel do seu projeto vamos criar uma sessionid na mão :

Image for post
Image for post

Sem seguida com o SessionID vamos criar o Token :

Image for post
Image for post

Pronto! Com essas 3 informações, podemos seguir :D .

Claro que essas configurações você pode fazer tudo via API, integrando em seus sites ou outros apps. Esse painel é apenas para testar o SDK.

Configurando o controle

Image for post
Image for post

Vamos ao nuget adicionar o pacote Xamarin.Forms.OpenTok em todos os seus projetos :

Image for post
Image for post

Agora devemos adicionar a linha PlatformOpenTokService.Init(); nas duas plataformas :

Image for post
Image for post
Image for post
Image for post

No Android precisamos de mais um passo, vamos adicionar o plugin Plugin.CurrentActivity no projeto :

Image for post
Image for post

E inicializar a linha CrossCurrentActivity.Current.Activity = this;

Image for post
Image for post
https://gist.github.com/TBertuzzi/014252ae303520bcf2e8ab3aff5798ef

Agora precisamos dar as permissões por plataforma.

iOS : No arquivo Info.plist precisamos adicionar as linhas :

https://gist.github.com/TBertuzzi/b833f7feddc23e5e0abc4668f55193ea

Android: No Arquivo AndroidManifest.xml adicionar as linhas :

https://gist.github.com/TBertuzzi/ff0ff61d54a1b989190e8abfe33d7e8a

Pronto! tudo configurado agora podemos utilizar ;) .

Utilizando o Controle

Vamos usar como o base o exemplo do Andrei.

No App.Xaml.cs vamos inicializar as configurações :

Image for post
Image for post
https://gist.github.com/TBertuzzi/e253549ca9940bedd80709d9476f149d

Vamos criar uma pagina simples de inicio para chamar a pagina que vai executar o controle.

Mas porque ? Simples, podemos tratar antes de iniciar o chat se as permissões e todos os requisitos estão corretos para execução , para isto basta utilizar o código :

https://gist.github.com/TBertuzzi/01c8ed901dc03dc0de43715bc98c78ac

Agora vamos implementar nossa tela do Chat :

Image for post
Image for post
https://gist.github.com/TBertuzzi/bd4d4263d91051087008d3645c958185

E no código as suas funcionalidades :

Image for post
Image for post
https://gist.github.com/TBertuzzi/7b511459b09bae0b91322425531bf74e

Como vocês podem ver, existem eventos que nos permitem tratar o recebimento/envio de mensagens, quando a o call acaba e etc. É um controle muito completo.

Agora vamos executar:

https://vimeo.com/359530756

O Controle esta em constante atualização e sempre tem features novas, e aqui entre nós fica ligado nele que eu to sabendo que novidades incríveis estão por vir :O .

Sobre o OpenTok, eu recomendo demais o serviço. Utilizamos em muitos projetos da NESS e ele funciona extremamente bem, tanto video, chat e tudo que ele oferece.

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store