js调用摄像头拍照

最新推荐文章于 2024-04-26 16:47:03 发布

Liux-

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1k

点赞数

分类专栏： js调用摄像头拍照文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_44979541/article/details/106692845

版权

js调用摄像头拍照专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js调用本地摄像头拍照

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

<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>

<body>
    <button onclick="openMedia()">开启摄像头</button>
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button onclick="takePhoto()">拍照</button>
    <img id="imgTag" src="" alt="imgTag">
    <button onclick="closeMedia()">关闭摄像头</button>
    <script>
        let mediaStreamTrack = null; // 视频对象(全局)
        function openMedia() {
            let constraints = {
                video: {
                    width: 500,
                    height: 500
                },
                audio: true
            };
            //获得video摄像头
            let video = document.getElementById('video');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then((mediaStream) => {
                mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
                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, 500, 500);


            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
            let img = document.getElementById('canvas').toDataURL();
            // 这里的img就是得到的图片
            console.log('img-----', img);
            document.getElementById('imgTag').src = img;
        }

        // 关闭摄像头
        function closeMedia() {
            mediaStreamTrack.stop();
        }
    </script>
</body>

Liux-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js调用摄像头拍照

js调用本地摄像头拍照<!doctype html><html lang="en"><head> <title>js调用摄像头拍照上传图片</title> <meta charset="utf-8"></head><body> <button onclick="openMedia()">开启摄像头</button> <video id="
复制链接

扫一扫