Comunicação em tempo real com WebRTC e PHP

Eu sou Michael Douglas Barbosa AraujoCriador da Laravel PagSeguro, um dos responsáveis pela Laravel Conference Brasil e Full Stack Developer na Atitude.

▷ http://www.facebook.com.br/groups/silexbrasil▷ http://www.facebook.com.br/groups/laravelsp▷ http://www.facebook.com.br/groups/phingbrasil▷ http://www.facebook.com.br/groups/sonicpibrasil▷ http://www.facebook.com.br/groups/doctrinebrasil

Criador e mantenedor:

https://github.com/michaeldouglas

https://twitter.com/mdba_araujo

https://facebook.com/mdba.araujo

Livro: Zend Certified Engineer - Descomplicando a certificação PHP.

Ao final da palestra 2 pessoas serão sorteadas !

Laravel PagSeguro:

https://github.com/michaeldouglas/laravel-pagseguro - Atualmente entrando como pacote oficial Pagseguro e Laravel.

E concluindo juntamente com o Matheus Marabesi o livro de Laravel pela Novatec!

1.Aplicação em tempo

Real ?

“Geralmente você assim como eu criamos nossas

páginas com base no conhecido paradigma de solicitação e resposta do HTTP.

O cliente carrega nossa página, em seguida, nada acontece até que o usuário clique na próxima página ?

Ajax !

▷ Por volta de 2005, Ajax começou a deixar a web mais dinâmica!

▷ Mesmo assim, ainda não tínhamos o poder de criar aplicações real-time efetivamente !

▷ Porém veja existiam mesmo na época outras soluções. Todo mundo aqui conhece o placar uol ?- Quais soluções possuímos ?

Apache PoolingSolução que fica a todo momento perguntando, se já existe uma nova atualização ?

Nginx HTTP_PUSH_MODULE

Utiliza uma solução um pouco melhor de pooling que é o Long Pooling é o cliente que fica perguntando e o server não responde a não ser que tenha a resposta!

Legal tudo isso !

Mas então qual é a solução para essa questão dos dados estarem em real-time para mais de um local de conexão ?

WebSockets !

WebSocket, é uma tecnologia que permite comunicação bidirecional por canais full-duplex sobre um único soquete TCP !

Soluções que você pode utilizar ?

2.Por que utilizar o

Pusher ?

Pusher !

Pusher é muito simples de utilizar basta você criar sua conta no Pusher.

Em seguida basta você consumir a API do Pusher que já adiciona funcionalidade de escala em tempo real para aplicações Web e Mobile !

Vamos a um exemplo de criação de APP Pusher!

3.Por que utilizar o

Socket.IO ?

11,707Quantidade de repositórios GitHub que utilizam Socket.IO!

“Socket.io diferente do seu primo Pusher não é pago

porém toda a gestão do Servidor de Socket é seu, por exemplo, na Amazon é mais interessante você utilizar o novo Load Balancer para o Socket.IO pois já possui

suporte a WebSockets e HTTP2!

Show MeThe Code - Chat com Socket !

Legal tudo isso !

Mas e o PHP ? - Repare que ao entrar no chat minhas mensagens não são persistidas, não existe lógica de login e entre outros pontos. E nesse momento, que entra nosso Back-end com PHP!

“Mas a palestra não é sobre WebRTC ?

Sim, porém saiba que em WebRTC a sigla RTC no final das contas nada mais é que: Real-time

communication !

“Então saiba que ao trabalhar com aplicações de

comunicação em tempo real todas as ações da sua aplicação precisam ser executadas em tempo real !

2.Então o que é

WebRTC ?

Basicamente WebRTC é uma fusão de 2 (duas) tecnologias: Voip e Web em nosso caso apenas com um adendo que é simples criar uma comunicação real-time entre dois navegadores via APIs em Javascript.

Você já deve ter utilizado sem nem saber a tecnologia WebRTC, por exemplo, quando utiliza vídeo com chat no Facebook e quando utiliza o Google Hangout!

Com essa tecnologia não existe a necessidade de você ter em sua empresa um especialista em telefonia e\ou Voip.

Não existe a necessidade de instalação de nada só o que você precisa é o Browser do seu cliente com suporte a WebRTC.

O melhor de tudo na tecnologia WebRTC é o fato de ser: Open Source.

O que podemos fazer ?

Com o WebRTC podemos além de trabalhar com vídeo e áudio, enviar dados, criar jogos, compartilhamento de tela, transferência de arquivos, reconhecimento de voz, projetos de conferência e entre outros!

▷ Translator▷ Simple Conferencing▷ File Sharing

“Aplicações que utilizam a tecnologia WebRTC:

2.Compatibilidade do

WebRTC ?

A compatibilidade com o Browser surgiu em meados de 2011 após a compra da empresa Gips (Global IP Solutions) pela Google.

Google e Mozilla fecharam uma parceria para o desenvolvimento do motor de WebRTC tanto para o Firefox quanto para o Chrome, atualmente são os navegadores que melhor comportam a tecnologia WebRTC.

Nessa mesma onda veio o Opera que também já comporta bem o WebRTC.

“Vilões do WebRTC!

Safari - Incompatível - A apple se diz interessada e acham interessante a tecnologia. Por que não ser compatível ? - Sinceramente eu não sei!

IE (Internet Explorer) - Incompativel - Dispensa explicações!

Edge - Parcialmente compatível - Suporta getUserMedia(). Ou como sempre a Microsoft gosta de fazer sua próprias implementações você pode utilizar: Ortc.

A compatibilidade no mundo Mobile é possível se você estiver utilizando Android versão superior a 4.4.4.

Porém já no mundo IOS sofremos com falta de compatibilidade do WebRTC - Infelizmente!

Já no mundo IOT com Raspberry Pi você já pode montar seus sistemas com WebRTC sem nenhum problema !

Para saber verificar se o seu navevador suporta bem a tecnologia WebRTC utilize o seguinte teste:

https://test.webrtc.org

2.Arquitetura do

WebRTC ?

Arquitetura do motor WebRTC:

A arquitetura do WebRTC pode variar um pouco para cada Browser porém a chamada a API não.

A tecnologia do motor WebRTC basicamente consiste de permitir que você utilize: Pear connection, voz e video e entre outros.

Devemos então focar nos três principais pilares da API do motor WebRTC que são:▷ GetUserMedia() ▷ PeerConnection() ▷ DataChannel()

“GetUserMedia()

Capturar vídeo e áudio por muitos anos foi tarefas únicas de plug-ins de navegadores que no caso eram: (Flash ou Silverlight).

Graças a API GetUserMedia() podemos facilmente com HTML5 obter a câmera e o audio do usuário e trabalhar da maneira que você achar mais conveniente.

Vejamos um exemplo de utilização da API GetUserMedia().

http://localhost/phpconference/webrtcAPIS/userMedia

“PeerConnection()

Após a captura do vídeo e áudio é importante conseguir ligar um ponto de conexão a outro, ou seja, que as pessoas estejam na mesma “sala”.

Antigamente no mundo da telecomunicação isso era feito pela telefonista, em nosso mundo de telecomunicação em real time a telefonista chama-se: Servidores de Stun utilizados para encontrar pontos ICE.

Lista de servidores STUN públicos: code.google.com.

Vejamos um exemplo: https://appr.tc

“DataChannel()

Após possuirmos uma comunicação entre os usuários via PeerConnection(), ou seja, temos um conexão ponta a ponta com o usuário podemos então enviar para ele além do vídeo e áudio dados de texto via DataChannel().

Para que seja possível enviar os dados lembre-se de que você precisa estar conectado com a API do PeerConnection() em um servidor de sinal.

Vejamos um exemplo: https://webrtc-chat-demo.herokuapp.com

2.O que é

Opentok?

OpenTok, é uma plataforma global na nuvem para integrar vídeo ao vivo, voz, mensagens e experiências de tela compartilhadas em páginas web e aplicativos móveis!

A plataforma é dimensionável e personalizável, permite que você consiga desenvolver todo tipo de comunicações de vídeo, desde um chat entre duas pessoas ou mais.

O melhor de tudo você pode iniciar sua empresa de telecomunicações chamando uma API!

OpenTok Preço

Vejamos um exemplo!

O WMDirect é uma plataforma de conversa online sem instalação de plugins que utiliza a API do TokBox para criação de seus eventos!

SDK OpenTok:

▷ Para iniciar o desenvolvimento

com OpenTok você precisa baixar

a biblioteca via Composer da SDK

da seguinte maneira:

○ $ ./composer.phar require

opentok/opentok 2.3.x

▷ Lembre-se você precisa ter uma

conta para poder obter sua:

APIKey e APISecret

SDK OpenTok Session:

▷ O que precisamos agora é

configurar um sessão de acesso a

sala onde irá ocorrer o nosso

evento, ou seja, funciona como

login da sala onde a reunião

efetivamente será feita.

SDK OpenTok Token:

▷ Precisamos gerar um Token por

usuário sendo assim cada usuário

manter um token de acesso para a

sessão de sala que foi criada.

▷ Basicamente imagine que a sessão

do TokBOX é central telefonica da

sala e que os tokens são os

telefones que se ligam a essa

sessão de reunião!

Show MeThe Code - OpenTok SDK PHP!

Obrigado!Perguntas?

Meus contatos novamente:

@mdba_araujo

michaeldouglas010790@gmail.com