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