前置知识

上一篇文章是前端调用摄像头，然后把流数据给到video标签，用canvas截取图像。前端调用库解析二维码和条形码。

这篇文章是前端获取到流数据发送给后端，后端解析成功后把结果返回前端。

getUserMedia

获取摄像头/麦克风，回调成功会返回一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。MDN

1
2
3
4
5
6
7

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

getUserMedia了解

HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、麦克风）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。
点击查看getUserMedia的api