HTML5调用摄像头,html调用摄像头拍照

　　关于html5调用音视频等多媒体硬件的API已经很成熟了，但是我一直没能找到机会把这些硬件变成实际的应用场景。但近年来，随着iot和AI的浪潮，我认为软硬件结合的时机已经成熟。让我们提前熟悉一下如何操作这些多媒体硬件。首先，图像识别是最受欢迎的应用场景。首先调用相机截图。

　　试玩的效果请看：相机截图

API兼容性

　　核心api是navigator.MediaDevices，从caniuse可以看出，PC端除了IE没有大问题。新版手机浏览器也支持，很多项目都转向了小程序。另外，移动端始终保持最新标准，所以没有大问题。然后是支持度更好的视频标签。最后还有canvas，支撑更是看好。

硬件的获取

　　使用的API:枚举设备，返回一个承诺，结果是设备列表。设备的对象属性主要包括deviceId、groupId和kind。其中deviceId和groupId是设备的标识，通过这两个Id可以调用它们所属的硬件。种类，顾名思义，是一种硬件类型。使用enumerateDevices，可以遍历硬件，同时可以选择相应的硬件并调用它。

　　//遍历多媒体硬件navigator . media devices . enumerate devices()。然后(function(devices){ console . log(devices))；/* { device id: groupId: 8 CAC 2d 9 a 9 e 5d 30 a 7 BF C5 a 33 b 9971 a 3d 40 a 850 f 7 b 0 f 6634 b 7 f 41 f 7 db E1 de 0 a 519 kind: audio input label: }[]*/})；

调用摄像头

　　然后开始调用相应的硬件。这里，将使用另一个API getuser media。同样，它返回一个承诺，结果是一个视频流。有了视频流，就简单了。将流设置为srcObject of Video，一个视频监控应用马上就出来了。

　　getUserMedia的参数设置比较复杂。详情请参考MDN中的文档getUserMedia。我这里设置的是对应摄像头和视频的大小。加载元数据后，loadedmetadata事件触发视频播放。

　　//调用摄像头，将流导入video navigator . media devices . get user media({ video:{ GroupID，width: 800，height: 600}})。然后(function(stream){ video . src object=stream；media track=stream . get tracks()[0]；video . onloadedmetadata=function(e){ video . play()；};}).catch(console . log)；

视频的截图

　　最后，捕获视频图像，使用画布的drawimage。这个api不仅支持将画布对象和图像对象渲染到画布中，还支持视频对象，完美的解决了我们的需求。核心代码如下：

　　//写入画布，转换为base64ctx.drawimage (video，0，0，canvas.width，canvas . height)；const imgURL=canvas . toda taurl( image/JPEG )；根据需要，我们可以将图像数据转换成流或二进制。我在这里将其转换为base64，当我得到数据时，我可以发挥我的想象力。张量流，机器学习，模式识别，还有很多应用场景。

　　这篇关于html5调用相机截图的文章到此为止。更多相关html5通话摄像头内容，请搜索往期文章或继续浏览以下相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。