微信小程序 camera 系统相机 组件

Posted 2021-06-26 java1234_小锋

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。

相关api：wx.createCameraContext

属性	类型	默认值	必填	说明	最低版本
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更	2.1.0
resolution	string	medium	否	分辨率，不支持动态修改	2.10.0
device-position	string	back	否	摄像头朝向	1.0.0
flash	string	auto	否	闪光灯，值为auto, on, off	1.0.0
frame-size	string	medium	否	指定期望的相机帧数据尺寸	2.7.0
bindstop	eventhandle		否	摄像头在非正常终止时触发，如退出后台等情况	1.0.0
binderror	eventhandle		否	用户不允许使用摄像头时触发	1.0.0
bindinitdone	eventhandle		否	相机初始化完成时触发，e.detail = {maxZoom}	2.7.0
bindscancode	eventhandle		否	在扫码识别成功时触发，仅在 mode=“scanCode” 时生效	2.1.0

mode 的合法值

值	说明	最低版本
normal	相机模式
scanCode	扫码模式

resolution 的合法值

值	说明	最低版本
low	低
medium	中
high	高

device-position 的合法值

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

flash 的合法值

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

frame-size 的合法值

值	说明	最低版本
small	小尺寸帧数据
medium	中尺寸帧数据
large	大尺寸帧数据

Bug & Tip

1. tip: 同一页面只能插入一个 camera 组件
2. tip:请注意原生组件使用限制
3. tip:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据，与 Camera 组件展示的图像不同，其实际像素值由系统决定

示例代码

在开发者工具中预览效果

index.xml

<view class="page-body">
  <view class="page-body-wrapper">
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <view class="btn-area">
      <button type="primary" bindtap="takePhoto">拍照</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="startRecord">开始录像</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="stopRecord">结束录像</button>
    </view>
    <view class="preview-tips">预览</view>
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
    <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
  </view>
</view>

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)
  }
})

运行效果截图（要真机调试）

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。