HTML5整合本地摄像头，实现视屏预览及拍照上传

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

打开网页，会提示是否允许视屏设备接入，选择允许。此时，video 标签内将显示动态的摄像视频流。

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

前端使用Ajax将图片上传到服务端。

前端代码

后台接口

image.png

注：以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。