aelked
js调起摄像头并且拍照。
<div id="contain">
<video id="video" autoplay style="background-color: black;"></video>
<canvas style="display: none;" id="canvas"></canvas>
<img id="imgxx" alt="">
</div>
<button id="btn_snap" onclick="takePhoto()">拍照</button>
<script>
let cvs = document.getElementById('canvas')
let video = document.getElementById('video')
cvs.width = cvs.height = video.width = video.height =400
let {width, height} = cvs
let ctx = cvs.getContext('2d')
let contain = {
video:{
width,
height
}
}
navigator.mediaDevices.getUserMedia(contain).then(stream => {
video.srcObject = stream
video.onloadedmetadata = () => video.play()
})
function takePhoto() {
ctx.drawImage(video,0,0,width,height)
document.getElementById('imgxx').src = canvas.toDataURL('imaage/png')
}
</script>