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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
javascript清空table表格的方法
May 14 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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+SqlServer实现分页显示
2006/10/09 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
建设单位项目负责人任命书
2014/06/06 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
元旦晚会开场白
2015/05/29 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016十一国庆节感言
2015/12/09 职场文书
股东协议书范本2016
2016/03/21 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
Golang map映射的用法
2022/04/22 Golang