camera

系统相机。该组件是原生组件,使用时请注意相关限制。

属性 类型 默认值 必填 说明 最低版本
device-position String back 摄像头朝向  
flash String auto 闪光灯
bindinitdone EventHandle 相机初始化完成时触发,e.detail = {maxZoom}  
bindstop EventHandle 摄像头在非正常终止时触发,如退出后台等情况  
binderror EventHandle 用户不允许使用摄像头时触发  

device-position 的合法值

说明 最低版本
front 前置  
back 后置  

flash 的合法值

说明 最低版本
auto 自动  
on 打开  
off 关闭  
torch 常亮  

Tips:

  • 同一页面只能插入一个 camera 组件

示例代码:

<!--pages/component/pages/camera/camera.mcml-->
<view class="container">
  <view class="statement">相机。</view>
  <view>
    <camera style="height: 400rpx;"
      device-position="{{devicePosition}}"
      flash="{{flash}}"
      bindinitdone="bindinitdone"
      bindscancode="bindscancode"
      bindstop="bindstop"
      binderror="binderror"></camera>
  </view>
  <view>
    <button bindtap="setFlash">闪光灯({{flash}})</button>
    <button bindtap="setDevicePosition">摄像头朝向({{devicePosition}})</button>
    <slider value="1" max="{{maxZoom}}" min="1" show-value="{{true}}" bindchange="zoomChanged">设置缩放级别</slider>

    <button bindtap="takePhoto">拍照</button>
    <button bindtap="takeRecode">{{recodeStatus == 0 ? '开始录像' : '结束录像'}}</button>
  </view>
  <view class="cssname">onCameraFrame:获取 Camera 实时帧数据</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{onCameraFrameDetail}}</text>
  <view class="cssname">bindinitdone:相机初始化完成时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindinitdone}}</text>
  <view class="cssname">bindstop:摄像头在非正常终止时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindstop}}</text>
  <view class="cssname">binderror:用户不允许使用摄像头时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{binderror}}</text>
</view>
// pages/component/pages/camera/camera.js
var flashValues = ['auto', 'on', 'off', 'torch']
var frameSizeValues = ['small', 'medium', 'large']
Page({
  data: {
    recodeStatus: 0,
    flash: 'auto',
    devicePosition: 'back'
  },
  setFlash: function(e){
    var index = flashValues.indexOf(this.data.flash);
    index += 1;
    if(index >= flashValues.length){ index = 0; }
    this.setData({
      flash: flashValues[index]
    })
  },
  setDevicePosition: function(e){
    this.setData({
      devicePosition: this.data.devicePosition == 'back' ? 'front' : 'back'
    })
  },
  takePhoto: function(){
    var context = mc.createCameraContext();
    context.takePhoto({
      success: function(res){
        mc.getImageInfo({
          src: res.tempImagePath,
          complete: function(res) {
            console.log(res);
          }
        })
        mc.previewImage({
          urls: [res.tempImagePath],
        })
      },
      fail: function(res){
        mc.showModal({
          title:'拍照错误',
          content: res.errMsg,
          showCancel: false
        })
      }
    })
  },
  takeRecode: function(){
    var context = mc.createCameraContext();
    var _this = this;
    if(this.data.recodeStatus == 0){
      context.startRecord({
        timeoutCallback: function(res){
          _this.setData({
            recodeStatus: 0
          })
          _this.previewRecode(res);
        },
        success: function(res){
          _this.setData({
            recodeStatus: 1
          })
        },
        fail: function(res){
          mc.showModal({
            title:'开始录像错误',
            content: res.errMsg,
            showCancel: false
          })
        }
      })
    }
    else{
      context.stopRecord({
        compressed: false,
        success: function(res){
          _this.setData({
            recodeStatus: 0
          })
          _this.previewRecode(res);
        },
        fail: function(res){
          mc.showModal({
            title:'停止录像错误',
            content: res.errMsg,
            showCancel: false
          })
        }
      })
    }
  },
  previewRecode: function(res){
    mc.previewMedia({
      sources: [
        {
          url: res.tempVideoPath,
          poster: res.tempThumbPath,
          type: 'video'
        }
      ]
    })
  },
  zoomChanged: function(e){
    var context = mc.createCameraContext();
    context.setZoom({
      zoom: e.detail.value,
      complete: function (res) {
        console.log(res)
      }
    })
  },
  bindinitdone : function(e){
    this.setData({
      bindinitdone: JSON.stringify(e, null, 2),
      maxZoom: e.detail.maxZoom
    })
  },
  bindstop: function(e){
    this.setData({
      bindstop: JSON.stringify(e, null, 2)
    })
  },
  binderror: function(e){
    this.setData({
      binderror: JSON.stringify(e, null, 2)
    })
  }
})

results matching ""

    No results matching ""

    results matching ""

      No results matching ""