cordova-plugin-camera-preview

插件简介

cordova-plugin-camera-preview 是一款功能强大的 Cordova 相机预览插件，提供实时相机预览、拍照 / 录像 / 压缩等核心能力，在OHOS系统中，调用原生相机，原生相机支持闪光灯、前后摄像头切换，焦距调整、美颜、保存到相册功能原生已实现，js侧无需手动调用，当前版本JS侧主要兼容启动相机、获取照片路径、Uri、压缩功能。

核心优势

• 全功能相机控制：支持拍照（静态图片）、录像（短视频）、闪光灯开关、焦距调节、曝光补偿

• 高度可定制：自定义预览区域、裁剪比例、拍照质量、视频分辨率，支持前后摄像头切换

• 跨平台一致性：统一 Android、iOS和OHOS 相机 API 调用，适配不同设备的相机硬件特性

• 轻量高效：基于原生相机 API 封装，无冗余依赖，预览帧率稳定

• 灵活交互：支持触摸对焦、双击放大、手势缩放，支持相机预览与页面其他元素交互

• 安全可靠：自动处理相机权限申请，提供完善的错误回调和资源释放机制

安装与卸载

安装步骤

1. 基础安装（推荐）

# 安装hcordova
npm install -g hcordova

# 基础安装
cordova plugin add cordova-plugin-camera-preview

# 指定OHOS安装
cordova plugin add cordova-plugin-camera-preview --platform ohos

# 从 GitCode 安装
hcordova plugin add https://gitcode.com/OpenHamrony-Cordova/cordova-plugin-camera-preview.git --platform ohos

# 安装指定版本
hcordova plugin add [email protected] --platform ohos

卸载步骤

# 全平台卸载核心插件
hcordova plugin remove cordova-plugin-camera-preview

# 指定OHOS卸载
hcordova plugin remove cordova-plugin-camera-preview --platform ohos

2. 运行时配置（初始化参数）

初始化相机时可通过参数覆盖全局配置，支持更灵活的场景适配（详细参数见 API 文档）。

API 使用文档

原生相机支持闪光灯、前后摄像头切换，焦距调整、美颜、保存到相册功能原生已实现，js侧无需手动调用，当前版本JS侧主要兼容启动相机、获取照片路径、Uri、元数据、压缩功能。

1. 调用相机拍照返回URL

function startCamera1() {
    let options = {
        storeToFile: true, //设置存储文件
    };

    CameraPreview.startCamera(options, function(){
        CameraPreview.takePicture({quality:80},function(filePath){
            //获取文件url，可以直接在img中引用
            document.getElementById("imgInfo1").src = filePath;
        });
    },function(){
        document.getElementById("startCamera").innerHTML = "初始化失败";
    });
}

2. 调用相机拍照返回base64照片数据

function startCamera2() {
    let options = {
        storeToFile: false,//设置返回base64数据
    };

    CameraPreview.startCamera(options, function(){
        CameraPreview.takePicture({quality:50}, function(base64PictureData){
            //直接引用base64显示照片
            document.getElementById("imgInfo2").src = 'data:image/jpeg;base64,' +base64PictureData;
        });
    },function(){
        document.getElementById("startCamera").innerHTML = "初始化失败";
    });
}

3. 压缩图片获取缩略图

function startCamera3() {
    let options = {
        storeToFile: true,//设置存储文件
    };

    CameraPreview.startCamera(options, function(){
        //设置图片质量参数，获取压缩后的图片
        CameraPreview.takeSnapshot({quality:30}, function(filePath){
            //获取文件url，可以直接在img中引用
            document.getElementById("imgInfo3").src = filePath;
        });
    },function(){
        document.getElementById("startCamera").innerHTML = "初始化失败";
    });
}

4. 打开相机录视频

function startRecordVideo() {
    //后置摄像头拍设视频，打开原生相机，涉嫌头也可以切换
    var opts = {
        cameraDirection: CameraPreview.CAMERA_DIRECTION.BACK
    }

    CameraPreview.startRecordVideo(opts, function(filePath){
        //返回的路径key直接video可以直接引用播放
        var player = new Aliplayer({
            id: "vodId", // 容器id
            source: filePath,  // 视频url 支持互联网可直接访问的视频地址
            autoplay: false,      // 自动播放
            width:"100%",       // 播放器宽度
            height:"200px",      // 播放器高度
            showBarTime:"2000",
            showBuffer:true,
            playsinline:true,
            preload:true,
            "controlBarVisibility": "click",
            skinLayout: [{"name":"bigPlayButton","align":"cc","x":0,"y":0},{"name":"H5Loading","align":"cc"},{"align":"blabs","x":0,"y":0,"name":"controlBar", "children":[{"align":"tlabs","x":0, "y":0,"name":"progress"},{"align":"tl","x":15,"y":26,"name":"playButton"},{"align":"tl", "x":10, "y":24, "name":"timeDisplay"},{ "align":"tr", "x":20, "y":25, "name":"fullScreenButton"},{ "align":"tr", "x":20, "y":25, "name":"setButton"},{ "align":"tr", "x":20, "y":23, "name":"streamButton"},{"align":"tr","x":20,"y":25, "name":"volume"}]}]
        });

        player.on("play", function() {
            //监听播放
            global_play = this;
        });

        player.on("requestFullScreen", function() {
            //全屏播放监听
        });

        player.on("cancelFullScreen", function() {
            //取消全屏播放
        });
        player.play();
    });
}

许可证

本插件基于 Apache License 开源，详见 LICENSE 文件。

联系方式

OHOS Cordova https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-camera-preview

Android/iOS：https://npmjs.com/cordova-plugin-camera-preview/issues