浏览器的用户媒体对象捕获摄像头信息
通过浏览器用户媒体对象实现的捕获摄像头信息显示到界面功能。
浏览器支持情况
新版本的chrome、firefox
效果展示
注意：需要在浏览器上点击允许使用摄像头
源代码
<!DOCTYPE html>
<html>
<head>
<title>捕获摄像头信息</title>
</head>
<body>
<video id="video" width="400" height="300">浏览器不支持video标签</video>
<script type="text/javascript">
// 由于浏览器实现不同，一个兼容版本
var getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
getUserMedia.call(navigator, {
video: true,
audio: true
}, function(localMediaStream) {
var video = document.getElementById("video");
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
console.log("Label: " + localMediaStream.label);
console.log("AudioTracks" , localMediaStream.getAudioTracks());
console.log("VideoTracks" , localMediaStream.getVideoTracks());
};
video.play();
}, function(e) {
console.log("错误！", e);
});
</script>
</body>
</html>
关注微信公众帐号