使用HTML5捕捉音频与视频信息概述及实例


Posted in HTML / CSS onAugust 22, 2018

本文概述
长期以来,音频与视频信息的捕捉一直是Web开发中的一个难点。许多年来,我们一直依赖浏览器插件来实现这个需求。
在HTML 5中,出现了许多可以访问硬件设备的API,例如访问GPS设备的Geolocation API、访问accelerometer设备的Orientation API、访问GPU设备的WebGL API、访问音频播放设备的Web Audio API等等。这些API是非常强大的,因为开发者可以直接通过编写JavaSccript脚本代码来访问底层硬件设备。
本文介绍一种新的API,该API通过使用navigatior.getUserMedia()方法来让Web应用程序拥有访问用户摄像头与麦克风设备的能力。

捕捉媒体数据的技术发展历史
在过去几年里,开始出现了在Web应用程序中访问客户端本地设备的需求,因此,W3C组织决定组织一个DAP(Device APIS POLICY)工作小组,来为该需求的实现制定一个统一的标准。
接下来让我们来看看在2011年发生了哪些事情:

在HTML页面文件中实现媒体数据的捕捉
DAP工作小组的第一个要制定的标准就是如何在Web应用程序的HTML页面中实现媒体数据的捕捉。他们决定重载类型为file的input元素(<input type="file">),并且为accept属性添加一个新的属性值。
如果开发者想实现用户通过摄像头进行拍照的功能,可以书写如下所示的代码。

复制代码
代码如下:

<input type="file" accept="image/*;capture=camera">

录制视频数据与音频数据的代码与之类似:
复制代码
代码如下:

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

在这些代码中,只需使用file控件(类型为file的input元素)即可完成拍照或录制媒体数据的功能。但是在因为这些代码中尚缺乏一些实现与之相关的需求(例如在canvas元素中渲染捕捉到的视频数据,或者对捕捉到的视频数据应用WEBGL滤镜)的能力,所以没有得到开发者的广泛应用。
支持浏览器:
Android 3.0浏览器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
如果使用file控件,则捕捉媒体数据后对其进行处理的能力是非常有限的,所以出现了一种新的可支持任何设备的标准。该标准使用device元素。
Opera浏览器是第一个通过device元素实现视频数据捕捉的浏览器。几乎在同一天,WhatWG组织决定使用navigator.getUserMedia()方法来捕捉媒体数据。一个星期后,Opera推出一个新的支持navigator.getUserMedia()方法的浏览器。后来,Microsoft工具推出支持该方法的IE 9浏览器。
device元素的使用方法如下所示。
复制代码
代码如下:

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream) {
document.querySelector('video').src = stream.url;
}
</script>

支持浏览器
不幸的是,目前为止尚没有一个正式版的浏览器中支持device元素。
WEBRTC
最近,由于WebRTC(Web Real Time Communication:Web实时通信)API的出现,媒体数据捕捉技术又有了一个很大的发展。Google、Opera、Mozilla等公司均正在努力将其实现在自己的浏览器中。
WebRTC API是一个与getUserMedia方法紧密相关的API,它提供一种访问客户端本地的摄像头或麦克风设备的能力。
支持浏览器:
目前为止,在Chrome 18版浏览器中,在chrome://flags页面中进行设置后可使用WebRTC,在Chrome 21版本的浏览器中,该API被默认使用,不再需要设置。在Opera 12以上与Firefox 17版本的浏览器中默认支持WebRTC API。
使用getUserMedia方法
通过使用getUserMedia方法,我们可以不依靠插件而直接访问客户端本地的摄像头设备与麦克风设备。
检测浏览器支持
可以通过如下所示的方法来检测浏览器是否支持getUserMedia方法。
复制代码
代码如下:

function hasGetUserMedia() {
//请注意:在Opera浏览器中不使用前缀
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
alert('您的浏览器支持getUserMedia方法');
}
else {
alert('您的浏览器不支持getUserMedia方法');
}

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示:
复制代码
代码如下:

<video autoplay id="video"></video>
<script>
var onFailSoHard = function() {
alert('设备拒绝访问');
};
//不使用供应商前缀
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(localMediaStream);
//请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件
video.onloadedmetadata = function(e) {
//后续代码略
};
}, onFailSoHard);
</script>

在这段代码中,结合了video元素的使用。请注意我们没有使用video元素的src属性值,而是为video元素指定了一个引用媒体文件的URL地址,同时将代表了从摄像头中所获取到的视频数据的LocalMediaStream对象转换为一个Blob URL。
在这段代码中,同时为video元素使用autoplay属性,如果不使用该属性,则video元素将停留在所获取的第一帧画面处。
请注意:在Chrome浏览器中,如果只使用{audio:true},则引发BUG,在Opera浏览器中,同样不能使用audio元素。
如果你想让多个浏览器同时支持getUserMedia方法,请使用如下所示的代码:
复制代码
代码如下:

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.getElementById('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
}
else {
alert('您的浏览器不支持getUserMedia方法');
}

安全性
在有些浏览器中,当调用getUserMedia方法时,显示一个提示窗口,询问用户是否允许或拒绝访问他们的摄像头或麦克风。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法将video元素中的某一帧画面输出到canvas元素中。当然,既然我们已经将捕捉到的用户摄像头中的图像信息输出到video元素中,当然也可以将图像信息通过video元素输出到canvas元素中,即实现实时拍照功能,代码如下所示。
复制代码
代码如下:

<video autoplay></video>
<img src="" id="img" ></img>
<canvas style="display:none;" id="canvas" ></canvas>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.getElementById('img').src = canvas.toDataURL('image/png');
}
}
video.addEventListener('click', snapshot, false);
//不使用供应商前缀
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard);

应用CSS滤镜
目前为止,可以在Chrome 18以上版本的浏览器中使用CSS滤镜。
通过CSS滤镜的使用,我们可以对video元素中捕捉的视频添加各种图像滤镜效果。
复制代码
代码如下:

<style>
#video3 {
width: 307px;
height: 250px;
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
.grayscale {
-webkit-filter: grayscale(1);
}
.sepia {
-webkit-filter: sepia(1);
}
.blur {
-webkit-filter: blur(3px);
}
...
</style>
<video id="video" autoplay></video>
<script>
var idx = 0;
var filters = ['grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate',
'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', ''];
function changeFilter(e) {
var el = e.target;
el.className = '';
var effect = filters[idx++ % filters.length]; // loop through filters.
if (effect) {
el.classList.add(effect);
}
}
document.getElementById('video').addEventListener('click', changeFilter, false);
</script>
HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 #HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 #HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 #HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 #HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 #HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP中的正规表达式(二)
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python版本单链表实现代码
2018/09/28 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python向图片里添加文字
2019/11/26 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
大二自我鉴定
2014/01/31 职场文书
个人银行贷款担保书
2014/04/01 职场文书
党员服务承诺书
2014/05/28 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
大学体育课感想
2015/08/10 职场文书
新年寄语2016
2015/08/17 职场文书