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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
在 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
详解php中的implements 使用
2017/06/13 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python函数的5种参数详解
2017/02/24 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
Python 实现集合Set的示例
2020/12/21 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
银行反四风对照检查材料
2014/09/29 职场文书
服务承诺书
2015/01/19 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
小学数学教学随笔
2015/08/14 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python