16 | 如何实现一个 WebAssembly 在线多媒体处理应用（二）？

于航

你好，我是于航。
在上一节课中，我们介绍了本次实践项目在代码层面的大体组成结构，着重给你讲解了需要了解的一些基础性知识，比如“滤镜的基本原理及实现方法”以及“Emscripten 的基本用法”等等。而在这节课中，我们将继续构建这个基于 Wasm 实现的多媒体 Web 应用。
HTML首先，我们来构建这个 Web 应用所对应的 HTML 部分。这部分代码如下所示：
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>DIP-DEMO</title>
    <style>
      * { font-family: "Arial,sans-serif"; }
      .fps-num { font-size: 50px; }
      .video { display: none; }
      .operation { margin: 20px; }
      button {
        width: 150px;
        height: 30px;
        margin-top: 10px;
        border: solid 1px #999;
        font-size: 13px;
        font-weight: bold;
      }
      .radio-text { font-size: 13px; }
    </style>
  </head>
  <body>
    <canvas class="canvas"></canvas>
    <div class="operation">
      <h2>帧率：<span class="fps-num">NaN</span> FPS</h2>
      <input name="options" value="0" type="radio" checked="checked"/> 
      <span class="radio-text">不开启渲染.</span> <br/>
      <input name="options" value="1" type="radio"/> 
      <span class="radio-text">使用 <b>[JavaScript]</b> 渲染.</span> 
      <br/>
      <input name="options" value="2" type="radio"/> 
      <span class="radio-text">使用 <b>[WebAssembly]</b> 渲染.</span> 
      <br/>
      <button>确认</button>
    </div>
    <video class="video" type="video/mp4"
      muted="muted" 
      loop="true" 
      autoplay="true" 
      src="media/video.mp4">
  </body>
  <script src='./dip.js'></script>
</html>
为了便于演示，HTML 代码部分我们尽量从简，并且直接将 CSS 样式内联到 HTML 头部。
其中最为重要的两个部分为 “<canvas>” 标签和 “<video>” 标签。<canvas> 将用于展示对应 <video> 标签所加载外部视频资源的画面数据；而这些帧数据在被渲染到<canvas>之前，将会根据用户的设置，有选择性地被 JavaScript 代码或者 Wasm 模块进行处理。
还有一点需要注意的是，可以看到我们为<video> 标签添加了名为 “muted”、“loop” 以及 “autoplay” 的三个属性。这三个属性分别把这个视频资源设置为“静音播放”、“循环播放”以及“自动播放”。
实际上，根据 Chrome 官方给出的 “Autoplay Policy” 政策，我们并不能够直接依赖其中的 “autoplay” 属性，来让视频在用户打开网页时立即自动播放。稍后你会看到，在应用实际加载时，我们仍会通过调用 <video> 标签所对应的 play() 方法，来确保视频资源可以在网页加载完毕后，直接自动播放。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

WebAssembly技术在在线多媒体处理应用中的应用是本文的重点。文章详细介绍了利用HTML和JavaScript构建Web应用的关键技术和实现逻辑。通过使用`<canvas>`标签展示视频帧数据和`<video>`标签加载视频资源，JavaScript代码实现了实时渲染视频到`<canvas>`标签、处理用户交互逻辑等功能。其中，通过使用`CanvasRenderingContext2D.drawImage()`方法将视频帧内容绘制到`<canvas>`上，并使用`window.requestAnimationFrame`方法实时更新画面内容。此外，文章还介绍了实时帧率的计算逻辑和JavaScript滤镜方法的实现，包括卷积核矩阵的翻转和滤镜处理函数的具体实现步骤。通过这些内容，读者可以快速了解如何利用WebAssembly实现在线多媒体处理应用的关键技术和实现逻辑。文章还提到了下一节课将会展示Wasm滤镜处理函数与JavaScript版滤镜函数在图像处理效率上的差异。同时，读者还可以通过练习更改JavaScript滤镜函数中的卷积核矩阵，来观察不同的滤镜效果。整体而言，本文通过清晰的代码示例和解释，为读者提供了深入了解WebAssembly技术在多媒体处理应用中的实际应用的机会。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《WebAssembly 入门课》，新⼈⾸单¥29

立即购买

登录后留言

全部留言(6)

最新
精选

zly
看到老师在chrome浏览器上没用启用渲染的情况下帧率有200+，然后跟着搞发现自己电脑输出只有60帧，后面发现这个还是跟系统设置有关系的，我的笔记本电脑设置的帧数就60帧，所以渲染视频最高只能到60帧
作者回复: 理论上应该不会与电脑设置的帧数有关，这个例子中的“帧率”实际上是根据每一次处理和渲染画面所花费的时间粗略计算出来的，而不是 requestAnimationFrame 的执行帧率。这里可能是电脑的性能只能达到 60Hz，换一台电脑试试看效果如何。
2020-10-24
2
2
奕
对于不同的滤镜效果，是不是对应的卷积核都是有固定的模式的？还有就是对于现在的图像处理软件，比如 PS 的滤镜功能的实现是不是也使用的卷积核？
作者回复: 对的，不同的滤镜实际上有着各自固定的卷积核模板，只是参数上可能会有些区别。滤镜的基本处理和计算方式是不会变的，这个过程适用于一切图像处理工具。这个是来自于数字图像处理领域的理论基础。
2020-10-09

1
Aaaaaaaaaaayou
是不是应该用一个新的数组而不是直接修改原有数组，否则前面卷积后的结果会影响后面的像素
作者回复: 具体是指 flipKernel 函数吗？
2022-09-30归属地：广东


zzm
您好，请问有没有完整的代码，我想运行看看，示例的代码在调用和传参方面有些不理解
作者回复: 可以参考这里哈：https://github.com/Becavalier/geektime-wasm-tutorial
2021-04-24


陈。。。
老师，有个问题 requestAnimationFrame在MDN上的描述是： This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second 也就是在浏览器重回前调用，一般帧率是60. 为什么案例中不开启渲染时能有300的fps呢？我不开起渲染的时候就只有40左右的fps了（用火焰图看还有60帧）
2023-05-20归属地：湖南
1

Jason Yu 于航
源码可以参考这里：https://github.com/Becavalier/geektime-wasm-tutorial。
2021-04-29



收起评论