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

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捕捉音频与视频信息概述及实例的详细内容，更多请关注php中文网其它相关文章！

关键词：运用HTML5捕捉音频与视频信息概述及案例