html5调用摄像头截图功能


Posted in Javascript onJanuary 18, 2022

关于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调用摄像头内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
jquery实现图片切换代码
Oct 13 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
vue实现图片上传到后台
Jun 29 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 #Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
浅谈JavaScript作用域
Dec 06 #Javascript
JavaScript流程控制(循环)
Dec 06 #Javascript
JavaScript流程控制(分支)
Dec 06 #Javascript
JavaScript实现队列结构过程
Dec 06 #Javascript
JavaScript实现栈结构详细过程
Dec 06 #Javascript
You might like
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
javascript eval函数深入认识
2009/02/21 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
jquery实现动态画圆
2014/12/04 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
简单了解Django模板的使用
2017/12/20 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
如何对python的字典进行排序
2020/06/19 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
创联软件面试题笔试题
2012/10/07 面试题
实习自我鉴定范文
2013/10/30 职场文书
学生实习介绍信
2014/01/15 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
心得体会格式及范文
2016/01/25 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
js 数组 fill() 填充方法
2021/11/02 Javascript