更新记录
1.0.2(2025-08-19)
update
1.0.1(2025-08-19)
改为适配 vue3
1.0.0(2025-08-14)
初版摄像头预览组件
查看更多平台兼容性
uni-app(3.1.0)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | 7.0 | 12 | × |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
uni-app x(3.1.0)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | 7.0 | 12 | × | - |
native-camera
UniApp UTS 原生摄像头组件插件
使用方法
<template>
<view class="container">
<native-camera ref="camera" style="flex: 1" />
<view class="controls">
<button @click="openCamera">打开前置摄像头</button>
<button @click="closeCamera">关闭摄像头</button>
</view>
</view>
</template>
<script>
export default {
methods: {
openCamera() {
this.$refs.camera.openFrontCamera()
},
closeCamera() {
this.$refs.camera.closeFrontCamera()
}
}
}
</script>
主要功能
- 前置摄像头预览
- 摄像头控制(打开/关闭)
- 跨平台支持(Android/iOS)
- 自动权限处理
组件API
方法名 | 说明 |
---|---|
openFrontCamera() |
打开前置摄像头 |
closeFrontCamera() |
关闭摄像头 |
平台支持
- Android: 基于 CameraX (最低SDK 24)
- iOS: 基于 AVFoundation (最低版本 12.0)
权限配置
Android
<uses-permission android:name="android.permission.CAMERA" />
iOS
<key>NSCameraUsageDescription</key>
<string>App需要访问您的摄像头</string>