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.微信小程序必须真机测试摄像头

相关推荐
paopaokaka_luck35 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所3 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck3 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场4 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld4 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json5 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球6 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域8 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域11 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero18 小时前
微信小程序71~80
微信小程序·小程序