背景

实在是不想折腾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下载

摄像头网页预览，不需安装插件，支持Chrome的更多相关文章

  1. Visual Studio 2015和.Net 2015 预览版在线安装和ISO镜像安装光盘下载

    微软刚刚宣布了 Visual Studio 2015和.Net 2015 预览版,并同时提供了下载. 微软在纽约正进行中的#Connect# 全球开发者在线大会上宣布了Visual Studio 20 ...

  2. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  3. Eclipse安装插件支持jQuery智能提示

    Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...

  4. 【eclipse】Eclipse安装插件支持jQ…

    [eclipse]Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQue ...

  5. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  6. Vim安装插件支持 MarkDown 语法、实时预览等

    使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...

  7. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  8. 【Android】魅族Flyme OS 3摄像头无法预览的问题

    错误代码: 12-12 14:28:34.692: E/AndroidRuntime(1524): java.lang.RuntimeException: startPreview failed 12 ...

  9. .NET 5.0预览版6发布：支持Windows ARM64设备

    2020年6月25日,微软dotnet团队在博客宣布了第六个 .NET 5.0 的预览版:https://devblogs.microsoft.com/dotnet/announcing-net-5- ...

  10. JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

随机推荐

  1. vue3的宏到底是什么东西？

    前言 从vue3开始vue引入了宏,比如defineProps.defineEmits等.我们每天写vue代码时都会使用到这些宏,但是你有没有思考过vue中的宏到底是什么?为什么这些宏不需要手动从vu ...

  2. Java判断是否为闰年

    题目: 判断一个输入的整数是否为闰年? 1.需要对输入的数据类型进行验证 2.支持多次输入和结束符号判断,例如输入q代表退出程序. 分析: 闰年的判断规则如下: (1)若某个年份能被4整除但不能被10 ...

  3. 压测模式该怎么选？RunnerGo五大压测模式详解

    在做性能测试时需要根据性能需求配置不同的压测模式,如:阶梯模式.使用jmeter时我们需要安装插件来配置测试模式,RunnerGo内嵌了压测模式这一选项更方便使用,今天来看看RunnerGo的几种压测 ...

  4. Kubernetes leader election 源码分析

    0. 前言 Kubernetes:kube-scheduler 源码分析 介绍了 kube-scheduler 调度 Pod 的逻辑.文中有一点未提的是,在 Kubernetes 集群中,kube-s ...

  5. 麒麟系统开发笔记（八）：在国产麒麟系统上使用linuxdeployqt发布qt程序

    前言   在ubuntu上发布qt程序相对还好,使用脚本,但是在麒麟上发布的时候,因为银河麒麟等不同版本,使用脚本就不太兼容,同时为了实现直接点击应用可以启动应用的效果,使用linuxdeployqt ...

  6. 【LeetCode二叉树#08】寻找树左下角的值（回溯机制X深度）

    找树左下角的值 力扣题目链接(opens new window) 给定一个二叉树,在树的最后一行找到最左边的值. 示例 1: 示例 2: 思路 层序遍历 这个是很自然的思路,因为层序遍历可以避免对于& ...

  7. 【Azure 应用服务】Azure App Service多实例中，出现某一个实例CPU居高不下的情况，如何重启单个实例呢？

    问题描述 在使用App Service服务中,当多实例中,其中一个实例出现高CPU,高Memory的情况,为了尽可能少的影响正在运行的应用,需要单独重启某一个实例的情况下,如何手动操作呢? 问题解答 ...

  8. 用linux命令cd 查找想要找的文件

    如果想找文件Computer下的bin文件,在终端输入绝对路径 cd /bin,不能输入 cd /Computer/bin,因为文件目录不对 文件目录可以在文件的终端看到,/bin就是正确的目录 比如 ...

  9. linux FTP服务搭建，匿名用户访问创建上传文件

    1.安装vsftpd 首先确认本地是否安装vftpd rpm -qa|grep vftpd 安装vsftpd yum install vsftpd 为什么呢??因为写权限问题   root 用户. 这 ...

  10. Dungeon Master 题解

    这道题的题意简单来说:就是在3D迷宫里找出口,也就是三维地图,需要用到三维数组 由于本人写代码极易出错,所以在输入三维数组的时候修改了c(column,即列)的值,重复定义了没看到==,后面改成定义成 ...