微信小程序相机组件的使用

最近开发人脸识别登录系统，需要在微信中调用相机实现拍照上传功能，最开始使用H5控件实现，但界面不太美观，
H5的getMedia只兼容几个主流的浏览器，所以就研究了微信相机组件的开发，过程经历了许多坑 . . . . . .
H5利用input标签直接调用相机：https://blog.csdn.net/qq_25101225/article/details/81034626

首先需要获取使用微信JS-SDK的授权配置（参数可以后台ajax获取）：

var url = window.location.href;
$.ajax({
    url: url_root + "/wechat/get_signature",
    type: "post",
    data: { "url" : url },
    dataType: "json",
    success: function (data) {
        wx.config({
	    appId: data.data.appId,
	    timestamp: data.data.timestamp,
	    nonceStr: data.data.nonceStr,
	    signature: data.data.signature,
	    jsApiList: ['createCameraContext','camera']
	});
    }
});

index.Wxml
device-position：前置或后置，值为front, back; flash：闪光灯，值为auto, on, off; bindstop：摄像头在非正常终止时触发，如退出后台等情况；binderror:用户不允许使用摄像头时触发。

  
    
    
      拍照
    
    
      开始录像
    
    
      结束录像
    
    预览
    
    
  

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

官网文档：https://developers.weixin.qq.com/miniprogram/dev/api/api-camera.html

                https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.4213981683521064#1

W3Cschool文档：https://www.w3cschool.cn/weixinapp/weixinapp-c2u72j31.html