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检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
9个JavaScript日常开发小技巧
Oct 06 Javascript
vue实现标签云效果的示例
Nov 09 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 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
prototype class详解
2006/09/07 Javascript
Js之软键盘实现(js源码)
2007/01/30 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
python概率计算器实例分析
2015/03/25 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
第二课堂活动总结
2014/05/07 职场文书
技校毕业生自荐书
2014/05/23 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
公务员年度个人总结
2015/02/12 职场文书
预备党员自我评价范文
2015/03/04 职场文书
答谢酒会主持词
2015/07/02 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
MySQL之select、distinct、limit的使用
2021/11/11 MySQL