如何将 GIF 图像从画布传输到 WebRTC

本文分享在工作中遇到的一个场景，就是不得不将 GIF 图像从画布传输到 WebRTC，我不能展示完整的代码，看看具体的实现流程，这是一次很好的学习经历。

使用的库

Konva
Gifler

什么是Konva？

Konva 是一个 HTML5 Canvas Javascript 框架，支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、桌面和移动应用程序的事件处理等。

什么是 Konva Stage？

简单来说，Konva Stage 用作显示图层的显示器。

什么是 Konva Layer？

图层是可以绘制的东西。

Gifler是什么？

一个将 GIF 帧渲染到画布元素的库。

创建一个基本的 HTML 文件

HTML 非常简单：

<!DOCTYPE html>
<html lang="jp">
  <head>
    <title>Canvas</title>
    <meta charset="utf-8"/>
  </head>

  <body>
    <button onclick="publish();">Publish</button>
    <div id="container"></div>

    <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

容器是 div 将用于显示 GIF 图像。

接下来是 Javascript 部分。

显示 GIF 图像

首先，我在名为“main.js”的文件中创建了 Konva Stage 和图层。

const stage = new Konva.Stage({
  container: 'container',
  width: 640,
  height: 480 
});

const layer = new Konva.Layer();
stage.add(layer);

创建图层后，它会被添加到 Stage 中。

接下来是创建画布元素并创建“onDrawFrame”函数：

const canvas = document.createElement('canvas');

const onDrawFrame = (ctx, frame) => {
  canvas.width = frame.width;
  canvas.height = frame.height;
  ctx.drawImage(frame.buffer, 0, 0); 

  layer.draw();
};

然后读取图像并将其添加到 Konva 层：

gifler('./200.gif').frames(canvas, onDrawFrame);

const image = new Konva.Image({
  image: canvas
});

layer.add(image);

GIF 文件中的帧将通过“onDrawFrame”函数处理，然后绘制到画布上。

从 Canvas 到 MediaStream

单击“发布”按钮后，将发生以下情况：

const publish = async () => {
  try {
    const mediaStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
    const audioTrack = mediaStream.getAudioTracks()[0];

    if (!audioTrack) {
      alert('no audio');

      return;
    }

    const localCanvas = document.getElementsByTagName('canvas')[0];
    const canvasStream = localCanvas.captureStream(30);
    const canvasTrack = canvasStream.getVideoTracks()[0];

    if (!canvasTrack) {
      alert('failed to get video track');

      return;
    }

    console.log('got audio and video tracks');
    mediaStream.addTrack(canvasTrack);
	  
    // Add the stream to a PeerConnection etc.	  
  } catch (error) {
    console.error(error);
  }
};

上面基本上调用“getUserMedia”来获取用户的麦克风。完成后以 30 FPS 的参数调用“captureStream”，获取画布视频轨道，最后我们将画布视频轨道添加到媒体流对象。

一旦完成，你就可以通过 RTCPeerConnection 流式传输媒体流对象，我将在不久的将来详细介绍。

请注意，你可以在画布上使用 captureStream 函数来显示任何内容，而不必是 GIF。