微信小程序 camera

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

1.媒体组件 camera

功能描述

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

属性说明

属性类型默认值必填说明最低版本
mode:normal相机模式,scanCode扫码模式stringnormal应用模式,只在初始化时有效,不能动态变更2.1.0
resolution:low低,medium中,high 高stringmedium应用模式,只在初始化时有效,不能动态变更2.10.0
device-position:front前置,back后置stringback摄像头朝向1.0.0
flash:auto 自动,on打开,off关闭,torch 常亮stringauto闪光灯,值为auto, on, off1.0.0
frame-size:small 小尺寸帧数据,medium中尺寸帧数据,large大尺寸帧数据stringmedium指定期望的相机帧数据尺寸2.7.0
bindstopeventhandle摄像头在非正常终止时触发,如退出后台等情况1.0.0
binderroreventhandle用户不允许使用摄像头时触发1.0.0
bindinitdoneeventhandle相机初始化完成时触发,e.detail = {maxZoom}2.7.0
bindscancodeeventhandle在扫码识别成功时触发,仅在 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;
}

示例图片预览

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值