Introdução

Olá! ?

Neste tutorial, mostrarei como usar a API WebCodec para enviar e receber vídeo.

Primeiro vamos codificar o servidor.

Configurando o servidor

Para enviar e receber pacotes entre pares, precisaremos de um servidor websocket.

Para isso vamos criar um servidor bem básico usando nodejs. Primeiro inicialize o projeto:

npm init -y

Em seguida, instale os módulos necessários:

npm i ws express

Em seguida, crie um novo arquivo chamado "index.js" e preencha-o com o seguinte código:

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname   '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

Nada muito complicado, o código acima atende o diretório público e lida com a conexão websocket enviando pacotes para todos os pares conectados. ?

A seguir cuidaremos da parte do remetente, mas primeiro crie um novo diretório chamado "público"

mkdir public

Criando o remetente

O primeiro arquivo front end que criaremos é aquele que está transmitindo, crie um novo arquivo chamado "sender.html" em público e preencha-o com o seguinte HTML:

Para detalhar e explicar o que o código faz.

1. Estrutura HTML
   • O elemento de vídeo exibe vídeo ao vivo da câmera do usuário
   • O elemento canvas é usado para exibir quadros individuais do feed de vídeo. Isso fornece uma visualização visual de cada quadro codificado
2. Código JavaScript
   • A função initWebSocket se conecta a um servidor WebSocket. Esta conexão é essencial para transmitir os quadros codificados para um receptor
   • A função initEncoder cria um objeto VideoEncoder. Ele define um retorno de chamada de saída que é executado sempre que o codificador produz um novo pedaço
   • O videoEncoder.configure() define o codec para VP8 com taxa de bits de 1Mbps e 30 FPS, garantindo uma codificação suave e de alta qualidade
   A chamada
   • getUserMedia é usada para solicitar acesso à câmera. O feed de vídeo é atribuído ao elemento de vídeo e o VideoTrackProcessor permite processar cada quadro em tempo real
   • A função processFrames lê frames do vídeo, exibe-os no elemento canvas e codifica cada frame usando videoEncoder.encode(). Cada quadro é então enviado ao servidor como um pedaço codificado.

Ufa! Espero que isso tenha sido compreensível para você. A seguir criaremos o arquivo que receberá o stream. ?

Criando o receptor

Este arquivo recebe os pedaços de vídeo codificados via WebSocket, decodifica-os e os exibe em um elemento canvas.

Crie um novo arquivo no diretório público chamado "receiver.html" e preencha-o com o seguinte:

Para decompor o arquivo acima:

1. HTML
   • O elemento canvas é a área de exibição principal dos quadros de vídeo decodificados. Possui largura, altura e borda fixas, iguais à página do remetente.
2. JavaScript
   • A função initWebSocket cria uma nova conexão WebSocket, recebendo quadros codificados do remetente e passando-os para decodeFrame() para decodificação.
   • initDecoder inicializa um objeto VideoDecoder configurado para o codec VP8. O decodificador envia cada quadro para a tela.
   • decodeFrame pega os dados codificados, agrupa-os em um EncodedVideoChunk (como um quadro-chave com o carimbo de data / hora atual) e os decodifica via videoDecoder.decode(). Cada quadro é exibido na tela em tempo real

Ufa! Agora que temos todas as peças necessárias, vamos executá-lo! ?

Executando o código

Para executar o código basta executar o seguinte comando:

node index.js

Em seguida, aponte seu navegador para http://localhost:3000/sender.html
Permita o acesso à sua câmera e abra outra guia para
http://localhost:3000/receptor.html

Como abaixo, você verá o stream sendo enviado pelo remetente.

Conclusão

Neste tutorial mostrei como obter acesso à câmera, codificá-la, enviar os pedaços pelo WebSocket e decodificá-los e exibi-los no lado do receptor. Espero que este tutorial tenha sido útil para você. ?

Como sempre, você pode obter o código através do meu github:
https://github.com/ethand91/webcodec-stream

Boa codificação! ?

Gostou do meu trabalho? Eu posto sobre uma variedade de tópicos, se você quiser ver mais, curta e me siga.
Também adoro café.

Se você deseja aprender padrões de algoritmo para se sair bem na entrevista de codificação, recomendo o [curso a seguir](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch