最近在做小程序视频客服这块的功能,按照官方或者是别人的写法,在拷贝的过程中存在一定的误区,具体误区为:
1、在使用live-player标签的过程中,自以为是你想的那样使用,最好是先看一两遍文档,一下是需要且多看几下的
2、官方组件live-player,在标签的开头和结尾需要注意的,具体例子下面例子有说有
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
3、在live-player的完善过程中,百度查询的一些代码存在一定的问题,比如官方提供了全屏的功能,但是有些地方可以看到需要写两套css来控制全屏;在开发者工具中全屏是不生效的,但是在真机是可以看得到效果的
例子:
小程序的标签嵌套:
<!-- 视频窗口 -->
<view class='win_player' style='height: {{vidoHeight}}px;' bindtap="quitFullScreen" hidden="{{hidden}}">
<live-player id="player" class='{{winstyle}}' src="http://pili-media.live-test.v2gogo.com/recordings/z1.v2gogo-live-test.620b18566a5d4848b6d8ca789a1120c3/1534301729.flv" mode="RTC" autoplay="true" bindstatechange="playerstatechange" binderror="error">
<cover-view class='full_img_idv' bindtap="fullScreen">
<cover-view wx:if="{{fullScreenFlag}}">
<cover-image src="../../images/vido/min.png" class='full_img' />
</cover-view>
<cover-view wx:else>
<cover-image src="../../images/vido/max.png" class='full_img' />
</cover-view>
</cover-view>
</live-player>
<live-pusher id="pusher" url="{{sendurl}}" mode="RTC" autopush="true" bindstatechange="pusherstatechange" />
</view>
js:全屏调用的方法
fullScreen: function() {
var that = this;
//全屏
var vidoHeight = wx.getSystemInfoSync().windowHeight;
var fullScreenFlag = that.data.fullScreenFlag;
if (fullScreenFlag) {
fullScreenFlag = false;
} else {
fullScreenFlag = true;
}
if (fullScreenFlag) {
//全屏
that.PlayerCtx.requestFullScreen({
success: res => {
that.setData({
fullScreenFlag: fullScreenFlag
});
console.log('我要执行了');
},
fail: res => {
console.log('fullscreen fail');
}
});
} else {
//缩小
that.PlayerCtx.exitFullScreen({
success: res => {
console.log('fullscreen success');
that.setData({
fullScreenFlag: fullScreenFlag
});
},
fail: res => {
console.log('exit fullscreen success');
}
});
}
},
展示效果:
以上需要注意的是标签的嵌套,嵌套不正确最终会导致在苹果手机上面有效,在安卓手机上面是无效的,以下标签嵌套反例子:
<view class="page-body">
<live-player autoplay id="player" src="rtmp://10566.liveplay.myqcloud.com/live/10566_70c8e4db829746af8c2ca766099d8bad"></live-player>
<cover-view class="cover-view">123</cover-view>
<button bindtap="fullScreen">全屏</button>
</view>
错误之处:以上的cover-view并不在live-player标签中嵌套,在苹果手机是正常显示,可以覆盖的效果,但是在安卓手机上面就会出现失效。
<view class="page-body">
<live-player autoplay id="player" src="rtmp://10566.liveplay.myqcloud.com/live/10566_70c8e4db829746af8c2ca766099d8bad"/>
<cover-view class="cover-view">123</cover-view>
<button bindtap="fullScreen">全屏</button>
</view>
错误之处:以上的代码代码中live-player与官方给出的文档一致,但是在安卓手机上面就是没有效果,在苹果手机上面是可以正常的展示,原因在并没有采用末尾标签</live-player>进行嵌套
以上为本人在开发过程中遇到的问题,如果有更好的办法,望小伙伴能一起分享下,谢谢。
有同学问我,PlayerCtx 是啥,我把我的onload贴出来,大家可以看下,如果还有疑问请留言沟通。
onLoad: function(options) {
var that = this;
var promise = new Promise(function(resolve, reject) {
app.getUserInfo(that.data.serviceAccount, resolve);
});
promise.then(arr => {
that.CameraCtx = wx.createCameraContext();
that.CameraCtx = wx.getRecorderManager();
that.PlayerCtx = wx.createLivePlayerContext('player');
that.PusherCtx = wx.createLivePusherContext('pusher');
that.PlayerCtx.play();
that.gainSession();
that.queryOrderInfo();
that.queryCarInfo();
}, error => {})
},