介绍

你好！ ？

在本教程中，我将向您展示如何使用 WebCodec API 发送和接收视频。

首先让我们对服务器进行编码。

设置服务器

为了在对等点之间发送和接收数据包，我们需要一个 websocket 服务器。

为此，我们将使用 Nodejs 创建一个非常基本的服务器。首先初始化项目：

npm init -y

然后安装所需的模块：

npm i ws express

接下来创建一个名为“index.js”的新文件并使用以下代码填充它：

// 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);
  });
});

上面的代码没有太复杂，它服务于公共目录并处理 websocket 连接，将数据包发送到所有连接的对等点。 ？

接下来我们将处理发件人部分，但首先创建一个名为“public”的新目录

mkdir public

创建发件人

我们将创建的第一个前端文件是广播文件，在 public 下创建一个名为“sender.html”的新文件，并用以下 HTML 填充它：

分解并解释代码的作用。

1. HTML 结构
   • 视频元素显示来自用户相机的实时视频
   • canvas 元素用于显示视频源的各个帧。这提供了每个编码帧的视觉预览
2. JavaScript代码
   • initWebSocket 函数连接到 WebSocket 服务器。此连接对于将编码帧流式传输到接收器至关重要
   • initEncoder 函数创建一个 VideoEncoder 对象。它定义了一个输出回调，每次编码器生成新块时都会运行
   • videoEncoder.configure() 将编解码器设置为 VP8，码率 1Mbps，FPS 30，确保流畅且高质量的编码
   • getUserMedia 调用用于请求访问摄像头。视频源被分配给视频元素，VideoTrackProcessor 允许实时处理每一帧
   • processFrames 函数从视频中读取帧，将它们显示在 canvas 元素上，并使用 videoEncoder.encode() 对每个帧进行编码。然后将每个帧作为编码块发送到服务器。

唷！希望您能理解。接下来我们将创建将接收流的文件。 ？

创建接收器

此文件通过 WebSocket 接收编码的视频块，对其进行解码，并将其显示在画布元素上。

在公共目录下创建一个名为“receiver.html”的新文件，并用以下内容填充它：

分解上述文件：

1. HTML
   • canvas 元素是解码视频帧的主要显示区域。它有固定的宽度、高度和边框，与发件人页面相同。
2. JavaScript
   • initWebSocket 函数创建一个新的 WebSocket 连接，从发送方接收编码帧并将其传递给decodeFrame() 进行解码。
   • initDecoder 初始化为 VP8 编解码器配置的 VideoDecoder 对象。解码器将每一帧输出到画布。
   • decodeFrame 获取编码数据，将其包装在 EncodedVideoChunk 中（作为具有当前时间戳的关键帧），并通过 videoDecoder.decode() 对其进行解码。每一帧都实时显示在画布上

唷！现在我们已经拥有了所需的所有部分，让我们实际运行它吧！ ？

运行代码

要运行代码，只需运行以下命令：

node index.js

然后将浏览器指向http://localhost:3000/sender.html
允许访问您的相机，然后打开另一个选项卡以
http://localhost:3000/receiver.html

如下所示，您应该看到从发送者发送的流。

结论

在本教程中，我展示了如何访问摄像头、对其进行编码、通过 WebSocket 发送数据块以及如何解码并在接收器端显示它们。我希望本教程对您有用。 ？

一如既往，您可以通过我的 github 获取代码：
https://github.com/ehand91/webcodec-stream

快乐编码！ ？

喜欢我的工作吗？我发布的内容涉及各种主题，如果您想了解更多，请喜欢并关注我。
我也喜欢咖啡。

如果您想学习算法模式以在编码面试中取得好成绩，我推荐[以下课程](https://algolab.so/p/algorithms-and-data-struct-video-course?affcode=1413380_bzrepgch