前端技术专场

今天周六无事，抱着学习的目的参加了之前报名的这场前端技术沙龙。

主题

  • 多端多场景下的H5混合开发
  • 基于WebAssembly的移动端网页媒体解码
  • 无处不在Flutter：Flutter在多平台应用的探索

多端多场景下的H5混合开发

APP与H5是如何交互的?

Native调用H5

  • H5根据约定将一组API绑定到webview的window对象上。
  • Native通过webview获取window对象的方法，调用H5。

H5调用Native

  • H5根据某种触发条件主动修改URL(比如iframe.src)。
  • Native监控webview发出的URL请求，拦截URL，调用相应的原生操作

注：以上通过拦截 URL SCHEME的方式调用Native，实际上还可以通过注入API的方式调用Native，拦截 URL SCHEME更多是为了支持IOS6。

功能交互设计

  • 相册、扫码、GPS
  • 唤醒APP或者下载APP
  • 唤醒原生页面
  • 在新的webview中打开H5
  • 分享[图文、图片、小程序]

多场景判断和统一收口

  • 跳转地址方法
  • 设备环境判断
  • APP判断
  • 内嵌环境判断

版本和手机兼容

  • 全局在body元素上添加手机环境判断的className
  • 比如安卓手机按钮不居中问题
  • iPhoneX以及max底部按钮兼容

基于WebAssembly的移动端网页媒体解码

说实话我主要还是想了解下浏览器下WebAssembly接口的使用场景，以及未来发展方向。该主题主要内容如下：

WebRTC 各浏览器支持情况

详情：https://caniuse.com/#feat=rtcpeerconnection

AndroidIOS
H.264不支持12.1.4及以后版本支持
VP8支持12.2及以后版本支持

WebAssembly是什么

WebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式。

编译器的“前端”将高级编程语言转换为IR。编译器的“后端”将 IR 转换成目标机器的汇编代码
如果想在您的页面里上使用 WebAssembly，您需要将您的代码编译成 .wasm 文件

WebAssembly的优势

  • WebAssembly 提供了一种符合 W3C 标准的技术，从而可以取代那些私有的、非标的、安全性差的插件，如 Flash 和 Silverlight。
  • WebAssembly 使得有更多语言能够用于打造Web应用。
  • WebAssembly 使得Web应用具备了原生应用性能的可能性。

WebAssembly有什么不足

  • 运行速度快，但比不上原生
  • 只适合计算任务重的场景
  • 需要用户下载.wasm文件

推荐的WASM方案

  • 桌面端主流浏览器继续使用原生WebRTC
  • 移动端Webview使用WASM来解码H.264
  • 利用WebGL和WebAudio完成最后的渲染

开发流程 – 项目结构

  • 传输层（WebSocket/DataChannel/WebTransport）
  • 解码层（使用WASM编译C的264解码库）
  • 渲染层（WebGL+WebAudio）

开发流程 – 编译H.264的解码器

  • Emscripten：一个C/C++到WASM的编译工具链
  • Broadway：一个基于H.264BSD的WASM解码器
  • FFmpeg：目前最好的264软解

开发流程-编译RTS的Decoder代码

使用emcc编译对接JS层API的decoder代码到bitcode，最后再使用emcc将这些bitcode链接并输出到wasm.

开发流程-解码流程

开发流程-WebGL渲染器

  • 核心就是一个渲染YUV贴图的Fragment Shader
  • 避免使用2DCanvas（yuv -> rgb开销）
  • 需要处理crop/rotate等情况

开发流程-WebAudio播放

  • 不需要使用ScriptProcessNode
  • 需要实现AudioBufferNode的调度播放
  • 推荐的Buffer大小是20ms左右
  • 可以利用强大的WebAudio实现后处理

性能及兼容性表现

虽然大部分浏览器支持WASM，但是为了更广泛的兼容性，我们需要一个fallback的方案。

asm.js – 一个WASM的替代方案

  • 编译流程和WASM基本一致，只是输出的是JS文件而不是二进制的WASM文件
  • 内部通过一个大Uint8Array来模拟内存
  • 通过JS实现对这个Uint8Array的汇编指令
  • 大小通常是WASM文件的4~5倍

常见问题

  • 秒开策略（预加载/解码器反馈/IDR缓存）
  • 抗弱网（带宽估计）
  • WASM/ASM缓存(indexDB/浏览器缓存)
  • 音视频同步
  • 解码器压力检测

展望未来-接下来做什么

  • 支持VP8/AAC解码
  • 利用WebGL可以实现美颜的后处理
  • 利用WebAudio可以实现声音的后处理
  • 使用DataChannel替代WebSocket，通过UDP传输音视频包
  • 利用WASM将WebRTC的带宽估计/接收端反馈等罗技应用到项目中
  • …

其他案例

WebAssembly案例，是我在网络查找相关资料时看到的，罗列此处，拓展WebAssembly应用场景思维。

  • Google Earth — 支持各大浏览器的 3D 地图，而且运行流畅(貌似百度地球也在使用了？)
  • Egret Engine — 最受欢迎的 HTML 5 游戏引擎，让游戏引擎快三倍
  • Web-DSP — 使用浏览器就能即时制作多媒体影音特效
  • Walt — 用 JavaScript 语法也能快速开发原生的极速应用

无处不在Flutter：Flutter在多平台应用的探索

注：该主题因之前没做太多功课，并且兴趣不大，故没有太多详细记录，仅梳理几个问题备忘。

问题

  • Flutter和React Native的区别？
  • Flutter和Electron的区别？

留以后思考~~

参考