<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.video{
position: absolute;
bottom:0;
top:0;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<video autoplay class='video'></video>
<img src="">
<canvas style="display:none;"></canvas>
</body>
</html>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// “image/webp”对Chrome有效，
// 其他浏览器自动降为image/png
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, errorCallback);
function errorCallback(){
console.log('我是错误回调');
}
</script>
网友评论