methods:{//拦截点击在live-pusher上,避免出现聚焦框over(){return},}//定位遮挡.dingwei{position:absolute;top:0rpx;width:557rpx

微信小程序进行音视频开发,主要会用到live-playerlive-pusher,这两个媒体组件.在开发的过程中,会遇到各种各样的问题,其中最直接的就是黑屏问题,以下就这个问题进行整理.文档:https://developers.weixin.qq.com/miniprogram/dev/component/live-player.htmlhttps://developers.weixin.qq.

一、背景目标视频会议系统与微信小程序的live-pusher和live-player标签互通，而底层需求是webrtc与rtmp进行互通。

小程序端使用的是live-pusher组件来实现。

1、live-pusher只能在.nvue中触发。2、.nvue中无法使用flex，相对定位等样式。3、live-pusher只支持微信小程序。

前言：小程序中实现直播功能。是小程序内部用于支持音视频上行能力的功能标签版本支持微信AppiOS最低版本要求：6.5.21。微信AppAndroid最低版本要求：6.5.19。小程序基础库最低版本要求：1.7.0。使用限制出于政策和合规的考虑，微信暂时没有放开所有小程序对和标签的支持：个人账号和企业账号的小程序暂时只开放如下表格中的类目：主类目子类目小程序内容场景社交直播涉及娱乐性质，如明星直播、

后面又想用live-pusher组件来实现，但是发现快照api好像需要真实流地址才能截取图像。因为种种原因，也是安卓ios双端兼容性不佳。最终决定采用5+api实现。

推拉流：APP使用uniapp的live-pusher推流，video拉流。（总体来说，不建议使用uniapp,最好用安卓开发，否则坑很多）平台集成了srs流媒体服务器上的webrtc方法推流拉流。

https://developers.weixin.qq.com/miniprogram/dev/api/media/live/wx.createLivePusherContext.html开通标签使用权限：live-pusher

最后查到可以用live-pusher实时音视频录制完成。并且创建的是.nvue拍完照之后，压缩图片并且转base64数据，最后传给上页面显示出来。

小程序的live-pusher是属于原生组件，不能使用dom覆盖，只能使用官方提供cover-view、cover-image解决此问题：1.出现黑屏一般分三种情况：（1）推流不成功；（2）权限授权不成功

后面又想用live-pusher组件来实现，但是发现快照api好像需要真实流地址才能截取图像。因为种种原因，也是安卓ios双端兼容性不佳。最终决定采用5+api实现。

只支持嵌套cover-view、cover-image、button（模拟器没问题，真机不可用，这是真的坑）所以有覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher

完整微信小程序(Java后端)技术贴目录清单页面（必看）实时音视频录制（v2.9.1起支持同层渲染）。需要用户授权scope.camera、scope.record。暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。一级类目/主体类型二级类目小程序内容场景社交直播涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后

最近在做用微信小程序实现实时通话，一个页面同时使用了live-pusher和live-player。中途踩了许多坑，在这里做一下总结，希望能帮到大家。问题：Live-player播着播着没声音了。

最近开发小程序视频会议，发现通过apiwx.createLivePusherContext()创建LivePusherContext之后，只能暂停背景音，或者切换摄像头，并没有关闭摄像头而打开背景音的方法：方法LivePusherContext.start()播放推流LivePusherContext.stop()停止推流LivePusherContext.pause()暂停推流LivePushe

cover-view、cover-image这两类覆盖组件用于显示在一些特殊组件上方（map、video、canvas、camera、live-player、live-pusher）。

最近在做用微信小程序实现实时通话，一个页面同时使用了live-pusher和live-player。中途踩了许多坑，在这里做一下总结，希望能帮到大家。

一：小程序代码端小程序直播使用小程序组件live-pusher组件和live-player组件首先开通直播权限小程序开发工具内进行推流拉流都不会成功，所以需要使用两个手机进行推拉流测试；1.github

map、video、canvas、camera、live-player、live-pusher等组件，

一：小程序代码端小程序直播使用小程序组件live-pusher组件和live-player组件首先开通直播权限小程序开发工具内进行推流拉流都不会成功，所以需要使用两个手机进行推拉流测试；1.github

2、在小程序wxml页面使用live-pusher标签进行推流，目前小程序推流地址只支持rtmp格式，点击推流按钮之后进行推流。开始推流3、js先在onready里面实例

在全屏后的live-player上加视图，安卓机无法展示的问题3）解决live-player放在scroll-view上的问题4）live-player上下滑动漏出黑底问题2、关于live-pusher1）live-pusher

上述功能需要用到两个小程序媒体组件中的两个：live-pusher与live-player。下文简单介绍两这个组件的基础知识。仅可以带你入门，如果是高手请绕行。

关于订阅四、自定义自播前言小程序直播功能，分为使用官方自带的直播组件(live-player-plugin,无需二次开发，开箱即用)，另一种就是使用自己服务器的流，自定义直播组件（live-player、live-pusher

接入小程序直播需要直接使用微信小程序的live-pusher和live-player组件；这两个组件暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限

可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher只支持嵌套cover-view、cover-image，可在cover-view中使用button

live-pusher直播

cover-view覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image

cover-view：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括：map（地图）、video（视频）、canvas（画布）、camera（系统相机）、live-pusher（实时音视频播放），只支持嵌套