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

1.uniapp中的index.vue代码

javascript 复制代码
<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

声明配置权限

java 复制代码
"mp-weixin" : {
        "appid" : "wx8********91",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
		"permission": {
		    "scope.camera": {
		      "desc": "需要获取摄像头权限进行拍照"
		    }
		  }
    },

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

相关推荐
汤姆yu7 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
雪芽蓝域zzs8 小时前
uniapp 国密sm2加密
uni-app
说私域14 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域17 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔17 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
打不着的大喇叭18 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui18 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮21 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
racerun21 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545821 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序