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

相关推荐
腾马科技5 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
用户904706683579 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
郑叔敲代码10 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
细节控菜鸡10 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa10 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名13 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风14 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者814 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088914 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌15 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序