小程序旋转手机推流,远端拉流画面被裁剪的问题

2022-04-21 11:03:45 浏览数 (1)

由于重力感应的影响,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)
        }
      })

0 人点赞