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

相关推荐
HuYi_code36 分钟前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
一匹电信狗2 小时前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio
2501_915921432 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082854 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐4 小时前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
LB21125 小时前
苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
小程序
peachSoda75 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
ღ᭄ꦿ࿐Never say never꧂6 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀8 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app