如何将 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。

结论

今天我了解了 Konva 和 Gifler 库。我可能不需要使用 Konva 并且可以用 Gifler 做同样的事情,但这是一次很好的学习经历。

作者:Ethan Denvir

本文来自作者投稿,版权归原作者所有。如需转载,请注明出处:https://www.nxrte.com/jishu/webrtc/22594.html

(0)

相关推荐

发表回复

登录后才能评论