关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧,首先图像识别是其中最热门的应用场景,首先实现调用摄像头以及截图。

demo的效果请看:摄像头截图

API兼容性

核心的api就是navigator.MediaDevices,从caniuse可看出,PC端除了IE,已经没多大问题。移动端新版本浏览器也支持,同时很多项目都已经转向小程序,加上移动端一向紧跟最新标准,问题也不大。接着就是支持度就更好的video标签。最后还有canvas,支持度就更加乐观了。

硬件的获取

使用到的api:enumerateDevices,它返回的是一个promise,结果就是设备列表。设备的对象属性主要包括 deviceIdgroupIdkind。其中deviceIdgroupId 是设备的标记,可以通过这两个id调用所属的硬件。而kind 顾名思义就是硬件类型了。有了enumerateDevices就可以遍历硬件,同时可以实现选择对应的硬件并调用。

//遍历多媒体硬件
navigator.mediaDevices.enumerateDevices().then(function (devices) {
console.log(devices);
/*
{
deviceId: ""
groupId: "8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519"
kind: "audioinput"
label: ""
} []
*/
});

调用摄像头

接着开始调用对应的硬件,这里会使用到另一个api,getUserMedia,同样它返回的也是一个promise,结果是一个视频流。有了视频流就好办了,把stream设置到videosrcObject,马上一个视频监控的应用就出来了。

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);

视频的截图

最后就是截取视频画面了,这就用到了canvasdrawImage,这个api不仅支持把canvas对象和image对象渲染进画布,同时还支持video对象,这就完美解决了我们的需求,核心代码如下:

//写入画布,并转换为base64
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgURL = canvas.toDataURL('image/jpeg');

根据需求我们可以把图片数据转换为流或二进制,我这里转换为base64,拿到了数据就可以发挥想象了,tensorflow,机器学习,模式识别,大把的应用场景。

html5调用摄像头截图的更多相关文章

  1. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  2. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  3. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  4. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  5. Java调用摄像头截图

    使用webcam-capture替换JMF调用摄像头 最近有个需要通过java调用摄像头,并截图的需求,在网上找了下资料,大部分是用一个叫jmf的库,但是jmf已经几百年没有更新,用起来各种问题.后来 ...

  6. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  7. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  8. HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  9. html5 调用摄像头

    ---移动设备--- <input type="file" capture="camera" accept="image/*" id= ...

随机推荐

  1. 手写Bitset优化

    一种优化方法,具体例子可以看这里 这里只是存一下手写Bitset的板子 struct Bitset { unsigned a[1600]; void reset() { memset(a,0,size ...

  2. 常见 js 数组方法使用详解

    数组常用方法总结 concat filter map some every reduce sort includes join some every 语法:array.every(function(c ...

  3. Bedtools genomecov 计算覆盖度

    简单说明: 从2.28.0版开始,bedtools使用htslib库支持CRAM格式 除了BAM文件,bedtools默认所有的输入文件都以TAB键分割 除非使用-sorted选项,bedtools默 ...

  4. Mysql优化,ICP、BNL算法、BKA算法、MMR算法

    ICP(Index Condition Pushdown,索引条件下推)是MySQL5.6版本中的新特性,是一种在存储引擎层使用索引过滤数据的一种优化方式. 出现原因:ICP出现Mysql5.6以前, ...

  5. 生成随机数的N种方式

    首先需要说明的是,计算机中生成的随机数严格来说都是伪随机,即非真正的随机数,真正随机数的随机样本不可重现.那么我们来看看代码中有哪些方式可以生成随机数. rand rand函数声明如下: #inclu ...

  6. Azkaban(二)【WorkFlow案例实操】

    目录 1.使用步骤 2.案例: 1.hello word 2.作业依赖[dependsOn配置作业的依赖关系] 3.内嵌工作流 4.全局配置 [在开头通过config进行配置,后续可以通过${属性名} ...

  7. 【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.  ...

  8. 修改 Gradle 插件(Plugins)的下载地址(repositories)

    Gradle 也可以用下面的方式声明使用的插件: 1234 // build.gradleplugins { id 'com.example.plugin', version '1.0'} 其实是从 ...

  9. Oracle—回车、换行符

    1.回车换行符 chr(10)是换行符, chr(13)是回车, 增加换行符: select ' update ' || table_name || ' set VALID_STATE =''0A'' ...

  10. Apache架构师的30条设计原则

    本文作者叫 Srinath,是一位科学家,软件架构师,也是一名在分布式系统上工作的程序员. 他是 Apache Axis2 项目的联合创始人,也是 Apache Software 基金会的成员. 他是 ...