基于WebAssembly的图片渲染/视频处理/云原生的场景应用有哪些?

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

webassembly 概念

WebAssembly是一种运行在现代网络浏览器中的新型代码,并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如C、C++和Rust等低级源语言提供一个高效的编译目标。什么是编译目标?当我们写 TypeScript 的时候,Webpack 最后打包生成的 JavaScript 文件就是编译目标。也就是说,你不需要直接写 WebAssembly 代码,而是从其他高级语言编译过来就行。

webassembly 有什么优点

  1. 快速、高效

WebAssembly 的二进制文件比 JavaScript 文本文件小得多,因而下载速度更快。其解析和执行速度也更快。对比 JavaScript,JavaScript 是一种动态类型语言,不必事先定义变量类型,也不需要提前编译。这使得代码编写变得简单快捷,但这也意味着 JavaScript 引擎有大量的额外工作。JavaScript 引擎在运行 JavaScript 代码的时候,必须解析,编译并优化代码。而 WebAssembly 本身就以二进制形式提供,解析速度更快,且它是静态类型的,其引擎在编译期间不需要类型推断,也没有垃圾收集等。WebAssembly代码在不同平台上能够以接近本地速度运行。

js 和 webassembly 的执行过程对比:

1e52228ca9b8ae0766dad79c42ef899e.png

WebAssembly 执行快更详细的原因可以看这里

长按识别二维码查看原文

https://zhuanlan.zhihu.com/p/422541443

315ae608e92fc13df1b5dcbc82688d6c.png      

  1. 可移植、灵活

使用 WebAssembly ,只需要一次编译,您的应用程序将可以在每个现代浏览器中运行。使用“原生”模块也就没那么复杂,如果开发人员可以跨不同平台 (例如,在 Web 和桌面应用程序) 共享同一脚本语言或低级语言代码库,则可以节省开发时间并降低维护成本。而WebAssembly 为你提供了一种在不降低这些平台性能的前提下实现此目标的方法。

  1. 安全

WebAssembly 默认为你提供轻量级沙箱,像其他网络代码一样,它遵循浏览器的同源策略和授权策略。

调研目标

  1. webp图片的优势在于它具有更优的图像数据压缩算法,在拥有肉眼无法识别差异的图像质量前提下,带来更小的图片体积。但是在支持性上,如图:

  • 封面出来慢,且非标准视频截不出图片

  • 视频上传慢(视频压缩)

  • 非视频文件或无法解码的文件需要上传后台后才知道(视频转码/解码)

  1. 云原生 WebAssembly 发展和应用

调研结论

支持webp图片渲染

可基于 WebAssembly 支持 webp 格式的图片渲染,且实现方案比较成熟。

  1. 微信官方小程序在基础库版本大于 2.9.0 时已支持 webp 格式的图片渲染。不过官方不是基于 WebAssembly 的。

虽然WebAssembly的解码性能比JavaScript快不少,但遇到超大分辨率(如1920 x 1080等)的webP时,却远远落后于客户端的解码性能。综合对比各种方案的性能和兼容性之后,而是采用了基于iOS客户端自定义协议webphttps的方案,大致步骤如下:

  • 首先,微信小程序基础库判断开发者在image组件使用的是webP格式时,则在image src里加上webp头部如:webphttps://example.png。

  • 然后,客户端通过NSURLProtocol协议挟持webphttps的请求,并下载相应的webP数据进行解码。

  • 最后,再把解码后的image数据回吐给浏览器进行渲染显示。

基于 WebAssembly 的实现原理可参考这里

长按识别二维码查看原文

https://juejin.cn/post/6844903893759950855

f4017a4ceb0700358aead1bacf90bc4b.png      

  1. 电脑端打开小程序,暂不支持 webp 格式的图片渲染(电脑端打开,本身网络环境相对更好。或推动客户端支持)

  2. 对于h5页面,也有比较成熟的基于 WebAssembly 支持 webp 格式的图片渲染的方案,参考这里

    长按识别二维码查看原文

    https://zhuanlan.zhihu.com/p/182507828

    da2eb87c80cb7d79fa3fa7c8ffd27dec.png      

视频上传

主要凭借 FFmpeg 的 WebAssembly 在前端实现视频截帧/转码/压缩等。

  1. 视频截帧已经转为 wasm 版的现成的库:https://github.com/jordiwang/web-capture,试用了一下,截图非常快。

如 在 2.3G大的视频下,截取第5453帧,只需要273ms

b7077c867af390650d52aa6c144c9f88.png

但是存在一点问题:

  • 该库定义的“帧”粒度不够细,两个“帧”之间会有较大的距离,会有部分视频帧无法截取。(可自己手动调整一下截帧规则,然后重新打包一个wasm版的 ffmpeg)

  • 该包只实现了截帧

  1. 也可以用 ImageMagick 转为wasm版,然后实现图片格式转换

  2. 可基于 FFmpeg 实现图片合成视频、音频视频合成、视频文字编辑等

这块可以自己再摸索的点有:

  1. 截帧优选(结合tensorflow截多张图给用户选择)

  2. 处理文件数据大占用内存问题

  3. 本地媒体元素(图片、音频、文字等)合成视频及视频编辑

  4. 视频/图片转码

云原生 WebAssembly 发展和应用

WebAssembly 是一个轻量级、快速、安全和多语言的函数“容器”。WebAssembly 将由 Kubernetes 和 Docker 开拓的云原生编程模式,从大型数据中心引入边缘计算和微服务领域。

Wasm 可以作为云原生应用程序的通用 runtime。与类似 Docker 的应用程序容器相比,WebAssembly runtime 以更低的资源消耗实现更高的性能。云中 WebAssembly 的常见用例包括以下内容:

  • 用于 serverless 函数即服务 (FaaS) 的 runtime,https://github.com/second-state/aws-lambda-wasm-runtime

  • 将用户定义的函数嵌入到 SaaS 应用或数据库,http://reactor.secondstate.info/en/docs/

  • 用于 service mesh sidecar 应用的 runtime

  • WasmEdge WebAssembly runtime,支持在 WebAssembly runtime 中从 JavaScript 调用 C/C++ 或 Rust 函数,充分利用 WebAssembly 的计算效率。

更多可以了解这个:https://www.zhihu.com/column/c_1311629555841826816

WebAssembly 实践

其实基本不会自己动手写,而是把一些低级语言的好用的库编译过来用或用低级语言编写好对应的库再编译过来,生成对应的 .wasm 文件

19a5c4542400643b9bfbbb74ea750b1a.png

由于我这次主要是调研性质,所以主要是想看有哪些低级语言的库,可以更好地被用进来。我没有从头开始编译,直接找了编译好的库来测试。如果自己想体验一把的话,可以按照这里的方法进行:

  • http://quickapp.vivo.com.cn/webassembly/#toc-8

  • https://cloud.tencent.com/developer/article/1829567

更多WebAssembly 应用

  • https://www.zhihu.com/question/265700379/answer/2207386607

  • https://zhuanlan.zhihu.com/p/339952783

Chrome 关于 WebAssembly 的最新更新

Chrome 91默认开启了WebAssembly SIMD(https://www.chromestatus.com/feature/6533147810332672)。SIMD是一种特殊的CPU指令,它可以实现数据层面的并行处理。SIMD常用于视频、音频、图像、加密、动画、游戏、AI等需要处理大量数据的应用场景,可以极大地提高向量类型的数据处理性能。在手势识别应用中,WebAssembly SIMD可以明显提高性能,使用SIMD和不使用SIMD的差距非常明显(两者都可以直接进行测试),使用SIMD时帧率更高,画面更加流畅。

详见:https://zhuanlan.zhihu.com/p/375356675

参考文档链接

  • https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts

  • webassembly基础与应用

    长按识别二维码查看原文

    http://quickapp.vivo.com.cn/webassembly/#toc-0

    27f8ce26ae28a88c6d58a5646341808d.png      

  • https://www.infoq.cn/article/lwlcldgjyc7lye95ewl8

  • https://zhuanlan.zhihu.com/p/42718990

  • https://zhuanlan.zhihu.com/p/411017703

  • https://zhuanlan.zhihu.com/p/375356675

9d1c28d6738aa6cf2aa67914cf390436.png

往期推荐

2021 TWeb 腾讯前端技术大会精彩回顾(附PPT)

f33dbf408e385e7c5cba4bebc44d72a9.png

面试题:说说事件循环机制(满分答案来了)

4bd0af2878b4caa8ba131221208a4431.png

专心工作只想搞钱的前端女程序员的2020

223e199d1254ec92687fac7c3ae8d5c7.png


最后

  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

7267a25927a6c38bdaa4ac0f1cfa5fd0.png

10eecc406a1d203dafa3c429ce82e73c.png

原创不易,点个在看支持我吧

b6efdacd229000a612d8b5b34a831e66.gif

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

winty~~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值