camera 相机

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

# 属性说明

属性名 类型 默认值 必填 说明
device-position String back 前置或后置,值为front, back
flash String auto 闪光灯,值为auto, on, off
bindstop EventHandle 摄像头在非正常终止时触发,如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发

# device-position 有效值

说明
front 前置摄像头
back 后置摄像头

# flash 有效值

说明
auto 自动闪光灯
on 闪光灯开
off 闪光灯关

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例

    <view class="wrap">
        <view class="card-area">
            <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>
            <!-- <navigator url="/pages/camera-scan-code/camera-scan-code">
                <button type="primary">扫描一维码</button>
            </navigator> -->
            <view class="preview">预览</view>
            <image s-if="imageSrc" class="image" mode="widthFix" src="{{imageSrc}}"></image>
            <video s-if="videoSrc" class="video" src="{{videoSrc}}"></video>
        </view>
    </view>
    
    Page({
        data: {
            imageSrc: '',
            device: 'back',
            videoSrc: ''
        },
        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({
                        imageSrc: res.tempImagePath
                    });
                }
            });
        },
        startRecord() {
            const ctx = swan.createCameraContext();
            ctx.startRecord({
                success: res => {
                    swan.showToast({
                        title: 'startRecord',
                        icon: 'none'
                    });
                }
            });
        },
        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