由于重力感应的影响,Android小程序推流旋转手机,远端拉到的画面被裁剪;小程序没有开放重力感应的API,只能通过如下方式规避:
目前现象:
1、Android手机横屏拍摄,如果不设置横屏推流,PC拉流画面则不完整;竖屏拍摄则需要设置竖屏推流;
2、iOS横屏拍摄,不设置横屏分辨率,PC拉流画面完整。设置横屏分辨率,画面不完整;
总结:小程序横屏拍摄,如果需要拉流端观看画面完整,Android需要设置横屏分辨率,iOS不用设置;小程序竖屏排查则需要设置竖屏推流;
Android手机横屏,远端拉到的画面:
修改前:
修改后:
建议方案:
1、先通过小程序接口wx.getSystemInfo 获取当前设备是android还是ios;
2、再通过wx.onDeviceMotionChange监听设备方向变化
①如果当前是android设备,手机横屏时就设置videoOrientation设置为horizontal推流;
手机竖屏时就设置videoOrientation设置为vertica推流;
②如果当前是ios设备,就设置videoOrientation设置为vertica推流;
这样可以保证远端拉流画面不被裁剪
代码段如下
代码语言:javascript复制const that = this
wx.getSystemInfo({
success (res) {
if (res.platform == "ios"){
if (that.data.localVideo) {
console.log(that)
that.setPusherAttributesHandler({videoOrientation: 'vertical'})
}
console.log("111111111")
}else if (res.platform == "android"){
//监听设备方向变化
wx.startDeviceMotionListening({
success(){
wx.onDeviceMotionChange((result) => {
// console.log("旋转",result.gamma);
if(result.gamma < -40 || result.gamma > 40){
//手机横屏
console.log("手机横屏使用");
that.setPusherAttributesHandler({videoOrientation: 'horizontal'})
} else{
that.setPusherAttributesHandler({videoOrientation: 'vertical'})
}
})
}
})
}
console.log("判断系统",res.platform)
}
})