- 当前 Bug 的表现(可附上截图)
非全屏
全屏
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
index.wxml页面
<view class='container-box'>
<view class='camera-view'>
<live-player
style="width: 100%;height: 100%;"
id="camera-player"
src="rtmp://192.168.2.50:1937/camera/2"
mode="RTC"
orientation="vertical"
object-fit="contain"
background-mute="false"
autoplay='true'
bindstatechange="onCameraPlayEvent"
bindfullscreenchange="cameraFullscreenChange">
<cover-image class="button_bottom" src="../../images/full.png" bindtap='cameraFullscreenClick'></cover-image>
</live-player>
</view>
<view style='height:0.5%;'></view>
<view class='camera-view'>
<live-player
style="width: 100%;height: 100%;"
id="camera-player1"
src=""
mode="RTC"
orientation="vertical"
object-fit="contain"
background-mute="false"
autoplay='false'
indstatechange="onCamera1PlayEvent"
bindfullscreenchange="camera1FullscreenChange">
<cover-image class="button_bottom" src="../../images/full.png" bindtap='camera1FullscreenClick'></cover-image>
</live-player>
</view>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
firstshow: true,
cameraData: {
cameraPlayUrl: '',
cameraPlayCxt: {},
isFullscreen: false,
},
camera1Data: {
cameraPlayUrl: '',
cameraPlayCxt: {},
isFullscreen: false,
},
mute: false,
},
onCameraPlayEvent: function (ret) {
this.playEvent(ret.detail.code);
},
onCamera1PlayEvent: function (ret) {
this.playEvent(ret.detail.code);
},
playEvent(code) {
},
cameraFullscreenChange: function () {
this.setData({
['cameraData.isFullscreen']: !this.data.cameraData.isFullscreen
});
},
camera1FullscreenChange: function () {
this.setData({
['cameraData1.isFullscreen']: !this.data.cameraData1.isFullscreen
});
},
cameraFullscreenClick: function () {
console.log(1);
if (this.data.cameraData.isFullscreen) {
this.data.cameraData.cameraPlayCxt.exitFullScreen();
} else {
this.data.cameraData.cameraPlayCxt.requestFullScreen({ direction: 90 });
}
},
camera1FullscreenClick: function () {
console.log(1);
if (this.data.cameraData1.isFullscreen) {
this.data.cameraData1.cameraPlayCxt.exitFullScreen();
} else {
this.data.cameraData1.cameraPlayCxt.requestFullScreen({ direction: 90 });
}
},
createPlayCxt: function () {
this.setData({
['cameraData.cameraPlayCxt']: wx.createLivePlayerContext('camera-player'),
['cameraData1.cameraPlayCxt']: wx.createLivePlayerContext('camera-player1'),
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var self = this;
this.createPlayCxt();
this.data.firstshow = false;
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var self = this;
// 保持屏幕常亮
wx.setKeepScreenOn({
keepScreenOn: true
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log("onhide");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
})
index.css
page{
background-color:#f3f3f3;
}
.container-box{
height: 100vh;
width: 100%;
}
.camera-view{
/* height: 54.5%; */
height: 30.5%;
}
.camera-blank{
height: 0.5%;
}
.button_bottom
{
position: absolute;
top:0px;
left: 0px;
z-index: 11111;
width: 48px;
height: 48px;
display:inline-block;
}
麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
wechatide://minicode/TpbmsUmY7m1C
是wechatide://minicode/TpbmsUmY7m1C这个吗?
你好 请问下你们复现这个问题了吗
你好,问题已复现,我们后续版本来修复
同问,解决了吗,全屏后真的是各种问题,IOS全屏前cover-view可以覆盖在live-player上,全屏后就不能覆盖了。
这里是两个live-player;其中一个src可以播,另一个src暂时给空,将可以播的live-player全屏 出现上面现象
问题解决了嘛??我也遇到了,全屏各种bug,页面样式乱跑