百度智能小程序 相機(jī)

camera 相機(jī)

解釋：系統(tǒng)相機(jī)，使用該組件需通過(guò)獲取用戶授權(quán)設(shè)置申請(qǐng)授權(quán)后方可對(duì)用戶發(fā)起授權(quán)申請(qǐng)，可在 swan.authorize 中查看相關(guān)錯(cuò)誤碼信息。camera 組件還提供豐富的 api 來(lái)控制相機(jī)錄像、拍照等，詳見(jiàn) swan.createCameraContext。

屬性說(shuō)明

device-position 有效值

flash 有效值

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例

<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">開(kāi)始錄像</button>
        <button type="primary" bind:tap="stopRecord">結(jié)束錄像</button>
        <!-- <navigator url="/pages/camera-scan-code/camera-scan-code">
            <button type="primary">掃描一維碼</button>
        </navigator> -->
        <view class="preview">預(yù)覽</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);
    }
});

設(shè)計(jì)指南

如未獲取相機(jī)權(quán)限致使相機(jī)無(wú)法使用，可通過(guò)模態(tài)彈窗（showModal）進(jìn)行明確的提示反饋，避免相機(jī)黑屏阻斷流程，影響用戶體驗(yàn)。

Bug & Tip

• Tip：camera 組件是由客戶端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過(guò) z-index 控制層級(jí)。可使用 cover-view cover-image 覆蓋在上面(在基礎(chǔ)庫(kù) 3.0.0 之前需要先創(chuàng)建 camera，再通過(guò)的方式方 s-if="{ {true} }"可在 camera 上創(chuàng)建 NA 組件）。Tip：同一頁(yè)面只能插入一個(gè) camera 組件。Tip：請(qǐng)勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 組件。Tip：相關(guān) API：createCameraContext。