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

码如下:
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({vide