百度智能小程序 CameraContext

CameraContext

解释：swan.createCameraContext 的返回值。

属性说明

示例 

在开发者工具中打开

图片示例

代码示例

<view class="wrap">
    <view class="card-area">
        <camera
            device-position="{{device}}" 
            flash="off" 
            bindstop="stop"
            binderror="error"
            class="preview"
            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="imageSrc" class="image" mode="widthFix" src="{{imageSrc}}"></image>
        <video s-if="videoSrc" class="video" src="{{videoSrc}}"></video>
    </view>
</view>

Page({
    data: {
        imageSrc: '',
        device: 'front',
        videoSrc: ''
    },
    onLoad() {
        this.ctx = swan.createCameraContext();
    },
    onShow() {
        swan.authorize({
            scope: 'scope.camera',
            success: res => {
                swan.showToast({
                    title: '已成功授权',
                    icon: 'none'
                });
            },
            fail: err => {
                if (err.errCode === 10003) {
                    swan.showToast({
                        title: '用户已拒绝授权申请，请自行开启相机授权',
                        icon: 'none'
                    });
                }
            }
        });
    },
    switchCamera() {
        const devices = this.getData('device');
        if (devices === 'back') {
            this.setData({
                device: 'front'
            });
        } else {
            this.setData({
                device: 'back'
            });
        }
    },
    takePhoto() {
        this.ctx.takePhoto({
            quality: 'high',
            success: res => {
                this.setData({
                    imageSrc: res.tempImagePath
                });
            }
        });
    },
    startRecord() {
        this.ctx.startRecord({
            success: res => {
                swan.showToast({
                    title: 'startRecord',
                    icon: 'none'
                });
            }
        });
    },
    stopRecord() {
        this.ctx.stopRecord({
            success: res => {
                swan.showModal({
                    title: '提示',
                    content: res.tempVideoPath
                });
                this.setData({
                    videoSrc: res.tempVideoPath
                });
            }
        });
    },
    error(e) {
        swan.showModal({
            title: '加载出错',
            content: e.detail
        });
    }
});