做后端的我在公司造了一个前端轮子,领导:嘿!你他娘的真是个天才。

这篇文章记录了公司研发小组对接摄像头硬件厂商的经历、摄像头厂商提供的sdk支持H5但是不支持我们自己的业务app,我们的app是用uniapp来开发的,这种uniapp混搭不支持厂商的原生接入。基于这个大背景,后端开发的我做了一个前端sdk解决这个特殊的需求。

需求背景

众所周知,uniapp是国内一款大众化、号称多端发布的响应式前端框架。公司最近对接了一个摄像头硬件厂商,厂商提供了SDK,SDK支持H5、Android、小程序。我们的目标是将这个硬件对接到我们自己的业务app上,我们的app是用uniapp来写,打包apk的。

问题产生

我们自己的app是uniapp来写的,uniapp主要封装的是Vue2语法,再对接摄像头做视频直播功能的时候,发现uniapp并不支持这种对接,在厂商提供的依赖包里dom获取navcas画布元素的时候获取的元素不对,导致即便你调通了接口,视频画面也不会显示出来。如果只是用H5写,这个功能是可以做的,但是我们公司的要求是一定要用uniapp来实现,一定要uniapp打包apk,这就导致常规开发实现不了摄像头功能。

如上图,前端控制台其实显示出来没有报错,执行也是成功的,但是前端出不来视频效果。

问题根源

uniapp再做视频画面渲染的时候封装了一个canvas标签:

我们的前端工程师再获取到里面的canvas标签以后还是不支持这种视频展示的效果。

结论

我们找的这个视频硬件厂商根本就不支持uniapp这种能够多端发布的框架做技术连接。硬件厂商技术支持工程师DeepSeek了很多方案也解决不了我们的需求。

我的解决方案

我的解决方案就是先用Vue3写了一个H5应用,按照官方的文档先写一个视频播放的H5应用demo。再在uniapp项目中通过webview的方式把前面的H5应用嵌入到我们uniapp中。把中间这个H5应用作为一个sdk,在里面写视频播放、音频播放等业务,再把这个sdk上传服务器。上传服务器有个好处,当你打包uniapp的时候,uniapp webview的页面就是这个服务器上的sdk!如果不这样做,你打包成apk以后看到的页面是空白页面。

这种解决方案在我看来就是比较鸡贼,属于没路走了乱搞一个路出来。我们目前这个产品只是做试点,走一个流程,要的不是质量,而是流程,所以能最快解决问题就行。

相关推荐
qq. 28040339847 小时前
CSS层叠顺序
前端·css
喝拿铁写前端7 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.7 小时前
vue 路由
前端·javascript·vue.js
烛阴8 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91538 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing8 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学8 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪8 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡8 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪9 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试