<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>