最近开发人脸识别登录系统，需要在微信中调用相机实现拍照上传功能，最开始使用H5input控件实现，但界面不太美观，
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:用户不允许使用摄像头时触发。

view class="page-body"  view class="page-body-wrapper"    camera device-position="front" 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)  }})

官网文档：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