camera

Overview

Enables the camera. Only one camera element can be inserted to a page.

Application Scope

Subelements

None

Attributes

In addition to general attributes, the attributes listed in the following table are supported.

Styles

Common styles are supported.

Events

In addition to common events, the events listed in the following table are supported.

<camera   onerror="cameraError">

<camera oncameraframe="cameraFrame"/>

<camera oncamerainitdone="cameraInitDone"/>

Methods

[h2]takePhoto(OBJECT)

Takes a photo.

OBJECT parameters

Parameters returned by success

[h2]setPreviewFpsRange(OBJECT)(1080+)

Sets the maximum and minimum preview frame rates. The value range you set must be within the supported preview frame rate range.

OBJECT parameters

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

Result codes returned by fail

[h2]getSupportedPreviewFpsRange(OBJECT)(1080+)

Obtains the supported preview frame rate range.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]getPreviewFpsRange(OBJECT)(1080+)

Obtains the configured preview frame rate range.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]setExposureCompensation(OBJECT)(1080+)

Sets the exposure compensation value.

OBJECT parameters

Result codes returned by fail

[h2]getExposureCompensationRange(OBJECT)(1080+)

Obtains the supported exposure compensation value range.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]getExposureCompensation(OBJECT)(1080+)

Obtains the configured exposure compensation value.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]getSupportedSceneModes(OBJECT)(1080+)

Obtains the supported scene modes.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]startRecord(OBJECT)(1090+)

Starts a record.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

[h2]stopRecord(OBJECT)(1090+)

Stops recording.

OBJECT parameters

Parameters returned by success

Result codes returned by fail

Sample Code

<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="change deviceposition" onclick="devicepositionEvent" />
                <input id="flash-private-css" class="btn" type="button" value="change 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>

The following figure shows the final effect.

Version Change History

Tips

• A phone whose Android version is earlier than 5.0 does not support this element.
• If the camera cannot be opened and the previous page is displayed, go to Settings and authorize Huawei Quick App Loader to access the camera.
• You are advised to set the aspect ratio to 9:16 or 3:4. In this case, the imaging speed is the fastest, and the imaging size is the same as the preview image size. Otherwise, the imaging result will be different from that of the preview image.
• When cropimage is used to crop photos, the time required for photographing will be prolonged.
• Preview images have the same orientation as photos taken with the camera.
• When using HUAWEI Mate X, if you find that the orientation of a preview image is opposite to the actual one, switch between the front-facing and rear-facing cameras.