微信小程序之音视频踩坑

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

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

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里面的参数的?

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

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

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐4 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄5 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
程序员入门进阶6 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser7 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la7 小时前
vue的样式知识点
前端·javascript·vue.js