RTC开发者社区&GDG-前端技术沙龙

前端技术专场

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

主题

  • 多端多场景下的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的区别?

留以后思考~~

参考

这篇文章目前没有评论。

回复

(必填项)

(必填项)

(可选)