长期以来,音频与视频信息的捕捉一直是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 5捕捉音频与视频信息的更多相关文章

  1. 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK

    LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...

  2. Windows Store App 音频和视频

    在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...

  3. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...

  4. Android四大组件之ContentProvider(二)读取设备上的图片、音频和视频

    Android系统提供了MediaScanner,MediaProvider,MediaStore等接口,通过Content Provider的方式提供给用户.当设备开机或者有SD卡插拔等事件发生时, ...

  5. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  6. javaweb中上传视频,并且播放,用上传视频信息为例

    1.上传视频信息的jsp页面uploadVideo.jsp <body background="image/bk_hero.jpg"><div id=" ...

  7. Web开发——HTML基础(图像、音频和视频内容)

    参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...

  8. 网页中创建音频、视频和Flash等多媒体:object元素

    <object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...

  9. .NET 处理视频-MediaInfo 获取视频信息

    获取视频信息的组件很多,本节介绍的是:MediaFile. 第一步.添加 MediaInfoDotNet 在项目上右键,选择“管理 NuGet 程序包”,浏览以选中 MediaInfoDotNet,然 ...

随机推荐

  1. web端跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  2. 与你相遇好幸运,Sail.js定义其他主键

    uuid : { type: 'string', unique: true, required: true, primaryKey: true },

  3. oracle数据库出现“批处理中出现错误: ORA-00001: 违反唯一约束条件”解决方法

    最近使用oraclede impdp工具全库导入数据库时,在数据库里面使用出现如下情况. SQL state : 违反唯一约束条件 (GDXAORCL.SYS_C0055359) ; nested e ...

  4. 在source insight中集成astyle

    转自:http://www.cnblogs.com/xuxm2007/archive/2013/04/06/3002390.html 好吧,我有代码格式的强迫症,代码不整齐,我看的都头疼,之前一直喜欢 ...

  5. map[C++]

    //map是一个存储键值对的容器,也是一个双向链表 #include <iostream> using namespace std; #include <map> int ma ...

  6. wpf template的code写法

    this.Template = XamlReader.Load ("<ControlTemplate xmlns='http://schemas.microsoft.com/clien ...

  7. JDBC之——一个单线程JDBC基类和一些注意事项

    下面的一个DBase基类提供了一些jdbc的基本操作,配置文件的配置部分并不准确,只是在自己机器上的mysql中测试过.. 数据库的增删改方法中都在开始调用了getConnection方法,末尾调用了 ...

  8. Linux2.6 内核的 Initrd 机制解析

    文章来自:www.ibm.com/developerworks/cn/linux/l-k26initrd/ 1.什么是 Initrd initrd 的英文含义是 boot loader initial ...

  9. AES128和AES256主要区别和安全程度是多少?他们对于机器的消耗是怎样的?两者性能如何?实际开发如何选择?

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES, ...

  10. pig的各种运行模式与运行方式详解

    一.pig的运行模式: Pig 有两种运行模式: Local 模式和 MapReduce 模式.当 Pig 在 Local 模式运行的时候, Pig 将只访问本地一台主机:当 Pig 在 MapRed ...