WebAssembly入门课
于航
PayPal 高级软件工程师
新⼈⾸单¥9.9
1253 人已学习
课程目录
已更新 17 讲 / 共 22 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 我们为什么要了解 WebAssembly?
免费
01 | 基础篇:学习此课程你需要了解哪些基础知识?
02 | 历史篇:为什么会有 WebAssembly 这样一门技术?
核心原理篇 (6讲)
03 | WebAssembly 是一门新的编程语言吗?
04 | WebAssembly 模块的基本组成结构到底有多简单?
05 | 二进制编码:WebAssembly 微观世界的基本数据规则是什么?
06 | WAT:如何让一个 WebAssembly 二进制模块的内容易于解读?
07 | WASI:你听说过 WebAssembly 操作系统接口吗?
08 | API:在 WebAssembly MVP 标准下你能做到哪些事?
应用篇 (6讲)
09 | WebAssembly 能够为 Web 前端框架赋能吗?
10 | 有哪些已经投入生产的 WebAssembly 真实案例?
11 | WebAssembly 在物联网、多媒体与云技术方面有哪些创新实践?
12 | 有哪些优秀的 WebAssembly 编译器与运行时?
13 | LLVM:如何将自定义的语言编译到 WebAssembly?
14 | 有哪些正在行进中的 WebAssembly Post-MVP 提案?
实战篇 (2讲)
15 | 如何实现一个 WebAssembly 在线多媒体处理应用(一)?
16 | 如何实现一个 WebAssembly 在线多媒体处理应用(二)?
WebAssembly入门课
15
15
1.0x
00:00/00:00
登录|注册

16 | 如何实现一个 WebAssembly 在线多媒体处理应用(二)?

于航 2020-10-09
你好,我是于航。
在上一节课中,我们介绍了本次实践项目在代码层面的大体组成结构,着重给你讲解了需要了解的一些基础性知识,比如“滤镜的基本原理及实现方法”以及“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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《WebAssembly入门课》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥9.9
立即订阅
登录 后留言

精选留言(1)

  • 一步
    对于不同的滤镜效果,是不是对应的卷积核都是有固定的模式的?

    还有就是 对于现在的图像处理软件,比如 PS 的滤镜功能的实现是不是也使用的卷积核?
    2020-10-09
收起评论
1
返回
顶部