调用摄像头_HTML5关于调用摄像头的方法

最新推荐文章于 2024-06-25 10:12:52 发布

weixin_39603117

最新推荐文章于 2024-06-25 10:12:52 发布

阅读量425

点赞数 1

文章标签：调用摄像头

本文链接：https://blog.csdn.net/weixin_39603117/article/details/112658590

版权

最近项目里面有个MM写了个调用摄像头的js,个人觉得可以收藏一下,重写了一下步骤，源页码就不贴了，^-^

 <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()" />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <script>
        function getMedia() {
            let constraints = {
                //参数
                video: {width: 500, height: 500},
                audio: true
            };
            //获得video摄像头区域
            let video = document.getElementById("video");
            //返回的Promise对象
            let promise = navigator.mediaDevices.getUserMedia(constraints);
           //then()异步，调用MediaStream对象作为参数
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        }

        function takePhoto() {
            //获得Canvas对象
            let video = document.getElementById("video");
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext('2d');
            //绘图
            ctx.drawImage(video, 0, 0, 300, 300);
        }
    </script>