双端 相机view 组件 支持自定义界面 拍照录像

插件 ID: 22709
来源: https://ext.dcloud.net.cn/plugin?id=22709
安卓 ios相机自定义view 组件 可自定义相机内容 支持拍照录像

---

更新记录

                                                    1.0.16（2025-09-16）

优化

                                                    1.0.15（2025-09-16）

优化

                                                    1.0.14（2025-09-11）

优化 查看更多

平台兼容性

uni-app(4.07)

| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 | | | √ | √ |

• |
• |
• | √ | √ | √ |
• | | | 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 | | |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• |
• | |

uni-app x(4.08)

| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 | | | × | × | √ | √ |

• |
• | |

xtf-cameraview

相机自定义组件 可拍照 录像

注意 uniapp 需要使用nvue

uniappx/uniapp

<xtf-cameraview
ref="camera"
style="width: 750rpx;
height: 750rpx;
"></xtf-cameraview>

设置摄像头预览方向

rotation

rotation 为 0 1 2

<xtf-cameraview
ref="camera"
rotation="1"
style="width: 750rpx;
height: 750rpx;
"></xtf-cameraview>

uniapp nvue退出摄像头页面时若发生闪退 需要在页面调用 下方代码

onBackPress() {
    var camera=this.$refs["camera"];
    camera.closeCamera()
}

import { takePic,startVideo } from '@/uni_modules/xtf-cameraview';

相机加载完成回调

@onCameraLoad="onCameraLoad"

onCameraLoad(){
}

获取相机对象

uniappx

var camera:XtfCameraviewElement=this.$refs["camera"] as XtfCameraviewElement

uniapp

var camera=this.$refs["camera"];

切换摄像头

camera.switchCamera(true);// true 后置

拍照

takePic(function(data:string){
})

开始录像

startVideo(function(data:string){
})

结束录像

camera.stopRecorder();

结束拍照

camera.stopRecorder();

暂停/继续 录像

camera.pauseResumeRecordering(true);//true 暂停  false 开启

是否正在录像

var b=camera.isRecordering();

闪光的

camera.setTorchEnable(on)//true 暂停  false 开启

关闭摄像头

camera.closeCamera()

开发文档

UTS 语法UTS API插件UTS uni-app兼容模式组件UTS 标准模式组件Hello UTS