真机调试时会报这样的错

逻辑：选择视频后获取视频大小微信小程序 视频截图，然后绘制

记录代码

<view  style="display: inline-block;visibility:hidden; width: 300px; height: 200px;position:absolute;left:-999rpx; ">
    <canvas id="cvs1" canvas-id="mycanvas" type="2d" style="display: inline-block;border: 1px solid #CCC; width: 300px; height: {{h}}px;">canvas>
view>

let w = 300
let h = 200
chooseVideo() {
    let that = this;
    // wx.compressVideo({
    // })
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        // let image = res.thumbTempFilePath;
        console.log(res);
        h = res.height;
        w = res.width;
        console.log(h,w)
        that.setData({
          'publishInfo.video_thumb': '',
          'publishInfo.url': '',
          fileList: []
        })
        wx.showLoading({
          title: '上传中，请稍等',
          mask:true
        })
        wx.getVideoInfo({
          src:res.tempFilePath,
          complete(res){
            console.log(res)
          }
        })
        that.upload(res.tempFilePath).then(res => {
          that.setData({
            src: JSON.parse(res.data).message
          }, () => {
            wx.showLoading({
              title: '设置缩略图中',
              mask:true
            })
          })
          // that.data.fileList.push({
          //   url: image
          // });
          that.setData({
            'publishInfo.url': (JSON.parse(res.data).message),
          })
        });
      }
    })
  },
play(e) {
    this.draw()
  },
  draw() {
    let that = this;
    const dpr = wx.getSystemInfoSync().pixelRatio
    wx.createSelectorQuery().select('#video').context(res => {
      console.log('select video', res)
      const video = this.video = res.context
      wx.createSelectorQuery().selectAll('#cvs1').node(res => {
        console.log('select canvas', res)
        const ctx1 = res[0].node.getContext('2d')
        res[0].node.width = w * dpr
        res[0].node.height = h * dpr
        // setInterval(() => {
        ctx1.drawImage(video, 0, 0, w * dpr, h * dpr);
        // ctx1.draw(true)
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: w * dpr,
          height: h * dpr,
          destWidth: w * dpr,
          destHeight: h * dpr,
          canvas: res[0].node,
          success(e) {
            that.upload(e.tempFilePath).then(res => {
              console.log(res)
              that.data.fileList.push({
                url: JSON.parse(res.data).message
              });
              // that.setData({
              //   res11:e.tempFilePath
              // })
              that.setData({
                fileList: that.data.fileList,
                'publishInfo.video_thumb':JSON.parse(res.data).message
              })
            });
          },
          complete(e) {
            console.log(e)
            wx.hideLoading({
              complete: (res) => {},
            })
          }
        })
      }).exec()
    }).exec()
  },

缺点因为无法动态获取视频的实际大小，只能给出固定的宽高

更新：实现途中遇到的坑

1、真机调试时会报这个错误（只有真机调试才会出现）

2、第二个坑（结果是在电脑模拟器上运行正常微信小程序 视频截图，真机第一次、第二次及以后每次上传视频都拿不到封面）画布和视频只会被调用。初始化画布和视频，所以提前做一次，然后在需要时设置封面

代码

play(e) {
    if(this.data.publishInfo.type == 2){
      this.draw();
      setTimeout(()=>{
        this.draw(1);
      },500)
    }
  },
  draw(b) {
    console.log("bbbb",b)
    setTimeout(() => {
      let that = this;
      let ctx;
      const dpr = wx.getSystemInfoSync().pixelRatio
      wx.createSelectorQuery().select('#video').context(res => {
        console.log('select video', res)
        const video = this.video = res.context
        wx.createSelectorQuery().selectAll('#cvs1').node(res => {
          console.log('select canvas', res)
          const ctx1 = res[0].node.getContext('2d')
          ctx = res[0].node;
          res[0].node.width = w * dpr
          res[0].node.height = h * dpr
          // setInterval(() => {
          ctx1.drawImage(video, 0, 0, w * dpr, h * dpr);
          // ctx1.draw(true)
         
          setTimeout(() => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: w * dpr,
              height: h * dpr,
              destWidth: w * dpr,
              destHeight: h * dpr,
              canvas: ctx,
              success(e) {
                if(b == 1){
                  that.upload(e.tempFilePath).then(res => {
                    console.log(res)
                    that.data.fileList = [];
                    that.data.fileList.push({
                      url: JSON.parse(res.data).message
                    });
  
                    // that.setData({
                    //   res11:e.tempFilePath
                    // })
                    that.setData({
                      fileList: that.data.fileList,
                      'publishInfo.video_thumb': JSON.parse(res.data).message
                    })
                    wx.hideLoading({
                      complete: (res) => {},
                    })
                  });
                }
               
              },
              complete(e) {
                console.log(e)
            
              }
            })
          })
        }).exec()
      }).exec()
    })
  },

3、第三个坑是wxml的样式导致无法截图成功，调试测试起来更方便

之所以这样写，是因为我只想要截图的效果，不想在别处显示

<view style="position:absolute;top:0;left:-9999rpx">
	 <video style="" autoplay muted id="video" autoplay="{{true}}" controls="{{false}}" style="width: 300px; height: 200px;" src="{{src}}" bindplay="play" >video>
<view style="display: inline-block; width: 300px; height: 200px;">
    <canvas id="cvs1" canvas-id="mycanvas" type="2d" style="display: inline-block; border: 1px solid #CCC; width: 300px; height: {{h}}px;">canvas>
view>
view>