H5 调用摄像头进行拍照

如果人生是一个圆,那么总会有一个人是你最终的切线。

注意: 必须使用https哦~

功能点

写法上没有做很多兼容性的处理，大概写了一下逻辑。

效果


代码

<!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">
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        html,
        body,
        video,
        canvas {
            width: 100%;
            height: 100%;
        }

        .take-photo,
        .save-photo {
            width: 70px;
            height: 70px;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            bottom: 120px;
            transform: translateX(-50%);
        }

        .save-photo {
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        }

        .save-photo:active,
        .take-photo:active {
            opacity: .7;
        }
    </style>
</head>

<body>
    <video></video>
    <canvas></canvas>
    <div class="take-photo"></div>
    <div class="save-photo"></div>

    <script>
        let vConsole = new window.VConsole();
        let video = document.querySelector('video');
        let canvas = document.querySelector("canvas");
        let taskPhoto = document.querySelector('.take-photo')
        let savePhoto = document.querySelector('.save-photo')

        canvas.hidden = true;
        taskPhoto.hidden = true;
        savePhoto.hidden = true;
        if (navigator.mediaDevices.getUserMedia) {
            // facingMode: "user" 前置摄像头
            // facingMode: { exact: "environment" } 强制使用后置摄像头
            let constraints = { audio: false, video: { width: document.body.clientHeight, height: document.body.clientWidth, facingMode: { exact: "environment" } } };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (mediaStream) {
                    video.setAttribute('autoplay', '');
                    video.setAttribute('muted', '');
                    video.setAttribute('playsinline', '');
                    video.srcObject = mediaStream;
                    taskPhoto.hidden = false;
                })
                .catch(function (err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误
        } else console.log("您的浏览器不支持");

        taskPhoto.addEventListener('click', () => {
            let c = canvas.getContext('2d');
            canvas.width = video.clientWidth;
            canvas.height = video.clientHeight;
            c.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
            video.pause();
            canvas.hidden = false;
            savePhoto.hidden = false;
            taskPhoto.hidden = true;
        })

        savePhoto.addEventListener('click', () => {
            let a = document.createElement('a');
            a.href = canvas.toDataURL()
            a.download = "照片.png";
            a.click();
            savePhoto.hidden = true;
            canvas.hidden = true;
            taskPhoto.hidden = false;
            video.play();
        });

    </script>
</body>

</html>
posted @ 2022-04-11 21:09  林一怂儿  阅读(867)  评论(0)  编辑  收藏  举报