使用HTML5,我们不需要借助插件就可以了直接在浏览器内获取camera数据了。这个功能的实现要感谢Webrtc这个东东。WebRTC,名称源自网页实时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla基金会、Opera支持下被包括进万维网联盟的W3C推荐标准。
获取数据的接口是:navigator.getUserMedia,现在Webrtc还没有写成正式标准,所以现在可能存在下面这几种接口形式:navigator.getUserMedia、 navigator.webkitGetUserMedia、navigator.mozGetUserMedia 、 navigator.msGetUserMedia。
函数原型:
navigator.getUserMedia ( constraints, successCallback, errorCallback );
参数介绍:
constraints:
必须项,successCallback中传入的 LocalMediaStream对象所支持的媒体类型。
constraints参数是一个 MediaStreamConstraints 对象,包含两个值为布尔值的成员:video 及 audio。这个参数描述了被 LocalMediaStream对象所支持的媒体类型,使用时,需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持, getUserMedia 会调用errorCallback函数,并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数,并传入错误类型MANDATORY_UNSATISFIED_ERR。
若某种媒体类型未被指定,他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video:
{ video: true, audio: true }
successCallback:
必须项,当应用中传递LocalMediaStream对象时触发的函数。
getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象,这个对象包含媒体流。你可以将这个对象分配给适合的元素,之后处理,就像下面例子所做的一样。
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
errorCallback:
可选项,当调用媒体设备失败时触发的函数。
getUserMedia 函数调用errorCallback 时会包含一个 code 参数,如下所示:
PERMISSION_DENIED 用户拒绝了浏览器请求媒体的权限
NOT_SUPPORTED_ERROR constraint中指定的媒体类型不被支持
MANDATORY_UNSATISFIED_ERROR 指定的媒体类型未接收到媒体流
最后是一个demo,把摄像头图像显示在video标签内。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Copying video into canvas</title>
</head>
<body>
<h1>Video:</h1>
<video autoplay>
Your browser does not support the video tag.
</video>
<script>
function fallback(e) {
video.src = 'fallbackvideo.webm';
}
function success(stream) {
video.src = window.URL.createObjectURL(stream);
}
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, success,fallback);
} else {
fallback(); // fallback.
console.log('getUserMedia Rejected!', e);
}
</script>
</body>
</html>