整理 | MUI项目中使用Camera模块拍照或录像

我们想在应用中增加拍照上传头像功能或者发布短视频等，都需要用到移动设备的摄像头。H5+ API为我们提供了Camera模块管理设备的摄像头，可用于拍照、摄像操作。

Step 1 我们需要在页面上放置拍照或摄像的按钮。

<a class="mui-icon mui-icon-camera mui-pull-right" id="camera"></a>

Step 2 然后对按钮进行监听操作

//监听按钮的点击事件
document.getElementById('camera').addEventListener('tap', function() {})

Step 3 初始化摄像头对象

/**
 * @description 获取需要操作的摄像头对象
 * @example Camera plus.camera.getCamera(index);
 * @param {index}  要获取摄像头的索引值 1：主摄像头；2：辅摄像头；默认为系统设置的主摄像头
 * @return {Camera} 摄像头对象
 */
var cam = plus.camera.getCamera();

Step 4 使用captureImage()方法进行拍照

/**
 * @description 进行拍照操作
 * @example cam.captureImage(successCB, errorCB, options);
 * @param {successCB}  拍照操作成功的回调函数
 * @param {errorCB}  拍照操作失败的回调函数
 * @param {options}  摄像头拍照参数
 */
cam.captureImage(function(t) {
    //t 拍照操作保存的文件路径
    console.log(t)
   //预览图片
    plus.nativeUI.previewImage([t])
 }, function(e) {
    
}, {
    filename: '_downloads/img/',//拍照文件保存的路径
    format: cam.supportedImageFormats[0],//拍照的文件格式
    index: 1, //拍照默认使用的摄像头
    optimize:true,//是否优化图片,true：自动调整图片方向;false：不调整
    resolution: cam.supportedImageResolutions[0],//拍照使用的分辨率
    popover: {//拍照界面弹出指定区域
        top: "10px",
        left: "10px",
        width: "200px",
        height: "200px"
    }
})

Step 5 使用startVideoCapture()方法录制视频

/**
 * @description 调用摄像头进行摄像操作
 * @example cam.startVideoCapture(successCB, errorCB, options);
 * @param {successCB}  拍照操作成功的回调函数
 * @param {errorCB}  拍照操作失败的回调函数
 * @param {options}  摄像头拍照参数
 */
cam.startVideoCapture(function(t) {
    //t 摄像操作保存的文件路径
    console.log(t)
}, function(e) {
    
}, {
    filename: '_downloads/video/',//录像文件保存的路径
    format: cam.supportedVideoFormats[0],//摄像的文件格式
    index: 1, //摄像默认使用的摄像头
    videoMaximumDuration:10,//视频长度
    resolution: cam.supportedVideoResolutions[0],//摄像使用的分辨率
    popover: {//摄像界面弹出指定区域
        top: "10px",
        left: "10px",
        width: "200px",
        height: "200px"
    }
})

截止此处，我们已经完成了拍照或摄像的操作，接着我们需要在拍照或摄像成功后对拍照或摄像的文件进行处理，比如上传文件到服务器需要用到plus.uploader.createUpload()方法。