camera 相机

解释：系统相机，使用该组件需通过获取用户权限设置申请授权后方可对用户发起授权申请，可在需授权接口列表中查看相关错误码信息。

属性说明

device-position 有效值

flash 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

在开发者工具中预览效果

<div class="camera">
    <camera device-position="{{device}}" 
            flash="off" 
            bindstop="stop"
            binderror="error" 
            style="width: 100%; height: 3rem;">
    </camera>
    <button type="primary" bind:tap="switchCamera">切换摄像头</button>
    <button type="primary" bind:tap="takePhoto">拍照</button>
    <button type="primary" bind:tap="startRecord">开始录像</button>
    <button type="primary" bind:tap="stopRecord">结束录像</button>
    <view class="preview">预览</view>
    <image s-if="src" class="img" mode="widthFix" src="{{src}}"></image>
    <video s-if="videoSrc" class="video" src="{{videoSrc}}"></video>
</div>

Page({
    data: {
        src: '',
        device: 'back',
        videoSrc: ''
    },
    onShow() {
         console.log("目前此组件的录像功能在安卓端不能播放，请在开发者工具中查看完整效果");
    },
    switchCamera() {
        const devices = this.getData('device');
        if (devices === 'back') {
            this.setData({
                device: 'front'
            });
        } else {
            this.setData({
                device: 'back'
            });
        }
    },
    takePhoto() {
        const ctx = swan.createCameraContext();
        ctx.takePhoto({
            quality: 'high',
            success: res => {
                this.setData({
                    src: res.tempImagePath
                });
            }
        });
    },
    startRecord() {
        const ctx = swan.createCameraContext();
        ctx.startRecord({
            success: res => {
                swan.showToast({
                    title: 'startRecord'
                });
            }
        });
    },
    stopRecord() {
        const ctx = swan.createCameraContext();
        ctx.stopRecord({
            success: res => {
                swan.showModal({
                    title: '提示',
                    content: res.tempVideoPath
                });
                this.setData({
                    videoSrc: res.tempVideoPath
                });
            }
        });
    },
    error(e) {
        console.log(e.detail);
    }
});

Bug & Tip

• Tip：camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面(在基础库3.0.0之前需要先创建camera，再通过的方式方 s-if="{ {true} }"可在camera上创建NA组件）。
• Tip：同一页面只能插入一个 camera 组件。
• Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
• Tip：相关API：createCameraContext。