微信小程序之音视频踩坑

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

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

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

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

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

相关推荐
ᥬ 小月亮10 分钟前
webpack基础
前端·webpack
YongGit29 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js