camera

概述

相机组件，同一页面只能插入一个 <camera> 组件。

使用限制

子组件

不支持。

属性

除了支持 通用属性 以外，还支持如下属性。

样式

支持 通用样式 。

事件

除了支持 通用事件 以外，还支持如下事件。

<camera   onerror="cameraError">

<camera oncameraframe="cameraFrame"/>

<camera oncamerainitdone="cameraInitDone"/>

方法

[h2]takePhoto(OBJECT)

使用该方法，可以进行拍照。

OBJECT参数说明：

success返回值：

[h2]setPreviewFpsRange(OBJECT)(1080+)

使用该方法，可以设置最大和最小预览帧率，取值范围必须在支持的预览帧率范围内。

OBJECT参数说明：

{'min':10,'max':30}

fail返回错误码：

[h2]getSupportedPreviewFpsRange(OBJECT)(1080+)

使用该方法，可以获取支持的预览帧率范围。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]getPreviewFpsRange(OBJECT)(1080+)

使用该方法，可以获取设置的预览帧率范围。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]setExposureCompensation(OBJECT)(1080+)

使用该方法，可以设置曝光补偿值。

OBJECT参数说明：

fail返回错误码：

[h2]getExposureCompensationRange(OBJECT)(1080+)

使用该方法，可以获取支持的曝光补偿值范围。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]getExposureCompensation(OBJECT)(1080+)

使用该方法，可以获取设置的曝光补偿值。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]getSupportedSceneModes(OBJECT)(1080+)

使用该方法，可以获取支持的场景模式。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]startRecord(OBJECT)(1090+)

使用该方法，可以启动录像。

OBJECT参数说明：

success返回值：

fail返回错误码：

[h2]stopRecord(OBJECT)(1090+)

使用该方法，可以停止录像。

OBJECT参数说明：

success返回值：

fail返回错误码：

示例代码

<template>
    <!-- There can only be one root node in the template -->
    <div class="container" style=" width: 100%; height:100%">
        <stack class="stack" style=" width: 100%; height:100%">
            <camera 
                id="camera" 
                style=" width: 600px; height:600px" 

                deviceposition="{{devicepositionVal}}" 
                flash="{{flashVal}}"
                autoexposurelock="{{autoExposureLockVal}}" 
                autowhitebalancelock="{{autoWhiteBalanceLockVal}}"
                framesize="{{frameSizeVal}}"

                onerror="error"
                oncamerainitdone="cameraInitDoneEvent" 
                oncameraframe="cameraFrameEvent">
            </camera>
            <div class="item-container">
                <input class="btn" type="button" onclick="takePhoto" value="takePhoto"></input>
                <input id="deviceposition-private-css" class="btn" type="button" value="改变deviceposition" onclick="devicepositionEvent" />
                <input id="flash-private-css" class="btn" type="button" value="改变flash" onclick="flashEvent" />
                <input id="framesize-private-css" class="btn" type="button" onclick="changeFrameSize" value="framesize"></input>
                <input id="autowhitebalancelock-private-css" class="btn" type="button" onclick="changeWhiteBalanceLock" value="AWB lock"></input>
                <input id="autoexposurelock-private-css" class="btn" type="button" onclick="changeExposureLock" value="AE lock"></input>
                <image src="{{photoUri}}"></image>
            </div>
        </stack>
    </div>
</template>

<style>
    @import '../../../common/css/common.css';

    .stack {
      height: 300px;
      align-items: flex-start;
    }

    .title {
      font-size: 100px;
    }

    .btn {
        font-size: 10px;
        margin-left: 5px;
        margin-right: 5px;
        width: 100px;
        height: 50px;
    }
</style>

<script>

    export default {
        data: {
            title: 'camera',
            photoUri: "",
            devicepositionIndex: 0,
            devicepositionVal: "",
            flashIndex: 0,
            flashVal: "",
            autoexposurelockIndex:0,
            autoExposureLockVal:"",
            autoWhiteBalanceLockIndex:0,
            autoWhiteBalanceLockVal:"",
            frameSizeIndex:0,
            frameSizeVal:"",
        },
        onInit() {
            this.$page.setTitleBar({
                text: 'menu',
                textColor: '#ffffff',
                backgroundColor: '#007DFF',
                backgroundOpacity: 0.5
            })
        },
        onReady() {

        },
        devicepositionEvent() {
            if (this.devicepositionIndex === 0) {
                this.devicepositionVal = "front"
            } else if (this.devicepositionIndex === 1) {
                this.devicepositionVal = "back"
            }
            this.devicepositionIndex++
        },
        flashEvent() {
            if (this.flashIndex === 0) {
                this.flashVal = "auto"
            } else if (this.flashIndex === 1) {
                this.flashVal = "on"
            } else if (this.flashIndex === 2) {
                this.flashVal = "off"
            } else if (this.flashIndex === 3) {
                this.flashVal = "torch"
            }
            this.flashIndex++
        },
        takePhoto() {
            var camera = this.$element('camera');
            //camera.flash = "flash_on";
            console.log("take photo =" + camera.flash);
            camera.takePhoto({
                quality: "high",
                success: (res) => {
                    console.log("res =" + res.uri);
                    this.photoUri = res.uri;
                },
                fail: (erromsg, errocode) => {
                    console.log('media.takePhoto----------' + errocode + ': ' + erromsg)
                }
            })
        },
        error(e) {
            console.error(e.detail)
        },
        cameraInitDoneEvent(data){
            console.log(data)
        },
        cameraFrameEvent(data){
            console.log(data)
        },
        changeFrameSize(){
            const camera = this.$element('camera')
            if(this.frameSizeIndex === 0){
                this.frameSizeVal = "low"
                this.frameSizeIndex = 1
            }else if(this.frameSizeIndex === 1){
                this.frameSizeVal ="normal"
                this.frameSizeIndex = 2
            } else if(this.frameSizeIndex === 2){
                this.frameSizeVal = "high"
            }
        },
        changeWhiteBalanceLock(){
            if(this.autoWhiteBalanceLockIndex === 0){
                this.autoWhiteBalanceLockVal = "true"
                this.autoWhiteBalanceLockIndex = 1
            }else if(this.autoWhiteBalanceLockIndex === 1){
                this.autoWhiteBalanceLockVal ="false"
            }
        },
        changeExposureLock(){
            if(this.autoexposurelockIndex === 0){
                this.autoExposureLockVal = "true"
                this.autoexposurelockIndex=1
            }else if(this.autoexposurelockIndex === 1) {
                this.autoExposureLockVal = "false"
            }
        }

    }
</script>

示例代码效果图：

版本更新说明

Tips

• 系统版本为5.0以下手机不支持此组件。
• 如果Camera组件无法打开，打开后返回上一个页面，请到手机设置中打开快应用加载器的相机权限。
• 拍照的宽高比尽量设置为9:16或者是3:4比例，在这种比例下成像速度最快，拍照成像的结果与预览大小一致，否则会导致拍照成像的结果与预览结果存在偏差。
• 拍照时使用cropimage方法来裁剪生成的图像，会导致拍照时间变长。
• 当前预览生成的照片会与拍照的图像方向一致，不再自动进行旋转。
• 使用Mate X手机时，如果发现图片预览与实际方向相反，请通过切换摄像头方向来进行纠正预览方向。