小程序旋转手机推流，远端拉流画面被裁剪的问题
原创小程序旋转手机推流，远端拉流画面被裁剪的问题
原创
jialuhu
发布于 2022-04-21 11:03:45
发布于 2022-04-21 11:03:45
由于重力感应的影响，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推流；
这样可以保证远端拉流画面不被裁剪
代码段如下
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)
}
})原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
实时音视频
实时音视频（Tencent RTC）基于腾讯21年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。