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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
关于js遍历表格的实例
Jul 10 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
javascript实现电脑和手机版样式切换
Nov 10 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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 array_push 数组函数
2009/12/26 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php购物车实现方法
2015/01/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Django 内置权限扩展案例详解
2019/03/04 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
后进生转化工作制度
2014/01/17 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
年度考核评语
2014/01/19 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
中秋节慰问信
2015/02/15 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python