目前的需求是，在手机端通过调起摄像头拍摄一张图片执行后面的操作。 实现这一功能目前有两种策略：
- 通过
navigator.mediaDevices.getUserMedia调用用户摄像头，并将数据流导入到video标签中进行实时查看，然后通过canvas截图视频中的一帧生成图片。 - 通过设置 input 标签的
type="file" accept="image/*" capture="environment"属性调取摄像头拍照。
两种方案各有优劣，第一种方便进行页面样式调整，可以方便添加各种引导提醒用户正确的拍照方式，例如加一个方框提示用户在该方框内的图片才有效等等。 第二种方案则是更为方便，通过直接调起手机拍照功能拍摄一张照片，不需要打开摄像头权限、导入数据流再截图这一系列操作，直接可以获得图片。
另外，方案1需要项目支持https协议，否则无法打开设备摄像头
具体方案的细节都写在对应代码中了。大家可以自行查看。