完整的代码如下:
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%); }
网友回复