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


