uniapp-微信小程序调用摄像头

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, low
		    success: (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": "需要获取摄像头权限进行拍照"
		    }
		  }
    },

3.微信小程序必须真机测试摄像头