更新记录
1.0.0(2026-10-04)
支持打开前后摄像头,拍照,录像,闪光灯,变焦,浮窗
平台兼容性
uni-app(3.8.5)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(3.8.5)
| Chrome |
Safari |
Android |
Android插件版本 |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
5.0 |
1.0.0 |
- |
- |
- |
其他
| 多语言 |
暗黑模式 |
宽屏模式 |
蒸汽模式 |
| √ |
√ |
√ |
× |
fa-camera 插件使用说明
功能简介
fa-camera 是 uni-app nvue 原生摄像头组件(UTS 插件),基于 Android Camera2 实现,提供完整的摄像头预览与拍摄能力:
- 摄像头与预览尺寸查询
- 打开 / 释放相机预览
- 拍照(JPEG 文件路径或 Base64)
- 静默获取当前帧
- 视频录制(MP4 / H.264 / AAC)
- 前后摄像头切换
- 点击聚焦、双指缩放
- 常亮闪光灯控制
平台支持
| 平台 |
支持情况 |
要求 |
| Android |
✅ 已支持 |
Android 4.4(API 19)及以上,基于 Camera2 |
| iOS |
🕒 计划中 |
暂未提供 |
| 其他平台(Web / 小程序 / 鸿蒙) |
❌ 不支持 |
— |
本插件为 uni-app 兼容模式组件(UTS 组件),仅支持在 uni-app 项目的 nvue 页面中使用;不支持 uni-app x,不支持 App 的 vue 页面(非 nvue)。
环境要求
- HBuilderX 3.6.18 及以上(UTS 组件最低要求)
- 运行、云打包或自定义基座调试均可;真机验证需使用包含该插件的自定义基座或云打包
接入方式
- 在 uni-app 项目中,通过 HBuilderX「插件市场」搜索 fa-camera 并导入(uni_modules 方式,无需在 manifest.json 的「App 原生插件配置」中操作)。
- 在 nvue 页面模板中引入组件:
<template>
<view class="page">
<fa-camera ref="camera" class="camera"
@openresult="onResult" @pictureresult="onResult" @cameraerror="onError" />
</view>
</template>
<style>
.camera {
width: 300px;
height: 400px;
background-color: #000000;
}
</style>
- 通过
this.$refs.camera 调用组件方法,异步结果通过组件事件(@事件名)返回,事件回调参数 event.detail 为结果对象。
本插件为原生组件,必须使用 nvue 页面(.nvue 文件);标准运行基座不包含原生插件,运行调试需使用自定义基座或云打包。
API 说明
公共约定:所有事件结果均包含 success 字段;失败时包含 code 与 message。结果通过 event.detail 获取。
组件方法
| 方法 |
参数 |
说明 |
openCamera() |
无 |
请求相机权限并打开预览,优先后置镜头 |
openCameraById(cameraId) |
摄像头 ID |
请求相机权限并打开指定摄像头预览 |
release() |
无 |
关闭预览并释放相机资源 |
getCameras() |
无 |
获取摄像头列表 { id, facing, orientation } |
getSupportedPreviewSizesByCameraId(cameraId) |
摄像头 ID |
查询指定摄像头的预览尺寸 |
getSupportedPictureSizesByCameraId(cameraId) |
摄像头 ID |
查询指定摄像头的拍照尺寸 |
getCurrentPreviewSize() |
无 |
查询当前已打开摄像头的预览尺寸 |
takePicture(options) |
base64、quality、flashMode 等 |
拍照,默认返回 JPEG 本地缓存路径 |
getCurrentImage(options) |
base64、quality |
静默获取当前预览画面,不打开拍照界面 |
startRecord(options) |
视频尺寸、码率、帧率等 |
请求麦克风权限并开始录像 |
stopRecord() |
无 |
停止录像,返回视频文件路径 |
switchCamera(cameraId) |
目标摄像头 ID |
切换摄像头,需已打开预览 |
setZoomFactor(value) |
缩放倍率 |
设置缩放,限制在 1 到设备最大倍率之间 |
getMaxZoomFactor() |
无 |
查询当前摄像头的最大数字缩放倍率 |
flashOpen() / flashClose() |
无 |
开启 / 关闭常亮闪光灯 |
组件事件
| 事件 |
触发时机 |
结果字段 |
@openresult |
openCamera / openCameraById 完成 |
success, cameraId, previewWidth, previewHeight, code, message |
@cameraerror |
摄像头连接中断 |
message 等 |
@camerasresult |
getCameras 完成 |
success, camerasJson, code, message |
@sizesresult |
尺寸查询完成 |
success, cameraId, kind, sizesJson, code, message |
@currentpreviewresult |
getCurrentPreviewSize 完成 |
success, cameraId, previewWidth, previewHeight, code, message |
@pictureresult |
takePicture 完成 |
success, img, code, message |
@currentimageresult |
getCurrentImage 完成 |
success, img, code, message |
@switchresult |
switchCamera 完成 |
success, cameraId, previewWidth, previewHeight, code, message |
@zoomresult |
setZoomFactor 或点击缩放完成 |
success, value, maxZoom, supported, code, message |
@maxzoomresult |
getMaxZoomFactor 完成 |
success, value, supported, code, message |
@flashresult |
flashOpen / flashClose 完成 |
success, flashOpen, supported, code, message |
@focusresult |
点击聚焦完成 |
success, code, message |
@recordstartresult |
startRecord 完成 |
success, cameraId, path, videoWidth, videoHeight, previewRestored, code, message |
@recordstopresult |
stopRecord 完成 |
success, path, videoWidth, videoHeight, previewRestored, code, message |
调用示例
// 打开预览(自动请求相机权限)
this.$refs.camera.openCamera()
// 获取摄像头列表
this.$refs.camera.getCameras()
// 拍照(返回 JPEG 缓存文件路径)
this.$refs.camera.takePicture({ base64: false, quality: 80 })
// 静默获取当前帧
this.$refs.camera.getCurrentImage({ base64: false, quality: 80 })
// 切换摄像头
this.$refs.camera.switchCamera(targetCameraId)
// 开始 / 停止录像
this.$refs.camera.startRecord({
videoWidth: 1280,
videoHeight: 720,
videoEncodingBitRate: 3000000,
videoFrameRate: 30
})
this.$refs.camera.stopRecord()
// 缩放与闪光灯
this.$refs.camera.setZoomFactor(2)
this.$refs.camera.flashOpen()
// 释放相机
this.$refs.camera.release()
// 监听事件(示例:拍照结果)
onPictureResult(event) {
const result = event.detail
if (result.success) {
console.log(result.img)
}
}
权限说明
| 权限 |
用途 |
申请时机 |
| 相机权限(CAMERA) |
打开摄像头预览、拍照、静默取帧、录像、切换镜头、闪光灯控制 |
调用 openCamera / openCameraById 时 |
| 麦克风权限(RECORD_AUDIO) |
录像时采集声音 |
调用 startRecord 时 |
权限被拒绝时,对应事件会返回 success: false 及可读错误信息(如 CAMERA_PERMISSION_DENIED、RECORD_AUDIO_PERMISSION_DENIED)。
注意事项
- 摄像头
id 是设备返回的标识,请结合 facing(back / front / external)使用,不要假定固定为 0 或 1。
- 拍照、取帧和录像文件写入应用缓存目录,属于应用私有存储,插件不会自动上传;缓存可能被系统清理,请及时处理文件。返回路径不带
file:// 前缀,用于上传或展示时按宿主 API 要求处理。
- 录像期间请勿同时执行拍照、切换镜头、缩放或闪光灯操作。
- 设备不支持数字缩放时,
@zoomresult / @maxzoomresult 返回 value: 1、supported: false。
- 插件不采集任何数据,不包含任何网络请求。