关于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. logname

    logname命令用来显示用户名称. 语法 logname(选项) 选项 --help:在线帮助: --vesion:显示版本信息.

  2. Atom编辑器速查

    简介 Atom 是 Github 开源的文本编辑器,相当于半个IDE.其特点如下: (1)免费开源,多平台支持(Windows.Mac.Linux): (2)界面美观.现代化,使用舒适: (3)多文件 ...

  3. CPU大小端模式及转换

    通信协议中的数据传输.数组的存储方式.数据的强制转换等这些都会牵涉到大小端问题. CPU的大端和小端模式很多地方都会用到,但还是有许多朋友不知道,今天暂且普及一下. 一.为什么会有大小端模式之分呢? ...

  4. 联盛德 HLK-W806 (六): I2C驱动SSD1306 128x64 OLED液晶屏

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  5. 【leetcode】337. House Robber III

    The thief has found himself a new place for his thievery again. There is only one entrance to this a ...

  6. 复制virtualbox虚拟硬盘

    D:\VirtualBox\VBoxManage.exe clonevdi F:\virtualbox\rac1\rac1.vdi F:\virtualbox\rac2\rac2.vdi 虚拟机软件安 ...

  7. 优化 if-else 代码的 8 种方案

    前言 代码中如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文将介绍优化if-else代码的八种方案. 方案. 优化方案一:提前return,去除不必要的el ...

  8. 图书管理系统总结——JAVA Swing控件简介

    断断续续学习JAVA语言,写了一个多月数据库大作业,终于在五一过后写完了.由于第一次使用JAVA和数据库,遇到了许多问题,记录下来,以备以后查看. 我使用的JAVA SE,说实话,在开发后期,觉得JA ...

  9. fatal: unable to access 'https://github.com/xxxxx/xxxx.git/': Failed to connect to github.com port 443: Timed out

    今天使用git push的时候提示"fatal: unable to access 'https://github.com/xxxxx/xxxx.git/': Failed to conne ...

  10. 使用$.post方式来实现页面的局部刷新功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...