O documento discute comunicação em tempo real usando WebRTC e PHP. Apresenta Michael Douglas Barbosa Araujo e suas atividades como desenvolvedor. Explica o que é aplicação em tempo real, WebSockets, Pusher e Socket.IO. Discute o que é WebRTC, sua compatibilidade e arquitetura. Por fim, explica o que é Opentok e mostra código de exemplo usando a SDK OpenTok em PHP.

1. Comunicação em
tempo real com
WebRTC e PHP

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

3. ▷ 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:

4. https://github.com/michaeldouglas
https://twitter.com/mdba_araujo
https://facebook.com/mdba.araujo

5. Livro: Zend Certified Engineer -
Descomplicando a certificação PHP.
Ao final da palestra 2 pessoas serão
sorteadas !

6. Laravel PagSeguro:
https://github.com/michaeldouglas/larav
el-pagseguro - Atualmente entrando
como pacote oficial Pagseguro e
Laravel.

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

8. 1.
Aplicação em tempo
Real ?

9. “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 ?

10. 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 ?

11. Apache Pooling
Solução que fica a todo momento perguntando,
se já existe uma nova atualização ?

12. 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!

13. 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 ?

14. WebSockets !
WebSocket, é uma tecnologia que
permite comunicação
bidirecional por canais full-duplex
sobre um único soquete TCP !
Soluções que você pode utilizar ?

15. 2.
Por que utilizar o
Pusher ?

16. 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!

19. 3.
Por que utilizar o
Socket.IO ?

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

21. “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!

23. Show Me
The Code - Chat com Socket !

24. 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!

25. “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 !

26. “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 !

27. 2.
Então o que é
WebRTC ?

28. 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!

29. Com essa tecnologia não existe a necessidade de
você ter em sua empresa um especialista em
telefonia eou 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.

30. 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

31. “Aplicações que utilizam a tecnologia WebRTC:

32. 2.
Compatibilidade do
WebRTC ?

33. 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.

34. “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.

35. 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 !

36. Para saber verificar se o seu navevador suporta
bem a tecnologia WebRTC utilize o seguinte teste:
https://test.webrtc.org

37. 2.
Arquitetura do
WebRTC ?

38. Arquitetura do motor WebRTC:

39. 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()

40. “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

41. “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

42. “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

43. 2.
O que é
Opentok?

44. 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!

45. OpenTok Preço

46. 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!

47. 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

48. 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.

49. 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!

50. Show Me
The Code - OpenTok SDK PHP!

51. Obrigado!
Perguntas?
Meus contatos novamente:
@mdba_araujo
michaeldouglas010790@gmail.com