Google está empenhada em fazer avançar a equidade racial para as comunidades negras. Veja como.
Esta página foi traduzida pela API Cloud Translation.
Switch to English

Firebase + WebRTC Codelab

1. Introdução

Neste codelab, você vai aprender como construir uma aplicação de vídeo chat simples usando a API WebRTC no seu browser e Cloud Firestore para sinalização. A aplicação é chamado FirebaseRTC e funciona como um exemplo simples que vai te ensinar o básico de construção de WebRTC habilitado aplicativos.

O que você aprenderá

  • Iniciar uma chamada de vídeo em uma aplicação web utilizando WebRTC
  • Sinalizando para a parte remota usando Nuvem Firestore

O que você precisará

Antes de iniciar este codelab, certifique-se de que você instalou:

  • npm que normalmente vem com Node.js - Nó LTS é recomendado

2. Criar e configurar um projeto Firebase

Criar um projeto Firebase

  1. No console Firebase , clique em Adicionar projeto, então nomear o Firebase projeto FirebaseRTC.

Lembre-se do ID do projeto para seu projeto Firebase.

  1. Clique em Criar projeto.

O aplicativo que você está indo para construir usa dois serviços Firebase disponíveis na Web:

  • Nuvem Firestore para salvar dados estruturados na nuvem e obter notificação instantânea quando os dados são atualizados
  • Firebase hospedagem para hospedar e servir seus ativos estáticos

Por esta codelab específico, você já configurou Firebase Hospedando no projeto você vai ser clonagem. No entanto, para Cloud Firestore, vamos orientá-lo através da configuração e permitindo dos serviços que utilizam o console Firebase.

Ativar Nuvem Firestore

O aplicativo usa Nuvem Firestore para guardar as mensagens de bate-papo e receber novas mensagens de chat.

Você precisa ativar Nuvem Firestore:

  1. No menu do console Firebase é seção de Revelação, clique Banco de Dados.
  2. Clique em Criar banco de dados no painel de Nuvem Firestore.
  3. 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.

garante modo de teste que você pode escrever livremente ao banco de dados durante o desenvolvimento. Nós vamos fazer o nosso banco de dados mais seguro, mais tarde, neste codelab.

3. Receba o código de exemplo

Clonar o repositório GitHub a partir da linha de comando: 

 git clone https://github.com/webrtc/FirebaseRTC

O código de exemplo deveria ter sido clonados no diretório firebase-RTC-web. Certifique-se de sua linha de comando é executado a partir deste diretório a partir de agora: 

 cd firebase-rtc-web

Importar o aplicativo arranque

Abra os arquivos em firebase-RTC-web em seu editor e alterá-las de acordo com as instruções abaixo. Este diretório contém o código de partida para a codelab que consiste em um aplicativo WebRTC ainda-não funcional. Vamos torná-lo funcional ao longo deste codelab.

4. Instale o Firebase Command Line Interface

O Firebase Command Line Interface (CLI) permite servir seu aplicativo web localmente e implantar seu aplicativo web para Firebase Hosting.

  1. Instalar o CLI executando o seguinte comando npm: sh npm -g install firebase-tools
  1. Verifique se o CLI foi instalado corretamente executando o seguinte comando: sh firebase --version

Certifique-se a versão do Firebase CLI é v6.7.1 ou posterior.

  1. Autorizar a Firebase CLI executando o seguinte comando: sh firebase login

Você configurou o modelo de aplicativo web para puxar configuração do seu aplicativo para Firebase hosting de diretório e arquivos local do seu aplicativo. Mas, para isso, você precisa associar seu aplicativo com seu projeto Firebase.

  1. Associar a sua aplicação com o seu projeto Firebase executando o seguinte comando: sh firebase use --add

  2. Quando solicitado, selecione o ID do projeto, em seguida, dar o seu projeto Firebase um alias.

Um alias é útil se você tiver vários ambientes (produção, armazenamento temporário, etc). No entanto, para este codelab, vamos apenas usar o alias default .

  1. Siga as instruções restantes na sua linha de comando.

5. Execute o servidor local

Você está pronto para começar realmente o trabalho em nosso app! Vamos executar o aplicativo localmente!

  1. Execute o seguinte comando Firebase CLI: sh firebase serve --only hosting

  2. Sua linha de comando deve exibir a seguinte resposta: hosting: Local server: http://localhost:5000

Estamos usando o emulador de hospedagem Firebase para servir nosso aplicativo localmente. O aplicativo web agora deve estar disponível a partir de http: // localhost: 5000.

  1. Abra seu aplicativo em http: // localhost: 5000.

Você deverá ver a sua cópia do FirebaseRTC que foi conectado ao seu projeto Firebase.

O aplicativo se conectou automaticamente ao seu projeto Firebase.

6. Criação de uma nova sala

Nesta aplicação, cada sessão de chat de vídeo é chamado de um quarto. Um usuário pode criar uma nova sala, clicando em um botão na sua aplicação. Isso irá gerar um ID que a parte remota pode usar para ingressar na mesma sala. O ID é usado como a chave na Nuvem 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 faltando para a criação de 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. Este é, então, definido como a descrição local, e, finalmente, escrito para o novo objeto quarto em Nuvem Firestore.

Em seguida, vamos ouvir as alterações no banco de dados e detectar quando uma resposta do receptor foi adicionado. 

 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. Participar de um quarto

O próximo passo é implementar a lógica para juntar um quarto 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, defina-o como a descrição local, e atualizar 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. candidatos ICE Collect

Antes do chamador e chamado pode se conectar uns com os outros, eles também precisam de candidatos troca ICE que contam WebRTC como se conectar ao ponto remoto. Sua próxima tarefa é implementar o código que escuta para candidatos de gelo e adiciona-los a uma coleção no banco de dados. Encontrar a função collectIceCandidates e adicione o código a seguir: 

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    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);
            }
        });
    })
}

Esta 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 quando se ouve banco de dados muda para filtrar qualquer coisa que não é uma nova adição, uma vez que de outra forma teria acrescentado o mesmo conjunto de candidatos ICE uma e outra vez.

9. Conclusão

Neste codelab você aprendeu como implementar sinalização para WebRTC usando Nuvem Firestore, bem como a forma de usar isso para criar uma aplicação de vídeo chat simples.

Para saber mais, visite os seguintes recursos:

  1. Source Code FirebaseRTC
  2. amostras WebRTC
  3. nuvem firestore