运用HTML5捕获音频与视频信息概述及实例
音频与视频信息的捕获不断是Web开发中的一个难点，下面为大家介绍一种新的API,该API通过使用navigatior.getUserMedia()办法来让Web利用程序具有拜访会员摄像头与麦克风设备的能力本文概述
长期以来,音频与视频信息的捕获不断是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>相关引荐：
html5+canvas动态实现饼状图步骤详解
HTML5声音录制/播放功效的实现代码
以上就是使用HTML5捕获音频与视频信息概述及实例的具体内容，更多请关注百分百源码网其它相关文章！
