js调用本地摄像头demo

最新推荐文章于 2023-03-26 00:19:06 发布

轻雨落笔痕

最新推荐文章于 2023-03-26 00:19:06 发布

阅读量1.4k

点赞数

分类专栏： web网站开发文章标签： js 摄像头

本文链接：https://blog.csdn.net/boywcx/article/details/116444887

版权

web网站开发专栏收录该内容

53 篇文章 3 订阅

订阅专栏

效果：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST DEMO</title>
</head>
<body>
<div id="main" style="margin-left:10px;overflow-y:scroll;">
    <div>
        <div>
            <div>
                <video style="width:250px;height:250px;border:5px solid black;"></video>
                <img id="picture" style="width:250px;height:250px;border:5px solid black;">
                <canvas id="canvas" style="display: none;width:250px;height:250px"></canvas>
                <button onclick="cameraForm.save()">拍摄</button>
                <button onclick="cameraForm.close()">关闭摄像头</button>
                <button onclick="cameraForm.open()">开启摄像头</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/jquery.js"></script>
<script src="/cameraForm.js"></script>
</html>

let cameraForm = {
    video: null,
    base64Img: "",
    open: function () {
        // 视频大小
        let constraints = {audio: false, video: {width: 250, height: 250}};
        // 开启视频
        navigator.mediaDevices.getUserMedia(constraints).then(function (mediaStream) {
            cameraForm.video = document.querySelector('video');
            cameraForm.video.srcObject = mediaStream;
            cameraForm.video.onloadedmetadata = function (e) {
                cameraForm.video.play();
            };
        }).catch(function (err) {
            console.log(err.name + ": " + err.message);
            alert("摄像头打开失败")
        });
    },
    close: function () {
        //关闭摄像头
        cameraForm.video.srcObject.getTracks()[0].stop();
    },
    save: function () {
        // 使用canvas进行拍照
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(cameraForm.video, 0,0,250, 250);
        cameraForm.base64Img = canvas.toDataURL("image/png");
        document.getElementById('picture').src = cameraForm.base64Img;
    }
};
$(function () {
    cameraForm.open();

});

轻雨落笔痕

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
js调用本地摄像头demo

效果：html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TEST DEMO</title></head><body><div id="main" style="margin-left:10px;overflow-y:scroll;"> <div>
复制链接

扫一扫