html5调用音视频等多媒体硬件的API已经非常成熟，但是目前还没有机会将这种硬件转化为实际的应用场景。 然而，随着近年来物联网和人工智能的浪潮html 调用摄像头，我认为是时候将软件和硬件结合起来了。 已经成熟了。 那么我们就先来熟悉一下如何操作这个多媒体硬件吧。 首先，图像识别是目前最流行的应用场景。 首先，我们可以调用相机并进行截图。
请看demo的效果：相机截图
API兼容性
核心 api 是 navigator.MediaDevices。 从caniuse可以看出PC端不仅仅是IE，但是没有什么大问题。 移动端新版浏览器也支持了。 与此同时，很多项目已经转向小程序。 另外，移动端一直遵循最新标准，所以没有任何问题。 然后是支持更好的视频标签。 终于有画布了，支持就更豁达了。
购置硬件
使用的API：enumerateDeviceshtml 调用摄像头，它返回一个promise，结果是一个设备列表。 设备的对象属性主要包括deviceId、groupId、kind。 其中deviceId和groupId是设备的标签，通过这两个id可以调用其所属的硬件。 顾名思义，种类是硬件的类型。 通过enumerateDevices可以遍历硬件，同时可以选择并调用对应的硬件。
//遍历多媒体硬件
navigator.mediaDevices.enumerateDevices().then(function (devices) {
console.log(devices);
/*
{
deviceId: ""
groupId: "8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519"
kind: "audioinput"
label: ""
} []
*/
});
调用相机
然后开始调用相应的硬件。 这里将使用另一个 api getUserMedia。 它还返回一个承诺，结果是一个视频流。 有了视频流，就很容易搞定了。 将流设置为视频的srcObject，立刻就会有一个视频监控应用下来。
getUserMedia的参数设置比较复杂。 具体可以参考MDN上的getUserMedia文档。 这里我设置了相应的摄像头和视频规格。 loadedmetadata事件在元数据（metadata）加载后触发视频播放。
// 调用摄像头，并将流导入video
navigator.mediaDevices.getUserMedia({
video: { groupId, width: 800, height: 600 }
}).then(function (stream) {
video.srcObject = stream;
mediaTrack = stream.getTracks()[0];
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(console.log);
视频截图
最后就是捕获视频屏幕，这里使用canvas的drawImage。 这个API不仅支持将canvas对象和图像对象渲染到canvas中，还支持视频对象，完美解决了我们的需求。 核心代码如下：
//写入画布，并转换为base64
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgURL = canvas.toDataURL('image/jpeg');
根据需要，我们可以将图像数据转换为流或二进制。 这里我将其转换为base64。 拿到数据后，你可以发挥你的想象力，张量流，机器学习，模式识别，还有很多应用场景。
至此，这篇关于html5调用相机截图的文章就介绍完了。 更多相关html5调用摄像头内容请搜索脚本之家原创文章或继续浏览下方相关文章。 希望大家以后多多支持脚本之家！
发表评论