Upload
michael-douglas
View
541
Download
8
Embed Size (px)
Citation preview
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!