js 如何调用摄像头拍照

最新推荐文章于 2024-07-25 09:24:40 发布

__Rain__

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量4.8k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_72436362/article/details/128321359

版权

今天业务逻辑需要人脸验证，需要通过调用摄像头获取人脸来调用接口做对比，所以学习了一下js关于调用摄像头拍照。主要通过video调用摄像头和canvas截取画面。

话不多说直接上代码：

<!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>Document</title>
</head>

<body>
    <video width="500" height="500" autoplay class="video"></video>
    <canvas width="500" height="500"></canvas>
    <button onclick="openx()">调用摄像头</button>
    <button onclick="pho()">拍照</button>
    <button onclick="exit()">关闭摄像头</button>
</body>

</html>
<script>
    let video = document.querySelector('.video');
    let canvas = document.querySelector('canvas');
    function openx() {
        let constraints = {
            video: {            //这里是摄像头的信息
                height: 500,
                width: 500
            },
        // audio: true,  //是否开启麦克风
        }
        let isok = navigator.mediaDevices.getUserMedia(constraints); //这里主要是用于请求用户打开摄像头的权限
        isok.then(res => {     //可以看出是使用promise封装的 那么我们就可以使用then和catch
            video.srcObject = res;    //用户允许时 将摄像头对象的画面转移到video上面
            video.play();                //打开video的画面
        }).catch((err) => {
            console.log(err)            //拒绝时打印错误信息
        })
    }
    function pho() {
        canvas.getContext("2d").drawImage(video, 0, 0, 300, 300);   //第一个参数为要截取的dom对象，第二个和第三个为xy轴的偏移值    3-4为截取图像的大小
    }
    function exit() {
        video.srcObject.getTracks()[0].stop();   //这里如果打开了麦克风、getTracks是一个数组，我们同样需要获取下标[1]来关闭摄像头 打开麦克风[0]就是麦克风
    }
</script>

上述代码看起来并不多，包含了打开-截取图像-关闭摄像头的功能，足以满足功能需求。