Web端录音拍照及音视频解决方案调研报告

前端拍照、录音、播放功能去Flash依赖化实现调研。(详细方案内容在做脱敏处理)

前言:

目前前端主流的四大浏览器内核:Trident(也称IE内核)、Chromium、Blink、Gecko。

因为主流移动端系统IOS、Android浏览器内核基于Chromium/webkit,并且移动端的跨端hybrid开发方案层出不穷,所以Chromium内核应用最广,连新版的Microsoft Edge也是基于Chromium内核设计,故Chromium内核有一统江湖的趋势。

调研背景:

目前公司的部分前端项目的录音、播放、拍照等功能依赖Flash框架。而Chrome表示,由于Adobe公司将于2020年底停止对Flash的更新,故新版的Chrome浏览器也将停止对Flash的支持。

基于以上原因,前端工程的去Flash化应未雨绸缪。

考虑到目前移动端很多业务采用hybrid方案(H5页面适配移动端,一套脚本三端运行。例如:频繁更新的运营推广页,手机M站等)。

故,前端工程的去Flash依赖动作应兼容移动端的hybrid技术方案。

基于以上,设立本次调研方向:
1、基于Vue构建的SPA应用拍照录音、音视频方案。
2、移动端开发中的hybrid解决方案。

解决方案:

一、基于Vue构建的SPA应用拍照录音、音视频方案:

二、移动web hybrid跨端解决方案:

尾语:

近年来,随着移动web应用native -> hybrid -> cross-platform的架构演进,跨端技术如React Native、Flutter异军突起。大前端技术主要想解决的问题其实就是如Java那样“write once,run anywhere”,为此Google还推出了Flutter For Web技术以期三端一统。
其中移动端利用webview 进行h5混合开发的技术手段虽在渲染效率和用户体验上照比跨端技术差。但在运营页,活动页等频繁更新的业务板块依然占有一席之地。所以前端工程应注意在移动设备上的兼容性。
以上为我“关于Web端拍照、录音以及音视频解决方案”的调研报告。
时间仓促,如有不足,敬请斧正。

参考文献:

1、https://plainnany.github.io/2017/06/13/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8%E7%AE%80%E4%BB%8B/

龙颜大悦,朕要赏赐!