HTML+JS 亲测可用 Usb摄像头抓取一帧图片，保存本地或传到后台

最新推荐文章于 2023-11-22 14:00:29 发布

置顶暖阳cy

最新推荐文章于 2023-11-22 14:00:29 发布

阅读量3.9k

点赞数 5

分类专栏：摄像头截取一帧文章标签： html+js 摄像头截图验证信息前端 demo

本文链接：https://blog.csdn.net/weixin_44855794/article/details/93600593

版权

摄像头截取一帧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(HTML+JS实现Usb摄像头抓取一帧图片，保存本地或传到后台)

这周接了一个摄像头捕获的一帧图片的业务，就写了一个demo，希望能帮助大家解决这类问题。

环境是idea+jdk1.8

废话不多说 ，直接上图：

代码如下

链接: link.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人信息获取</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.min.js"></script>
    <script>
        //判断浏览器是否支持HTML5的Canvas
        window.onload = function () {
            try {
            }
            catch (e) {
            }
        };
        //获取摄像头的视频流并显示在Video 签中
        window.addEventListener("DOMContentLoaded", function () {
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };
            $("#snap").click(function () {
                context.drawImage(video, 0, 40, 330, 250);
            })
            if (navigator.getUserMedia) {
                navigator.getUserMedia(videoObj, function (stream) {
                    video.srcObject = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
        }, false)
        function push() {
            var data = new FormData($("#form1")[0]);
            var canvans = document.getElementById("canvas");
            var imgData = canvans.toDataURL();
            console.log(canvans.toLocaleString());
            data.append("card",$("#card").val());
            data.append("name",$("#name").val());
            data.append("canvas",$("#canvas").val());
            console.log(canvas);
            $.ajax({
                url: 'http://localhost:8090/user',
                type: 'post',
                contentType: false,
                data: data ,
                processData: false,
                success:function(info){
                    console.log(info)
                },
                error:function(err){
                    console.log(err)
                }
            });
        }

        function savea1(selector,name){
            var a = document.createElement('a')
            a.download = name || 'pic'
            a.href = document.getElementById("canvas").toDataURL();
            a.click();
        }


    </script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
<div id="contentHolder">
    <video id="video" width="320" height="320" autoplay></video>
    <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
    <canvas style="" id="canvas" width="320" height="320"></canvas>
    <input type="button" value="上传" id="ok" style="width:100px;height:35px;" onclick="push()"/>
    <input type="button" value="保存到本地" id="baocun" style="width:100px;height:35px;" onclick="savea1('canvas')"/>

</div>
<div class="form-group">
    <label class="sr-only" for="name">身份证号：</label>
    <input type="text" class="form-control" name="card" id="card" placeholder="请输入身份证号">
</div>
<div class="form-group">
    <label class="sr-only" for="name">姓名：&nbsp &nbsp &nbsp &nbsp</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
</div>
</form>
</body>
</html>

我也是刚入坑的小白，有不对的地方多多指教，使用起来很方便，后台代码就看你自己的需求了，可以实现直接保存一帧图片到本地，支持Chrom浏览器
创建一个springboot项目，最简单的测试方法，就是直接在static文件夹下建一个html，直接ctrl+acv素质三连，浏览器直接访问就行
认真一点的小伙伴就粘贴在templates文件夹下，pom文件引templates，在application.properties文件中配置templates，controller直接写路径
注意大坑，在这过程中，千万不要打开别的摄像头测试软件，第一次发文，请多关照