js操作摄像头拍照

最新推荐文章于 2023-03-17 15:41:16 发布

小杨学

最新推荐文章于 2023-03-17 15:41:16 发布

阅读量401

点赞数

分类专栏： html 文章标签： html javascript

本文链接：https://blog.csdn.net/m0_62046661/article/details/127599069

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div id="contentHolder">
        <video id="video" autoplay style="background-color: black" src=""></video>
        <canvas style="display: none" id="canvas"></canvas>
        <img id="imgXX" src="" alt="">
    </div>
    <button id="btn_snap" onclick="takePhoto()">拍照</button>
</body>
<script>
    const cvs = document.getElementById('canvas');
    const video = document.getElementById('video');
    cvs.width = cvs.height = video.width = video.height = 400;
    const {width,height} = cvs;
    const ctx = cvs.getContext('2d');//创建一个画布
    
    //调取摄像头所需的参数，格式是固定的
    const constraints = {
        video:{
            width,
            height
        }
    }

    //摄像头
    /**
     * navigator获取浏览器信息
     * navigator.mediaDevices对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享
     * navigator.mediaDevices.getUserMedia获取媒体对象
     *找个里面会产生一个数据流stream
     * **/
    navigator.mediaDevices.getUserMedia(constraints).then(stream =>{
        video.srcObject = stream;//把找个数据流赋值给video.srcObject
        video.onloadedmetadata = () => video.play();//onloadedmetadata 数据加载完成执行     完成这个事件后把摄像头实时捕抓的画面放进去
    })
    //拍照事件
    function takePhoto() {
        ctx.drawImage(video,0,0,width,height);//图片的坐标和宽高 drawImage(image, dx, dy, dWidth, dHeight)
        document.getElementById('imgXX').src = canvas.toDataURL('image/png');
    }

</script>
</html>