Comunicação em tempo real com WebRTC e PHP
-
Upload
michael-douglas -
Category
Software
-
view
541 -
download
8
Transcript of Comunicação em tempo real com WebRTC e PHP
![Page 1: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/1.jpg)
Comunicação em tempo real com WebRTC e PHP
![Page 2: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/2.jpg)
Eu sou Michael Douglas Barbosa AraujoCriador da Laravel PagSeguro, um dos responsáveis pela Laravel Conference Brasil e Full Stack Developer na Atitude.
![Page 3: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/3.jpg)
▷ 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:
![Page 4: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/4.jpg)
https://github.com/michaeldouglas
https://twitter.com/mdba_araujo
https://facebook.com/mdba.araujo
![Page 5: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/5.jpg)
Livro: Zend Certified Engineer - Descomplicando a certificação PHP.
Ao final da palestra 2 pessoas serão sorteadas !
![Page 6: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/6.jpg)
Laravel PagSeguro:
https://github.com/michaeldouglas/laravel-pagseguro - Atualmente entrando como pacote oficial Pagseguro e Laravel.
![Page 7: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/7.jpg)
E concluindo juntamente com o Matheus Marabesi o livro de Laravel pela Novatec!
![Page 8: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/8.jpg)
1.Aplicação em tempo
Real ?
![Page 9: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/9.jpg)
“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 ?
![Page 10: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/10.jpg)
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 ?
![Page 11: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/11.jpg)
Apache PoolingSolução que fica a todo momento perguntando, se já existe uma nova atualização ?
![Page 12: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/12.jpg)
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!
![Page 13: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/13.jpg)
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 ?
![Page 14: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/14.jpg)
WebSockets !
WebSocket, é uma tecnologia que permite comunicação bidirecional por canais full-duplex sobre um único soquete TCP !
Soluções que você pode utilizar ?
![Page 15: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/15.jpg)
2.Por que utilizar o
Pusher ?
![Page 16: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/16.jpg)
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!
![Page 17: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/17.jpg)
![Page 18: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/18.jpg)
![Page 19: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/19.jpg)
3.Por que utilizar o
Socket.IO ?
![Page 20: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/20.jpg)
11,707Quantidade de repositórios GitHub que utilizam Socket.IO!
![Page 21: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/21.jpg)
“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!
![Page 22: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/22.jpg)
![Page 23: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/23.jpg)
Show MeThe Code - Chat com Socket !
![Page 24: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/24.jpg)
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!
![Page 25: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/25.jpg)
“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 !
![Page 26: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/26.jpg)
“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 !
![Page 27: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/27.jpg)
2.Então o que é
WebRTC ?
![Page 28: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/28.jpg)
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!
![Page 29: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/29.jpg)
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.
![Page 30: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/30.jpg)
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
![Page 32: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/32.jpg)
2.Compatibilidade do
WebRTC ?
![Page 33: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/33.jpg)
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.
![Page 34: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/34.jpg)
“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.
![Page 35: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/35.jpg)
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 !
![Page 36: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/36.jpg)
Para saber verificar se o seu navevador suporta bem a tecnologia WebRTC utilize o seguinte teste:
https://test.webrtc.org
![Page 37: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/37.jpg)
2.Arquitetura do
WebRTC ?
![Page 38: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/38.jpg)
Arquitetura do motor WebRTC:
![Page 39: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/39.jpg)
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()
![Page 40: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/40.jpg)
“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
![Page 41: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/41.jpg)
“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
![Page 42: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/42.jpg)
“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
![Page 43: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/43.jpg)
2.O que é
Opentok?
![Page 44: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/44.jpg)
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!
![Page 45: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/45.jpg)
OpenTok Preço
![Page 46: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/46.jpg)
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!
![Page 47: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/47.jpg)
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
![Page 48: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/48.jpg)
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.
![Page 49: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/49.jpg)
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!
![Page 50: Comunicação em tempo real com WebRTC e PHP](https://reader033.fdocumentos.tips/reader033/viewer/2022061508/587eec321a28ab17388b6f8b/html5/thumbnails/50.jpg)
Show MeThe Code - OpenTok SDK PHP!