html5调用摄像头截图功能
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。
demo的效果请看：摄像头截图
API兼容性
核心的api就是navigator.MediaDevices，从caniuse可看出，PC端除了IE，已经没多大问题。移动端新版本浏览器也支持，同时很多项目都已经转向小程序，加上移动端一向紧跟最新标准，问题也不大。接着就是支持度就更好的video标签。最后还有canvas，支持度就更加乐观了。
硬件的获取
使用到的api：enumerateDevices，它返回的是一个promise，结果就是设备列表。设备的对象属性主要包括 deviceId，groupId，kind。其中deviceId，groupId 是设备的标记，可以通过这两个id调用所属的硬件。而kind 顾名思义就是硬件类型了。有了enumerateDevices就可以遍历硬件，同时可以实现选择对应的硬件并调用。
//遍历多媒体硬件
navigator.mediaDevices.enumerateDevices().then(function (devices) {
console.log(devices);
/*
{
deviceId: ""
groupId: "8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519"
kind: "audioinput"
label: ""
} []
*/
});
调用摄像头
接着开始调用对应的硬件，这里会使用到另一个api，getUserMedia，同样它返回的也是一个promise，结果是一个视频流。有了视频流就好办了，把stream设置到video的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对象和image对象渲染进画布，同时还支持video对象，这就完美解决了我们的需求，核心代码如下：
//写入画布，并转换为base64
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgURL = canvas.toDataURL('image/jpeg');
根据需求我们可以把图片数据转换为流或二进制，我这里转换为base64，拿到了数据就可以发挥想象了，tensorflow，机器学习，模式识别，大把的应用场景。
到此这篇关于html5调用摄像头截图的文章就介绍到这了,更多相关html5调用摄像头内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 本文给大家分享html5调用摄像头实例代码，代码简单易懂，对前端html5的学习有很大帮助，如果对html5调用摄像头相关知识感兴趣的朋友一起看看吧2021-06-28
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
这篇文章主要介绍了HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值2020-04-27- 这篇文章主要介绍了Html5调用手机摄像头并实现人脸识别的实现，混合App开发，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-21
- 这篇文章主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-07
最新评论