微信小程序之音视频踩坑

  • 产品:需要做个音视频相关的产品
  • 我:哇哦,那可太兴奋了,没有做过的领域,那肯定非常有意思?
  • 产品: 巴拉巴拉过需求
  • 我:吭哧吭哧写需求,为什么这么多坑???

下面来介绍一下遇到的坑:

1.微信原生组件swiper 在IOS中可能造成滑动时swiper-item上文字闪动消失?

解决方案:文字闪动的标签上加上样式will-change: transform;

2.live-player有时候会出现黑屏?

解决方案:用wx-if进行销毁再重新渲染

3.之前都正常,忽然有一天用授权摄像头,声音授权的时候报错"{ "errMsg": "A:fail api scope is not declared in the privacy agreement", "errno": 112 }"?

解决方案:使用到了 A 隐私接口,但是开发者未在[mp后台-设置-服务内容声明-用户隐私保护指引]中声明收集 A 接口对应的隐私类型。补充的隐私类型声明, 将在5分钟后生效。

4.样式穿透问题,微信小程序原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的层级是最高的,页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上?

解决办法: 最靠谱的解决方法是弹出时,就把input框设置为view框,不能单纯的隐藏掉input框,因为当页面滑倒弹出框没有遮住的位置时,就什么都看不到了,这样也算是bug。

5.微信小程序有的组件固定在顶部,如果写死高度,每个手机高度不一致,导致不兼容?

解决方案: view都设置一个id属性,动态获取view高度

js 复制代码
let query = wx.createSelectorQuery().in(this)
          query.select('#search').boundingClientRect().exec(function(res) {
  console.log("rect", res[0].height)
})

6.live-player获取网络质量,远端断网,获取的网络质量还是1(网络很好的状态)?

暂时还没解决:我们换了另一种方案

7.live-player比live-pusher先展示,进房之后远端会黑屏,远端还会收到我本端退房的消息?

暂时还没解决,换方案了

8.如果不打开调试工具,不配置合法域名,这个项目会跑不起来

解决方案: 老老实实去微信公众平台上-开发管理-开发设置-服务器域名上设置下

9.不是合法的域名,在本地怎么开发?

解决方案: 微信开发者工具-右上角详情-本地设置-勾上不校验合法域名那个选项

10.有的时候ios手机上好的,安卓手机上运行报错?

解决方案:我发现我的代码有可能会同步,所以我改成了异步,但是不知道为啥ios为啥一直ok

11.小程序切后台后,远端一直收到小程序退房消息(集成的腾讯音视频)?

解决方案:在页面存在 mode='RTC' 的 live-pusher 和至少一个 live-player 时,小程序在后台运行的情况下可以正常采集和播放音频,否则小程序在切后台时会终止音视频通话。

  • 看下这两个组件是不是都设置了mode='RTC',我心大,以为默认RTC呢

  • 看下是否页面存在live-pusher 和至少一个 live-player

12.wx.uploadFile在微信真机调试看参数的时候,你是看不到formData里面的参数的?

解决方案:无,虽然看不到参数,但好在他传到服务端了,不慌

最后:有的想不起来了,再遇到继续更新

相关推荐
我是苏苏28 分钟前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙1 小时前
Vue插槽
前端·vue.js
用户6387994773052 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT2 小时前
React + Ts eslint配置
前端
开始学java2 小时前
useEffect 空依赖 + 定时器 = 闭包陷阱?count 永远停在 1 的坑我踩透了
前端
zerosrat2 小时前
从零实现 React Native(2): 跨平台支持
前端·react native
狗哥哥2 小时前
🔥 Vue 3 项目深度优化之旅:从 787KB 到极致性能
前端·vue.js
青莲8432 小时前
RecyclerView 完全指南
android·前端·面试
青莲8432 小时前
Android WebView 混合开发完整指南
android·前端·面试
GIS之路2 小时前
GDAL 实现矢量数据转换处理(全)
前端