html5调用摄像头截图
关于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调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
- web HTML5 调用摄像头的代码
最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- html5调用摄像头并拍照
随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...
- Java调用摄像头截图
使用webcam-capture替换JMF调用摄像头 最近有个需要通过java调用摄像头,并截图的需求,在网上找了下资料,大部分是用一个叫jmf的库,但是jmf已经几百年没有更新,用起来各种问题.后来 ...
- getUserMedia API及HTML5 调用摄像头和麦克风
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- html5调用摄像头功能
前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...
- html5 调用摄像头
---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...
随机推荐
- 手写Bitset优化
一种优化方法,具体例子可以看这里 这里只是存一下手写Bitset的板子 struct Bitset { unsigned a[1600]; void reset() { memset(a,0,size ...
- 常见 js 数组方法使用详解
数组常用方法总结 concat filter map some every reduce sort includes join some every 语法:array.every(function(c ...
- Bedtools genomecov 计算覆盖度
简单说明: 从2.28.0版开始,bedtools使用htslib库支持CRAM格式 除了BAM文件,bedtools默认所有的输入文件都以TAB键分割 除非使用-sorted选项,bedtools默 ...
- Mysql优化,ICP、BNL算法、BKA算法、MMR算法
ICP(Index Condition Pushdown,索引条件下推)是MySQL5.6版本中的新特性,是一种在存储引擎层使用索引过滤数据的一种优化方式. 出现原因:ICP出现Mysql5.6以前, ...
- 生成随机数的N种方式
首先需要说明的是,计算机中生成的随机数严格来说都是伪随机,即非真正的随机数,真正随机数的随机样本不可重现.那么我们来看看代码中有哪些方式可以生成随机数. rand rand函数声明如下: #inclu ...
- Azkaban(二)【WorkFlow案例实操】
目录 1.使用步骤 2.案例: 1.hello word 2.作业依赖[dependsOn配置作业的依赖关系] 3.内嵌工作流 4.全局配置 [在开头通过config进行配置,后续可以通过${属性名} ...
- 【leetocde】922. Sort Array By Parity II
Given an array of integers nums, half of the integers in nums are odd, and the other half are even. ...
- 修改 Gradle 插件(Plugins)的下载地址(repositories)
Gradle 也可以用下面的方式声明使用的插件: 1234 // build.gradleplugins { id 'com.example.plugin', version '1.0'} 其实是从 ...
- Oracle—回车、换行符
1.回车换行符 chr(10)是换行符, chr(13)是回车, 增加换行符: select ' update ' || table_name || ' set VALID_STATE =''0A'' ...
- Apache架构师的30条设计原则
本文作者叫 Srinath,是一位科学家,软件架构师,也是一名在分布式系统上工作的程序员. 他是 Apache Axis2 项目的联合创始人,也是 Apache Software 基金会的成员. 他是 ...