小程序开发之组件camera（系统相机）

版权声明：欢迎转载，可Chat交流，写博不易请标明出处： https://blog.csdn.net/JackJia2015/article/details/86506647

camera

系统相机。该组件是原生组件，使用时请注意相关限制。 扫码二维码功能，需升级微信客户端至6.7.3。

需要用户授权 scope.camera

相关api：wx.createCameraContext
注：

• 请注意原生组件使用限制。
• 同一页面只能插入一个 camera 组件。

例如：
效果展示

代码
index.wxml

<camera device-position="back" flash="off" binderror="error" style="width:100%; height:300px;"></camera>
<view class='showView'>
  <image  mode="widthFix" src="{{src}}"></image>
  <video src="{{videoSrc}}"></video>
</view>

<button type="primary" bindtap="takePhoto">拍照</button>
<button type="primary" bindtap="startRecord">开始录像</button>
<button type="primary" bindtap="stopRecord">结束录像</button>

index.wxss

.showView{
  display: flex
}
image{
  margin-top: 20rpx;
  margin-left: 150rpx;
  width:200rpx; 
  height:200rpx;
  background-color: lavender
}
video{
  margin-top: 20rpx;
  margin-left: 50rpx;
  width:200rpx; 
  height:200rpx;
  background-color: lavender
}
button{
  margin: 20rpx;
}

index.js

Page({
  //创建相机
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  //拍照
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  // 开始录像
  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  //结束录像
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})