微信小程序-实现录制视频（附部分代码）

拼搏现实的明天。 2022-12-10 01:29 185阅读 0赞

### 项目中，需要客户录制一段视频，上传到服务器，找了很久，终于实现了这个功能。微信小程序有两种方式可以实现录制视频。 ###

1.使用相机的CameraContext.startRecord  
2.使用官方API：wx.chooseVideo  
**方法一**  
wxml

js部分代码

onLoad: function (options) {
        //调用设置相机大小的方法
        this.setCameraSize();
        this.ctx = wx.createCameraContext();
      },
      /**
       * 获取系统信息 设置相机的大小适应屏幕
       */
      setCameraSize() {
        //获取设备信息
        const res = wx.getSystemInfoSync();
        //获取屏幕的可使用宽高，设置给相机
        this.setData({
          cameraHeight: res.windowHeight,
          cameraWidth: res.windowWidth
        })
        console.log(res)
      },
      /**
       * 开始录像的方法
       */
      startShootVideo() {
        this.setData({
          videoSrc: ''
        })
        console.log("========= 调用开始录像 ===========")
        let that = this
        this.ctx.startRecord({
          timeoutCallback: () => {
          },
          success: (res) => {
          },
          fail() {
            wx.showToast({
              title: '录像失败',
              icon: 'none',
              duration:4000
            })
            console.log("========= 调用开始录像失败 ===========")
          }
        })
      },
      /**
       * 结束录像
       */
      stopShootVideo() {
        wx.hideLoading();
        // console.log("========= 调用结束录像 ===========")
        this.ctx.stopRecord({
          compressed: true, //压缩视频
          success: (res) => {
            console.log(res)
            this.setData({
              videoSrc: res.tempVideoPath
            })
          },
          fail() {
            wx.showToast({
              title: '录像失败',
              icon: 'none',
              duration:4000
            })
            console.log("========= 调用结束录像失败 ===========")
          }
        })
      },
    
      //touch start 手指触摸开始
      handleTouchStart: function (e) {
        this.setData({
          startTime: e.timeStamp
        })
      },
    
      //touch end 手指触摸结束
      handleTouchEnd: function (e) {
        // wx.hideLoading();
        let endTime = e.timeStamp;
        //判断是点击还是长按 点击不做任何事件，长按 触发结束录像
        if (endTime - this.data.startTime > 350) {
          //长按操作 调用结束录像方法
          this.stopShootVideo();
        } else {
          this.setData({
            textFlag: ''
          })
        }
    
      },
    
      /**
       * 长按按钮进行录像
       */
      handleLongPress: function (e) {
        // 长按方法触发，调用开始录像方法
        this.startShootVideo();
      },

**注：由于官方限制，只能录制30秒。**

**方法二**  
在js中

wx.chooseVideo({
      sourceType: ['album','camera'],
      maxDuration: 60,
      camera: 'back',
      success(res) {
        console.log(res.tempFilePath)
      }
    })

使用wx.chooseVideo拍摄视频或从手机相册中选视频,拍摄界面不能自定义。  
如果有什么不清楚的地方，欢迎私信哦.  
具体参数说明请参考官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html(][https_developers.weixin.qq.com_miniprogram_dev_api_media_video_wx.chooseVideo.html]链接地址)

作者：IU憨憨  
链接：https://www.jianshu.com/p/1fdbe12ce477  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_developers.weixin.qq.com_miniprogram_dev_api_media_video_wx.chooseVideo.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fmedia%2Fvideo%2Fwx.chooseVideo.html%28