
<template>
<view>
<!-- 使用 <camera> 组件来预览摄像头 -->
<camera :device-position="cameraPosition" style="width: 100%; height: 400px;"></camera>
<!-- 拍照按钮 -->
<button @tap="takePhoto">拍照</button>
<!-- 录像按钮 -->
<button @tap="startRecording" v-if="!isRecording">开始录像</button>
<button @tap="stopRecording" v-if="isRecording">停止录像</button>
</view>
</template>
<script>
export default {
data() {
return {
cameraPosition: 'back', // 摄像头位置,'front'表示前置摄像头,'back'表示后置摄像头
isRecording: false, // 录像状态
cameraContext: null, // 摄像头上下文对象
};
},
mounted() {
// 获取摄像头上下文对象
this.cameraContext = uni.createCameraContext();
},
methods: {
// 拍照操作
takePhoto() {
this.cameraContext.takePhoto({
success: (res) => {
// res.tempImagePath 是拍照后的临时文件路径,可以在此处进行处理
console.log('拍照成功', res.tempImagePath);
},
fail: (err) => {
console.error('拍照失败', err);
},
});
},
// 开始录像操作
startRecording() {
this.cameraContext.startRecord({
success: () => {
console.log('开始录像');
this.isRecording = true;
},
fail: (err) => {
console.error('开始录像失败', err);
},
});
},
// 停止录像操作
stopRecording() {
this.cameraContext.stopRecord({
success: (res) => {
// res.tempVideoPath 是录像后的临时文件路径,可以在此处进行处理
console.log('停止录像', res.tempVideoPath);
this.isRecording = false;
},
fail: (err) => {
console.error('停止录像失败', err);
this.isRecording = false;
},
});
},
},
};
</script> 网友回复


