camera 相机

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

属性说明

device-position 有效值

flash 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

在开发者工具中预览效果

  1. <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>
  1. Page({
  2.     data: {
  3.         src: '',
  4.         device: 'back',
  5.         videoSrc: ''
  6.     },
  7.     onShow() {
  8.          console.log("目前此组件的录像功能在安卓端不能播放，请在开发者工具中查看完整效果");
  9.     },
  10.     switchCamera() {
  11.         const devices = this.getData('device');
  12.         if (devices === 'back') {
  13.             this.setData({
  14.                 device: 'front'
  15.             });
  16.         } else {
  17.             this.setData({
  18.                 device: 'back'
  19.             });
  20.         }
  21.     },
  22.     takePhoto() {
  23.         const ctx = swan.createCameraContext();
  24.         ctx.takePhoto({
  25.             quality: 'high',
  26.             success: res => {
  27.                 this.setData({
  28.                     src: res.tempImagePath
  29.                 });
  30.             }
  31.         });
  32.     },
  33.     startRecord() {
  34.         const ctx = swan.createCameraContext();
  35.         ctx.startRecord({
  36.             success: res => {
  37.                 swan.showToast({
  38.                     title: 'startRecord'
  39.                 });
  40.             }
  41.         });
  42.     },
  43.     stopRecord() {
  44.         const ctx = swan.createCameraContext();
  45.         ctx.stopRecord({
  46.             success: res => {
  47.                 swan.showModal({
  48.                     title: '提示',
  49.                     content: res.tempVideoPath
  50.                 });
  51.                 this.setData({
  52.                     videoSrc: res.tempVideoPath
  53.                 });
  54.             }
  55.         });
  56.     },
  57.     error(e) {
  58.         console.log(e.detail);
  59.     }
  60. });

Bug & Tip

  • s-if="{ {true} }"可在camera上创建NA组件）。
  • createCameraContext。