欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

行使HTML5捕获音频与视频信息概述及实例

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

本文概述
恒久以来,音频与视频信息的捕获一向是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>
本文地址:http://itbyc.com/web/html5/13623.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1