You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
HTML
93 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>实验01.抓取摄像头图片到画布</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="temp">
|
|
<div title="摄像头">
|
|
<video class="p-camera" muted autoplay></video>
|
|
<button class="p-button">拍照</button>
|
|
</div>
|
|
<div title="画布">
|
|
<canvas class="p-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
:root {
|
|
font-size: 1vw;
|
|
--c-d-1: #000;
|
|
--c-l-1: #FFF;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
padding: 1rem;
|
|
background-color: var(--c-l-1);
|
|
}
|
|
|
|
.temp {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.temp>* {
|
|
border: var(--c-d-1) .1rem solid;
|
|
min-height: 10rem;
|
|
position: relative;
|
|
padding: .7rem;
|
|
}
|
|
|
|
.temp>*[title]::before {
|
|
content: attr(title);
|
|
position: absolute;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
background-color: var(--c-l-1);
|
|
top: -.7rem;
|
|
left: 1rem;
|
|
}
|
|
.p-camera,.p-canvas {
|
|
background-color: var(--c-d-1);
|
|
width: 100%;
|
|
height: 40vh;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
let root = document.body;
|
|
let camera = root.querySelector(".p-camera");
|
|
let button = root.querySelector(".p-button");
|
|
let canvas = root.querySelector(".p-canvas");
|
|
console.debug(camera,button,canvas);
|
|
console.debug(camera.clientWidth,camera.clientHeight);
|
|
canvas.setAttribute("width",camera.clientWidth);
|
|
canvas.setAttribute("height",camera.clientHeight);
|
|
camera.setAttribute("width",camera.clientWidth);
|
|
camera.setAttribute("height",camera.clientHeight);
|
|
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio:false,
|
|
video:{
|
|
facingMode: "environment",//前置:user,后置:environment
|
|
width: {ideal: camera.clientWidth},
|
|
height: {ideal: camera.clientHeight }
|
|
|
|
}
|
|
}).then((stream)=>{
|
|
camera.srcObject=stream;
|
|
}).catch(e=>{
|
|
console.debug(e.message);
|
|
console.error(e);
|
|
});
|
|
button.addEventListener("click",()=>{
|
|
canvas.getContext('2d').drawImage(camera, 0, 0, camera.clientWidth,camera.clientHeight);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |