Crie uma plataforma básica de videochamadas com o Netlify Functions

Embora seja possível começar a usar a Video API da Vonage com muito pouco código, você ainda precisará de um servidor para gerenciar as sessões e a geração de tokens. Se você tiver um servidor para hospedar um aplicativo básico em Express.js, temos um excelente postagem no blog sobre como criar um chat de vídeo básico, mas nem todo mundo tem.

É aí que entra a tecnologia serverless — funções hospedadas na web e executadas apenas quando necessário. Já se foram os dias em que era preciso gerenciar um servidor inteiro para um único aplicativo pequeno, e o Netlify oferece uma excelente facilidade de uso para criar e hospedar funções serverless.

Para acompanhar as sessões existentes em seu aplicativo, você também precisará de um banco de dados hospedado. O FaunaDB tem uma facilidade de uso semelhante e é o que será utilizado neste tutorial. Vamos começar...

O código completo está disponível no GitHub em https://github.com/nexmo-community/netlify-functions-video-conf

Pré-requisitos

• Node.js instalado no seu computador

• A Conta da Video API da Vonage

• A Conta da Fauna

• A Account no Netlify

• A Account no GitHub

Crie um novo diretório e acesse-o pelo terminal; em seguida, crie um package.json arquivo digitando npm init -y. Quando isso estiver concluído, instale as dependências do projeto executando npm install encoding faunadb netlify-lambda opentok.

Criar um projeto da Video API da Vonage

Abra seu painel da Video API da Vonage e crie um novo projeto de API. Você pode dar qualquer nome a ele e deixar o codec como VP8.

Crie um arquivo no diretório do seu projeto chamado .env e preencha-o com sua chave e seu segredo da API da seguinte maneira:

VONAGE_KEY=YOUR_KEY
VONAGE_SECRET=YOUR_SECRET

Configurar uma função do Netlify localmente

O pacote netlify-lambda permite que você execute o Netlify Functions no seu próprio computador. Para começar, adicione dois scripts a package.json:

"netlify:serve": "netlify-lambda serve functions/src",
"netlify:build": "netlify-lambda build functions/src"

Crie um functions diretório e uma src pasta dentro dele. Na src pasta, crie um hello.js arquivo. Você usará essa função básica para verificar se tudo está configurado corretamente.

Crie um netlify.toml arquivo e insira nele a seguinte configuração:

[build]
  functions = "./functions/build"

Essa configuração informa ao Netlify que suas funções compiladas estarão acessíveis no ./functions/build diretório, que ainda não existe. Execute npm run netlify:serve no seu terminal, e um build diretório será criado. Os arquivos nesse diretório são gerados e atualizados automaticamente; portanto, salve suas alterações em src, ou elas poderão ser substituídas.

Coloque o seguinte no seu hello.js arquivo:

const headers = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'Content-Type'
}
 exports.handler = async (event, context) => {
  try {
    return { headers, statusCode: 200, body: 'ok' }
  } catch(e) {
    console.error('Error', e)
    return { headers, statusCode: 500, body: 'Error: ' + e }
  }
}

Abra um novo terminal e teste seu endpoint executando curl http://localhost:9000/hello. Você deve receber uma resposta com o texto ok.

Criar um banco de dados sobre a fauna

Cada sessão de Video da Vonage possui um ID de sessão, que você deve armazenar e poder recuperar posteriormente. Neste aplicativo, elas também terão um nome que os usuários poderão usar para se referir às sessões.

Faça login no seu Console do Fauna DB e crie um novo banco de dados. Uma vez nesse banco de dados, crie uma nova coleção chamada sessions, que armazenará seu ID de sessão e seus nomes.

Criar um índice no banco de dados

Os índices são usados para definir pesquisas comuns que serão realizadas em nosso banco de dados. Clique em índices na barra lateral e crie um novo índice com as seguintes configurações:

• Coleção de fontes: sessões

• Nome do índice: sessions_by_name

• Termos: data.name

• Exclusivo: marcado

Agora existe esse índice para pesquisar sessões pelo nome amigável, que você armazenará em uma propriedade chamada name.

Obter uma chave de acesso do FaunaDB

Você precisará de uma chave de acesso para gravar e ler dados neste banco de dados. Clique em segurança na barra lateral e crie uma nova chave com a função de administrador. Copie o segredo da chave e adicione a seguinte linha ao final do seu .env arquivo:

FAUNA_SECRET=YOUR_SECRET

Criar e armazenar uma sessão de Video

Copie e cole todo o conteúdo do seu hello.js arquivo em um novo session.js arquivo no mesmo diretório. No início do arquivo, adicione o seguinte:

import dotenv from 'dotenv'
dotenv.config()
 import faunadb, { query as q } from 'faunadb'
const client = new faunadb.Client({ secret: process.env.FAUNA_SECRET })
 const OpenTok = require("opentok");
const OT = new OpenTok(process.env.VONAGE_KEY, process.env.VONAGE_SECRET);

Isso carrega seu .env arquivo no aplicativo, importa e inicializa os clientes FaunaDB e OpenTok (agora Vonage Video API).

No final do seu arquivo, adicione uma createSession função:

const createSession = (name) => {
  return new Promise((resolve, reject) => {
    OT.createSession(async (error, session) => {
      try {
        if(error) { throw error }
         // Send document to FaunaDB
        const document = await client.query(
          q.Create(
            q.Collection('sessions'), 
            { data: { name, id: session.sessionId }}
          )
        )
        
        resolve(document)
      } catch(e) {
        reject(e)
      }
    })
  })
}

Essa função recebe um nome de sessão fácil de lembrar, cria um novo ID de sessão por meio do cliente da Video API do Vonage e o armazena em nosso banco de dados Fauna.

Por fim, atualize o conteúdo do exports.handler bloco `try` da seguinte forma:

if (event.httpMethod == 'OPTIONS') {
  return { 
    headers: { ...headers, 'Allow': 'POST' }, 
    statusCode: 204 
  }
}
 const { name } = JSON.parse(event.body)
const document = await createSession(name)
 return { 
  headers, 
  statusCode: 200, 
  body: JSON.stringify(document) 
}

Quando você aciona uma solicitação a partir de um aplicativo, ele pode enviar uma solicitação HTTP do tipo OPTIONS para perguntar quais métodos são permitidos. Se for esse o caso, retorne um cabeçalho adicional Allow cabeçalho adicional. Ao retorná-lo, o restante do código é ignorado.

Assim que nossa solicitação principal for enviada, você obtém o valor do nome enviado pelo cliente e cria uma nova sessão. Como o corpo da resposta precisa ser uma string, o documento retornado é convertido em string e devolvido ao usuário.

Experimente! Reinicie sua aplicação netlify-lambda, abra o terminal e execute este comando:

curl --header "Content-Type: application/json" --request POST --data '{"name": "kevins-call"}' http://localhost:9000/session

A resposta deve ser um documento completo do FaunaDB. No seu Console do FaunaDB, você deve ver agora o documento armazenado.

Tente executar o comando `curl` novamente e observe que ocorrerá um erro, pois não pode haver dois itens com o mesmo nome (de acordo com a restrição de exclusividade aplicada à coleção por meio do índice).

Verificar se há uma sessão em andamento

Quando um usuário digita o nome de uma sessão existente, o aplicativo deve retornar o documento em vez de tentar criar uma nova sessão. Se novas sessões forem criadas a cada conexão, cada usuário acabará em uma sessão individual, o que não é muito social.

Substitua esta linha:

const document = await createSession(name)

Com este trecho de código:

const doesSessionExist = await client.query(
  q.Exists(q.Match(q.Index('sessions_by_name'), name))
)
 let document
if(doesSessionExist) {
  document = await client.query(
    q.Get(q.Match(q.Index('sessions_by_name'), name))
  )
} else {
  document = await createSession(name)
}

O primeiro passo é verificar se existe um documento com o nome atual. Usar o método q.Exists() com o índice criado anteriormente resulta em um true ou false valor sendo armazenado em doesSessionExist.

Se a sessão existir, obtenha o documento. Caso contrário, crie um. Ao final deste trecho de código, a document variável conterá um documento.

Gerar um token

Para que os usuários possam se autenticar ao se conectarem a uma sessão de Video da Vonage, é necessário que recebam um token do nosso terminal.

Abaixo do código que você acabou de escrever e acima da instrução `return`, gere um token usando o cliente da Video API do Vonage:

const token = OT.generateToken(document.data.id, {
  role: 'publisher',
  data: `roomname=${document.data.name}`
})

O primeiro parâmetro é um ID de sessão, e o segundo contém opções para esse token. Existem três funções suportadas: assinante (pode apenas assinar os streams de outras pessoas), editor (pode publicar e assinar) e moderador (editor, e pode forçar outros clientes a se desconectarem).

Todos serão editores neste aplicativo. No entanto, você poderá adicionar posteriormente uma forma de distinguir as funções dos usuários. A segunda opção contém o nome da sala, que é armazenado no banco de dados junto com o ID da sessão associado.

Retornar dados ao cliente

O endpoint deve retornar três informações ao front-end: um ID de sessão, um token e nossa chave da Video API do Vonage. Substitua sua instrução de retorno para incluir todos esses elementos:

return { 
  headers, 
  statusCode: 200, 
  body: JSON.stringify({
    token: token,
    sessionId: document.data.id,
    apiKey: process.env.VONAGE_KEY
  }) 
}

Tente acessar o endpoint novamente, tanto com um nome de sessão novo quanto com um já existente. A resposta deve incluir todas as três propriedades! Isso significa que o endpoint está funcionando corretamente, e você pode passar à criação de um front-end básico para utilizá-lo.

Desenvolver o front-end

Crie um index.html arquivo no diretório principal do seu projeto. Como o cliente front-end será mínimo, todo o seu código ficará neste único arquivo. Escreva o HTML necessário:

<html>
  <head></head>
  <body>
    <form id="registration">
      <input type="text" name="name" placeholder="Enter room name" required />
      <button>Enter</button>
    </form>

     <div id="call">
      <div id="subscriber" class="subscriber"></div>
      <div id="publisher" class="publisher"></div>
    </div>

     <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

     <script>
      // Other logic will go here
    </script>
  </body>
</html>

Ao clicar no botão, envie uma solicitação para o endpoint e verifique se os dados estão sendo retornados corretamente. Dentro do seu <script> :

const form = document.getElementById("registration")
 form.addEventListener("submit", event => {
  event.preventDefault()
  form.style.display = "none"
   fetch("http://localhost:9000/session", { 
    method: "POST",
    body: JSON.stringify({ name: form.elements.name.value })
  }).then(res => {
    return res.json();
  }).then(res => {
    console.log(res);
  }).catch(handleCallback);
})
 function handleCallback(error) {
  if (error) {
    console.log("error: " + error.message);
  } else {
    console.log("callback success");
  }
}

O console do seu navegador deve ficar assim:

Agora que o front-end tem todos os dados necessários, você pode inicializar a sessão no seu navegador, criar um novo publisher e publicá-lo na sessão. Substitua console.log(res); pelo seguinte:

const { apiKey, sessionId, token } = res;
 const session = OT.initSession(apiKey, sessionId);
 const publisher = OT.initPublisher(
  "publisher",
  { insertMode: "append", width: "100%", height: "100%" },
  handleCallback
);
 session.connect(token, error => {
  if (error) {
    handleCallback(error);
  } else {
    session.publish(publisher, handleCallback);
  }
});
 session.on("streamCreated", event => {
  session.subscribe(
    event.stream,
    "subscriber",
    { insertMode: "append", width: "100%", height: "100%" },
    handleCallback
  );
});

O "publisher" e "subscriber" parâmetros referem-se aos valores HTML id dos elementos que conterão os fluxos de Video.

Abra o arquivo index.html no seu navegador, digite o nome de uma sala e clique no botão. Depois de conceder permissão para que a página acesse seu microfone e sua câmera, você deverá ver uma transmissão de Video (emissora) aparecer.

Hospedar no Netlify

Crie um .gitignore arquivo no diretório do seu projeto e inclua o código a seguir nele para evitar que esses arquivos e diretórios sejam enviados para um espaço público.

node_modules
functions/build
.env

Crie um novo repositório no GitHub e siga as etapas para “criar um novo repositório na linha de comando”.

Quando terminar, acesse seu Account do Netlify e clique em “Novo site a partir do Git”. Escolha seu repositório do GitHub e defina o comando de compilação npm run netlify:build.

Acesse a seção “Variáveis de ambiente” nas configurações de compilação e implantação deste projeto. Insira as três variáveis de ambiente do seu arquivo local .env .

A etapa final consiste em referenciar sua função hospedada no Netlify no seu cliente front-end quando estiver online e a URL do seu localhost quando estiver offline.

Encontre esta linha em index.html:

fetch("http://localhost:9000/session", {

Substitua por:

let url;
  if(location.hostname == 'localhost' || location.hostname == "127.0.0.1") {
    url = "http://localhost:9000/session"
  }  else {
    url = "YOUR_NETLIFY_URL/.netlify/functions/session"
  }
   fetch(url, {

Crie e envie um novo commit para o GitHub, e sua função do Netlify deverá ser reimplantada. Assim que isso estiver concluído, acesse a URL do Netlify e experimente!

E agora?

Esse aplicativo funciona muito bem, mas não tem uma aparência muito agradável. Você pode pensar em seguir algumas dicas de estilo do nosso tutorial do Express.js tutorial. Outros artigos da série abordam como adicionar chat de texto, compartilhar sua tela ou usar as outras funções fornecidas como parte da Video API da Vonage. Lembre-se: para cada endpoint que existe nesses tutoriais, você deve criar uma nova função sem servidor no functions/src diretório.

O código completo deste projeto também está disponível no GitHub.

Você pode ler mais sobre a Video API da Vonage por meio de nossa documentação, e se precisar de qualquer suporte adicional, sinta-se à vontade para entrar em contato com nossa equipe por meio da nossa account do Vonage Developer no Twitter ou pela Slack da Comunidade Vonage.