需求分析
根据上面的需求，分析大概要以下几个步骤。
- 先实现将摄像头的画面实时展示在页面视频采集区域中；
- 将摄像头中的视频画面采集一帧成图片并回显；
- 将生成的图片上传至CDN拿到图片链接；
- 将图片链接上传到后端接口做处理；
确定了需要以上四个步骤后，接下来一步一步实现。
实现
视频采集
由于 Electron 内置了 Chromium 浏览器，该浏览器对各项前端标准都支持得非常好，所以基于 Electron 开发应用不会遇到浏览器兼容性问题。几乎可以在 Electron 中使用所有 HTML5、CSS3 、ES6 标准中定义的 API。
所以基于WebRTC提供的API即可获取到摄像头的视频流。
MediaDevices.getUserMedia()
代码如下：
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其它轨道类型。
它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若找不到满足请求参数的媒体类型，promise会reject回调一个NotFoundError。
现在已经成功获取到视频流，接下来就是将视频流回显到页面。这里使用video标签完成，代码如下：
这时，摄像头中的画面就可以显示在页面video标签内，如下图。
为了用户体验，在进入页面之前添加了判断摄像头是否已经接入并可用的逻辑，避免用户的摄像头未接入或者启动，造成应用不可用的错觉。
使用MediaDevices.enumerateDevices()来获取可用媒体输入和输出设备的列表，例如摄像头、麦克风、耳机等。
得到的设备列表数据格式如下：
kind类型有三种，分别是audioinput、audiooutput和videoinput。分别代表音视频的输入和输出。可在列表中查找目标媒体是否已经接入且可用。
若有选择切换设备需求，可根据kind类型进行媒体设备分类，选择目标deviceId，传入navigator.mediaDevices.getUserMedia，完成来源切换。
拍照生成图片
拍照其实就是截取视频中的某一帧，这里使用canvas来实现截取。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。其中drawImage()方法用来向画布上绘制图像、画布或视频。
export default {
data: {
showVideo: true, // 是否展示摄像头画面
},
methods: {
capture() {
this.showVideo = false
var context = this.$refs.canvas.getContext('2d');
context.drawImage(this.$refs.video, 0, 0, 1000, 692, 0, 0, 500, 346);
}
}
}
