应用HTML5捕获声频与视頻信息内容简述及案例

日期:2020-09-18 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

本文简述
长期性以来,声频与视頻信息内容的捕获1直是Web开发设计中的1个难点。很多年来,大家1直依靠访问器软件来完成这个要求。
在HTML 5中,出現了很多能够浏览硬件配置机器设备的API,比如浏览GPS机器设备的Geolocation API、浏览accelerometer机器设备的Orientation API、浏览GPU机器设备的WebGL API、浏览声频播发机器设备的Web Audio API这些。这些API是是非非常强劲的,由于开发设计者能够立即根据撰写JavaSccript脚本制作编码来浏览最底层硬件配置机器设备。
本文详细介绍1种新的API,该API根据应用navigatior.getUserMedia()方式来让Web运用程序流程有着浏览客户摄像头与话筒机器设备的工作能力。

捕获新闻媒体数据信息的技术性发展趋势历史时间
在以往几年里,刚开始出現了在Web运用程序流程中浏览顾客端当地机器设备的要求,因而,W3C机构决策机构1个DAP(Device APIS POLICY)工作中小组,来为该要求的完成制订1个统1的规范。
接下来让大家看来看在2011年产生了哪些事儿:

在HTML网页页面文档中完成新闻媒体数据信息的捕获
DAP工作中小组的第1个要制订的规范便是怎样在Web运用程序流程的HTML网页页面中完成新闻媒体数据信息的捕获。她们决策重载种类为file的input元素(<input type="file">),而且为accept特性加上1个新的特性值。
假如开发设计者想完成客户根据摄像头开展照相的作用,能够撰写以下所示的编码。

拷贝编码
编码以下:

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

录制视頻数据信息与声频数据信息的编码与之相近:

拷贝编码
编码以下:

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

在这些编码中,只需应用file控制(种类为file的input元素)便可进行照相或录制新闻媒体数据信息的作用。可是在由于这些编码中尚欠缺1些完成与之有关的要求(比如在canvas元素中3D渲染捕获到的视頻数据信息,或对捕获到的视頻数据信息运用WEBGL滤镜)的工作能力,因此沒有获得开发设计者的普遍运用。
适用访问器:
Android 3.0访问器
Chrome for Android (0.16)
Firefox Mobile 10.0
device元素
假如应用file控制,则捕获新闻媒体数据信息后对其开展解决的工作能力是是非非常比较有限的,因此出現了1种新的可适用任何机器设备的规范。该规范应用device元素。
Opera访问器是第1个根据device元素完成视頻数据信息捕获的访问器。基本上在同1天,WhatWG机构决策应用navigator.getUserMedia()方式来捕获新闻媒体数据信息。1个礼拜后,Opera推出1个新的适用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>

适用访问器
悲剧的是,现阶段为止尚沒有1个宣布版的访问器中适用device元素。
WEBRTC
近期,因为WebRTC(Web Real Time Communication:Web即时通讯)API的出現,新闻媒体数据信息捕获技术性又有了1个很大的发展趋势。Google、Opera、Mozilla等企业均正在勤奋将实际上如今自身的访问器中。
WebRTC API是1个与getUserMedia方式密不可分有关的API,它出示1种浏览顾客端当地的摄像头或话筒机器设备的工作能力。
适用访问器:
现阶段为止,在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方式的第1个主要参数是1个用于特定新闻媒体种类的目标。比如,当你想浏览摄像头机器设备时,第1个主要参数应当为{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元素特定了1个引入新闻媒体文档的URL详细地址,另外将意味着了从摄像头中所获得到的视頻数据信息的LocalMediaStream目标变换为1个Blob URL。
在这段编码中,另外为video元素应用autoplay特性,假如不应用该特性,则video元素将滞留在所获得的第1帧画面处。
请留意:在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方式时,显示信息1个提醒对话框,了解客户是不是容许或回绝浏览她们的摄像头或话筒。
照相
在Canvas API中,可使用ctx.drawImage(video,0,0)方式将video元素中的某1帧画面輸出到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>