1.uniapp中的index.vue代码
<template><view class="content"><view class="container"><!-- 摄像头组件 --><camera id="camera" device-position="front" flash="off" binderror="onCameraError">333</camera><!-- 拍照按钮 --><button @click="takePhoto">拍照</button><!-- 显示拍照结果 --><image v-if="photo" :src="photo" mode="aspectFit"></image></view></view>
</template><script setup>
import {ref} from 'vue'
import demo1Vue from '../demo1/demo1.vue';const photo = ref('')const takePhoto = () => {const cameraContext = uni.createCameraContext(this); // 创建摄像头上下文cameraContext.takePhoto({quality: 'high', // 照片质量：high, medium, lowsuccess: (res) => {photo.value = res.tempImagePath; // 获取拍照后的图片路径console.log(photo.value)},fail: (err) => {console.log('拍照失败', err);}});}// 摄像头错误回调const onCameraError = (e) => {console.log('摄像头发生错误', e.detail);}
</script><style></style>
2.manifest.json
声明配置权限
"mp-weixin" : {"appid" : "wx8********91","setting" : {"urlCheck" : false},"usingComponents" : true,"permission": {"scope.camera": {"desc": "需要获取摄像头权限进行拍照"}}},
