问题描述

项目主要是把在把canvas录制成为视频 用到了 three.js 以及 wx.createMediaRecorder() ，问题主要是 部分手机 出现视频录制启动器启动失败 以及 录制出来的视频是全黑的

经过测试调整发现是three.js 设置引发的录制器bug

       initThree(){
        ........ // 初始化camera scene reneder等
    // renderer.setPixelRatio(1);
    renderer.setSize(canvas.width , canvas.height);
    // 1. 如果设置renderer宽高 超过 canvas 宽高  mediaRecord.start() 会启动失败
    // 2. 如果设置 如果设置renderer.setPixelRatio() 为 2 以上 部分手机会导致录制出来的视频黑屏  或者 mediaRecord.start() 会启动失败
       }

 // 创建启动器  
createRecorder(canvas, fps = 30) {
    try {
      let OP = {
        'fps': fps,
        'gop': 12,
        'timeUpdateInterval': fps,
        'cumulativeStamp': false,
        'videoBitsPerSecond': 3000
      };
      console.log(this.videoRecorder, 'videoRecorder info');
      if(!this.videoRecorder) {
        this.videoRecorder = wx.createMediaRecorder(canvas, OP);
      }
      this.videoRecorder.on('start', () => {
        console.log('录制开始')
      });
    } catch (err) {
      console.log(err)
    }
 }
// 开始录制
async start(music) {
    if (this.videoRecorder) {
      console.log(this.videoRecorder.start,'this.videoRecorder.start__')
      await this.videoRecorder.start().catch(err => {
        console.log('recorder启动失败', err);
        wx.showModal({
          title: '提示',
          content: '录像机启动失败，请重新打开该页面',
          showCancel: false,
          success (res) {
            wx.redirectTo({
              url: '/pages/index/index',
            })
          }
        })
      })
      this.recordStartTime = +new Date()
      this.recording = true
      this._started = true
    }
}

出现问题的手机

1. 华为鸿蒙系列 出现录制出来的视频黑屏的几率很大
2. ColorOS 出现启动器启动失败 或者 视频黑屏