图形编辑器基于Paper.js教程28：在web中获取摄像头视频流需要注意，在canvas 上处理图片需要注意的情况

前言

本篇文章我们来聊一下 利用web摄像头进行定位的功能，之前写了一篇文章 https://fizzz.blog.csdn.net/article/details/144701707，这篇算是哪一篇的补充和完善。 在做完第一版的摄像头的定位功能后，一直有用户反馈，用于定位的图片太模糊。

摄像头定位流程

在上一篇文章中，我也说过，用于定位的图片经过了很多的处理。 第一步：截取视频流的一帧，俗称拍照，将拍的照片放在canvas上 第二步：将照片通过fisheye这个库进行鱼眼矫正，参数是根据摄像头调试好的常量 第三步：将调好的照片，放到一个画布上，进行四个mark点的标记 第四步：使用四个mark点的坐标，进行透视变换 第五步：根据mark点坐标，通过一系列计算，截取出工作区域的图片

在使用摄像头时 镜头的对焦，光照会影响清晰度， 材料的平整度，机器和材料的移动，mark点的标记，都会影响最后的定位精度。

经过一段时间的反馈和领导去展会使用摄像头定位的体验，最终在4月份才抽出时间升级优化它。

增加分辨率 分析过程

首先我考虑给图片增加亮度，对比度，然后在图片转换时，canvas 要使用图片原尺寸的大小。否则会被压缩哦。不信自己去试试。也尝试了移除网格线的视觉干扰。

尝试了那么多，花了好几天的时间，最终结果还是不理想，就在当我以为这个B摄像头就只能这么清晰啦，就在我以为黔驴技穷啦。最后发现我的方向是错的，我没有从源头开始分析，就是摄像头的视频流。

通过浏览器获取web摄像头的视频流使用的是navigator.mediaDevices.getUserMedia 这个方法，

我要是早一点去mdn查这个api的详细文档也不会走那么多弯路。

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

在这个文档里，清晰地写着在获取视频流时，是可以设置分辨率的，而我的原始程序并没有设置这个分辨率，这会导致获取的视频流有可能不是最大的分辨率。

你可以通过js获取摄像头的最大支持分辨率，帧数，也就在获取视频流后，得到视频流的分辨流。

如果问题不从源头开始分析，那么可能无论你在下游做多大努力，都无济于事。

效果展示

下面放一下默认的分辨率，以及设置最大分辨率的效果

默认的分辨率，没有配置视频的分辨率

最大分辨率

这里截图可能看不出来，大家可以用一个usb摄像头，插到电脑上试一下。

下面是摄像头的一些参数

了解摄像头设备提供的每一个接口，每个参数和属性，对我们调试摄像头功能有着至关重要的作用。

小结

后续我也配合硬件做了一些摄像头测试的工作，比如在拍照的图片上画一个水平垂直中轴线，用于检查物品的中心点是否在摄像头画幅的中心点。 还有用于对比摄像头画面效果的案例，一个网页同时显示多个接入的web摄像头，用于实时对比摄像头画面效果。

还有一些小知识点，大家需要注意，使用摄像头必须要用https协议，并且请求权限。 在切换摄像头时也要注意异步和延迟的问题。 在用canvas 去承载一个图片时，canvas 的宽高最好和图片的宽高保持一致，避免被压缩，放大。 在图片转换过程中，要注意图片加载的异步问题。要等到图片加载完成后，再进行下一步处理。

最后祝大家都能少走一点弯路，早点下班陪家人。