+
102
-

回答

完整的代码如下:

wxml

<view class="container">
  <camera device-position="back" flash="off" class="camera"></camera>
  
<view class="btngroup">
    <button bindtap="startRecording">开始录制</button>
  <button bindtap="stopRecording">停止录制</button>
</view>
  <video wx:if="{{videoSrc}}" src="{{videoSrc}}" controls></video>
</view>

js

Page({
    data: {
     
      videoSrc: '',
      isRecording: false
    },
  
    onLoad: function() {
      
    },
  
    
    startRecording: function() {
      const that = this;
      const cameraContext = wx.createCameraContext();
      cameraContext.startRecord({
        success: (res) => {
          console.log('开始录制视频');
          that.setData({
            isRecording: true
          });
        },
        fail: (error) => {
          console.error('开始录制失败:', error);
          wx.showToast({
            title: '开始录制失败',
            icon: 'none'
          });
        }
      });
    },
  
    stopRecording: function() {
      const that = this;
      const cameraContext = wx.createCameraContext();
      cameraContext.stopRecord({
        success: (res) => {
          console.log('录制视频成功');
          that.setData({
            isRecording: false,
            videoSrc: res.tempVideoPath
          });
          that.saveVideo(res.tempVideoPath);
        },
        fail: (error) => {
          console.error('停止录制失败:', error);
          wx.showToast({
            title: '停止录制失败',
            icon: 'none'
          });
        }
      });
    },
  
    saveVideo: function(videoPath) {
      const that = this;
      wx.showLoading({
        title: '正在处理视频',
      });
  

      wx.saveVideoToPhotosAlbum({
        filePath: videoPath,
        success: function(res) {
          wx.hideLoading();
          wx.showToast({
            title: '视频已保存',
            icon: 'success'
          });
        
        },
        fail: function(error) {
          wx.hideLoading();
          console.error('保存视频失败:', error);
          wx.showToast({
            title: '保存视频失败',
            icon: 'none'
          });
        }
      });
    }
  });

wxss

.container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  .camera {
    width: 100%;
    height: 100%;
  }
  

  
  .btngroup {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

网友回复

我知道答案,我要回答