html+js 网页调用网络摄像头点击拍照并且……

小半 • 2023年1月12日下午2:08 • 技术随笔 • 阅读 251

就像这种，调用网页摄像头，然后点击就能截取定格，之后可以进阶搞一些更好玩的东西

复制就能用，在老代码基础上改的，有些东西你们自己修改一下就好了

可以加上什么人脸识别，或者物体检测，手势…..

一个坑点：如果部署在自己云服务器上的话，可能是需要https才能允许摄像头的

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>长歌-身份验证</title>
</head>

<body>
    <iframe name="formSubmit" style="display:none;"></iframe>
    <form class="form-inline" target="formSubmit" method="post">    
    <input id="input"  type="text" placeholder="交钱了！" name = "chishi" style="display:none">
    <input name = "button1" type = "submit" id ="button_take" value="身份认证">
    </form>
    <div style="float: left;width:50%"><video id="v"></video></div>
    <canvas id="canvas" style="display:none;"></canvas><br />
    <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo" style="float: left;">
</body>

<script>
    !(function () {
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;


                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }


                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let videoPlaying = false;
        let v = document.getElementById('v');
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
                v.srcObject = stream;
            } else {

                v.src = window.URL.createObjectURL(stream);
            }
            v.onloadedmetadata = function (e) {
                v.play();
                videoPlaying = true;
            };
        }).catch(err => {
            console.error(err.name + ": " + err.message);
        });
        var xxx = 0;
        let data = canvas.toDataURL('image/webp');
        document.getElementById('button_take').addEventListener('click', function () {
            if (xxx < 1){
                if (videoPlaying) {
                let canvas = document.getElementById('canvas');
                canvas.width = v.videoWidth;
                canvas.height = v.videoHeight;
                canvas.getContext('2d').drawImage(v, 0, 0);
                data = canvas.toDataURL('image/webp');
                console.log(data);
                document.getElementById('input').setAttribute('value', data);

            }
            }  
            
        }, false);
    })();
    
</script>

</html>

原理就是一开始生成两个框，然后点击按钮之后获取当前第一个框内的图片base64在第二个框输出