摄像头网页预览，不需安装插件，支持Chrome

背景

实在是不想折腾ActiveX控件

1、麻烦（开发麻烦、使用时设置也麻烦）

2、非IE浏览器不兼容

解决方案

写一个摄像头服务，提供http服务，返回摄像头当前画面的Base64字符串，前端页面调用并展示。

效果

前端代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>摄像头播放</title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <br />
        <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="label label-primary">摄像头播放</span>
                    <br />
                </div>
                <div class="panel-body">
                    <input type="button" value="播放" id="btnPlay" />
                    <input type="button" value="停止" id="btnStop" />
                    </br> </br>
                    <img id="imgId" src="" style="width: 1024px" />
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/jscript">


    $(function () {

        $("#btnPlay").click(function () {
            try {
                flag = true;
                showImage();
            } catch (e) {
            }
        })

        $("#btnStop").click(function () {
            flag = false;
        })

    })

    var base_url = "http://127.0.0.1:8082";
    var flag = false;

    function showImage() {
        $.ajax({
            type: "get",
            url: base_url + "/getframe",
            dataType: 'json',
            data: "",
            success: function (d) {
                if (d.code == 1) {
                    $("#imgId").attr("src", "data:image/jpg;base64," + d.data);
                    if (flag) {
                        showImage();
                    }
                } else {
                    alert("播放失败:" + d.message)
                }
            }
        })

    }

</script>
</html>

服务界面

项目信息

Demo下载

posted @ 2023-04-19 18:26  天天代码码天天  阅读(47)  评论(0)  编辑  收藏  举报  来源