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

o: 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>