微信小程序 camera

微信小程序实现视频实时监控

1.媒体组件 camera

功能描述

系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。

属性说明

属性	类型	默认值	必填	说明	最低版本
mode：normal相机模式，scanCode扫码模式	string	normal	否	应用模式，只在初始化时有效，不能动态变更	2.1.0
resolution：low低，medium中，high 高	string	medium	否	应用模式，只在初始化时有效，不能动态变更	2.10.0
device-position：front前置，back后置	string	back	否	摄像头朝向	1.0.0
flash：auto 自动,on打开,off关闭,torch 常亮	string	auto	否	闪光灯，值为auto, on, off	1.0.0
frame-size：small 小尺寸帧数据,medium中尺寸帧数据,large大尺寸帧数据	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

示例代码

<!-- camera.wxml -->
<view class="page-body">
 	<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>

//camera.js
  Page({
    onLoad() {
    //创建camera
      this.ctx = wx.createCameraContext()
    },
    //拍照
    takePhoto() {
      this.ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          console.log(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)
    }
  })

/*camera.wxss*/
.preview-tips {
  margin: 20rpx 0;  
}

.video {
  margin: 50px auto;
  width: 100%;
  height: 300px;
}

示例图片预览