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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
react国际化react-intl的使用
May 06 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转盘抽奖接口实例
2015/02/09 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Python3基础之list列表实例解析
2014/08/13 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python学习开发mock接口
2019/04/28 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
YUV转为jpg图像的实现
2019/12/09 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
生产部经理岗位职责
2013/12/16 职场文书
男方父母证婚词
2014/01/12 职场文书
校运会入场式解说词
2014/02/10 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年个人年终总结
2015/03/09 职场文书
创建文明城市倡议书
2015/04/28 职场文书
大学生社会实践感想
2015/08/11 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL