1. Introdução
Neste codelab, você aprenderá a construir um aplicativo de chat de vídeo simples usando a API WebRTC em seu navegador e o Cloud Firestore para sinalização. O aplicativo é denominado FirebaseRTC e funciona como um exemplo simples que lhe ensinará os fundamentos da construção de aplicativos habilitados para WebRTC.
O que você aprenderá
- Iniciar uma videochamada em um aplicativo da web usando WebRTC
- Sinalizar para a parte remota usando o Cloud Firestore
O que você precisará
Antes de iniciar este codelab, certifique-se de ter instalado:
- npm que normalmente vem com Node.js - Node LTS é recomendado
2. Crie e configure um projeto Firebase
Crie um projeto Firebase
- No console Firebase , clique em Adicionar projeto, então nomear o Firebase projeto FirebaseRTC.
Lembre-se do ID do projeto para seu projeto Firebase.
- Clique em Criar projeto.
O aplicativo que você vai construir usa dois serviços Firebase disponíveis na web:
- Cloud Firestore para salvar dados estruturados na nuvem e receber notificação instantânea quando os dados forem atualizados
- Firebase Hosting para hospedar e servir seus ativos estáticos
Para este codelab específico, você já configurou o Firebase Hosting no projeto que clonará. No entanto, para o Cloud Firestore, orientaremos você na configuração e ativação dos serviços usando o console do Firebase.
Ativar Cloud Firestore
O aplicativo usa o Cloud Firestore para salvar as mensagens de bate-papo e receber novas mensagens de bate-papo.
Você precisará habilitar o Cloud Firestore:
- Na seção Desenvolver do menu do Firebase console, clique em Banco de dados.
- Clique em Criar banco de dados no painel de Nuvem Firestore.
- Selecione a opção Iniciar o modo de teste em, em seguida, clique em Ativar depois de ler o aviso sobre as regras de segurança.
O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Vamos tornar nosso banco de dados mais seguro posteriormente neste codelab.
3. Obtenha o código de amostra
Clone o repositório GitHub da linha de comando:
git clone https://github.com/webrtc/FirebaseRTC
O código de exemplo deveria ter sido clonados no FirebaseRTC
diretório. Certifique-se de que sua linha de comando seja executada a partir deste diretório a partir de agora:
cd FirebaseRTC
Importe o aplicativo inicial
Abra os arquivos em FirebaseRTC
no seu editor e alterá-las de acordo com as instruções abaixo. Este diretório contém o código inicial para o codelab que consiste em um aplicativo WebRTC ainda não funcional. Vamos torná-lo funcional em todo este codelab.
4. Instale a interface de linha de comando do Firebase
A Firebase Command Line Interface (CLI) permite que você veicule seu aplicativo da web localmente e implante-o no Firebase Hosting.
- Instalar o CLI executando o seguinte comando npm:
sh npm -g install firebase-tools
- Verifique se o CLI foi instalado corretamente executando o seguinte comando:
sh firebase --version
Certifique-se de que a versão da Firebase CLI é v6.7.1 ou posterior.
- Autorizar a Firebase CLI executando o seguinte comando:
sh firebase login
Você configurou o modelo de aplicativo da web para obter a configuração do seu aplicativo para Firebase Hosting do diretório local e dos arquivos do seu aplicativo. Mas, para fazer isso, você precisa associar seu aplicativo ao projeto Firebase.
Associar a sua aplicação com o seu projeto Firebase executando o seguinte comando:
sh firebase use --add
Quando solicitado, selecione o ID do projeto e atribua um alias ao projeto do Firebase.
Um alias é útil se você tiver vários ambientes (produção, teste, etc). No entanto, para este codelab, vamos apenas usar o alias default
.
Siga as instruções restantes em sua linha de comando.
5. Execute o servidor local
Você está pronto para começar a trabalhar em nosso aplicativo! Vamos executar o aplicativo localmente!
Execute o seguinte comando Firebase CLI:
sh firebase serve --only hosting
Sua linha de comando deve exibir a seguinte resposta:
hosting: Local server: http://localhost:5000
Estamos usando o emulador do Firebase Hosting para servir nosso aplicativo localmente. O aplicativo da web agora deve estar disponível em http: // localhost: 5000.
- Abra seu aplicativo em http: // localhost: 5000.
Você deve ver sua cópia do FirebaseRTC que foi conectada ao seu projeto do Firebase.
O aplicativo foi conectado automaticamente ao seu projeto Firebase.
6. Criação de uma nova sala
Neste aplicativo, cada sessão de chat de vídeo é chamada de sala. Um usuário pode criar uma nova sala clicando em um botão em seu aplicativo. Isso irá gerar uma ID que a parte remota pode usar para entrar na mesma sala. O ID é usado como a chave no Cloud Firestore para cada quarto.
Cada quarto conterá os RTCSessionDescriptions
tanto para a oferta ea resposta, bem como duas coleções separadas com os candidatos ICE de cada partido.
Sua primeira tarefa é implementar o código que falta para criar uma nova sala com a oferta inicial do chamador. Abrir public/app.js
e encontrar o comentário // Add code for creating a room here
e adicione o seguinte código:
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
const roomWithOffer = {
offer: {
type: offer.type,
sdp: offer.sdp
}
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`
A primeira linha cria um RTCSessionDescription
que irá representar a oferta do chamador. Isso é então definido como a descrição local e, finalmente, gravado no novo objeto de sala no Cloud Firestore.
A seguir, ouviremos as alterações no banco de dados e detectaremos quando uma resposta do receptor foi adicionada.
roomRef.onSnapshot(async snapshot -> {
console.log('Got updated room:', snapshot.data());
const data = snapshot.data();
if (!peerConnection.currentRemoteDescription && data.answer) {
console.log('Set remote description: ', data.answer);
const answer = new RTCSessionDescription(data.answer)
await peerConnection.setRemoteDescription(answer);
}
});
Isto irá esperar até que o receptor escreve o RTCSessionDescription
para a resposta, e defina-o como a descrição remoto do chamador RTCPeerConnection
.
7. Entrando em uma sala
A próxima etapa é implementar a lógica para ingressar em uma sala existente. O usuário faz isso clicando no botão sala Participe e introduzir o ID para o quarto para se juntar. Sua tarefa aqui é implementar a criação do RTCSessionDescription
para a resposta e atualizar o quarto no banco de dados em conformidade.
const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
const roomWithAnswer = {
answer: {
type: answer.type,
sdp: answer.sdp
}
}
await roomRef.update(roomWithAnswer);
No código acima, nós começamos extraindo a oferta do chamador e criando uma RTCSessionDescription
que estabelecemos como a descrição remoto. Em seguida, criamos a resposta, definimos como a descrição local e atualizamos o banco de dados. A atualização do banco de dados irá desencadear a onSnapshot
callback no lado do chamador, que por sua vez irá definir a descrição remoto com base na resposta do receptor. Isso completa a troca da RTCSessionDescription
objetos entre o chamador e o receptor.
8. Colete candidatos ICE
Antes que o chamador e o receptor possam se conectar, eles também precisam trocar candidatos ICE que informam ao WebRTC como se conectar ao par remoto. Sua próxima tarefa é implementar o código que escuta os candidatos ICE e os adiciona a uma coleção no banco de dados. Encontrar a função collectIceCandidates
e adicione o código a seguir:
async function collectIceCandidates(roomRef, peerConnection,
localName, remoteName) {
const candidatesCollection = roomRef.collection(localName);
peerConnection.addEventListener('icecandidate', event -> {
if (event.candidate) {
const json = event.candidate.toJSON();
candidatesCollection.add(json);
}
});
roomRef.collection(remoteName).onSnapshot(snapshot -> {
snapshot.docChanges().forEach(change -> {
if (change.type === "added") {
const candidate = new RTCIceCandidate(change.doc.data());
peerConneciton.addIceCandidate(candidate);
}
});
})
}
Essa função faz duas coisas. Ele coleta candidatos gelo da API WebRTC e adiciona-los para o banco de dados e escutas para candidatos gelo adicionado a partir do peer remoto e os adiciona à sua RTCPeerConnection
instância. É importante, ao ouvir as alterações do banco de dados, filtrar qualquer coisa que não seja uma nova adição, uma vez que, de outra forma, teríamos adicionado o mesmo conjunto de candidatos ICE repetidamente.
9. Conclusão
Neste codelab, você aprendeu como implementar a sinalização para WebRTC usando o Cloud Firestore, bem como usá-la para criar um aplicativo de chat de vídeo simples.
Para saber mais, visite os seguintes recursos: