前言

leaflet 入门开发系列环境知识点了解：

内容概览

leaflet视频监控播放
源代码 demo 下载

效果图如下：

本篇实现的思路：萤石官网，添加视频设备，然后开启直播获取直播或者监控视频流RTMP或者HLS，利用js插件ckplayer.js，在web网页结合leaflet在地图展示视频监控播放效果。
萤石官网也有很多示例，可以结合官网的文档参考
萤石官网：https://open.ys7.com
萤石开发文档：https://open.ys7.com/doc/zh/

  • 完整代码如下：
<!DOCTYPE html>

<html>

<head>

<title>视频图片监控demo</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script src="videoJS/ckplayer/ckplayer/ckplayer.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<style>

html, body,#map {

height: 100%;

width: 100%;

margin: 0;

}

</style>

</head>

<body>

<div id='map'></div>

<img id='fullImg' height="100%" width="100%" style="margin:0;position:absolute;left:0;top:0;z-index:9999;display:none;"></img>

<script>

window.data = null;

$.ajax({

url : "http://localhost/gzsj/wechat/third/imgList",

type : 'GET',

dataType : 'json',

async: false,

data:{emcd:"1909030002",size:5},

success : function(data) {

console.log('success',data);

window.data = data.data;

},

error : function(msg) {

console.log('error',msg);

}

});

……

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet视频监控播放(附源码下载)的更多相关文章

  1. Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）

    ​ 我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...

  2. leaflet图斑历史时空播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. Android 音视频深入 四 录视频MP4（附源码下载）

    本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...

  4. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. Android 音视频深入 十 FFmpeg给视频加特效（附源码下载）

    项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(AVfilte ...

  6. Android 音视频深入 八 小视频录制（附源码下载）

    本篇项目地址,求starthttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/%E5%B0%8F%E ...

  7. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  9. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

随机推荐

  1. 版本控制神器——git的基本使用

    git基础命令 安装git windows的话,直接下载安装即可 Linux Ubuntu安装,apt-get install git Linux Centos安装,yum install git 配 ...

  2. 5、Docker 核心原理-资源隔离和限制

    Docker 资源隔离 Docker 是利用linux的LXC技术,内核的Kernel namespace Namespace: PID - 通过PID的namespace隔离,可以嵌套 NET - ...

  3. PHP后端代码生成微信小程序带参数的二维码保存成jpg图片上传到服务器getwxacodeunlimit

    老板最近有点飘了,他要在PC端的网站放一个微信小程序的二维码,并且扫描这个二维码以后要跳到小程序对应的房源详情页. 这是微信官方给出的文档,连接地址:https://developers.weixin ...

  4. Scrapy持久化存储-爬取数据转义

    Scrapy持久化存储 爬虫爬取数据转义问题 使用这种格式,会自动帮我们转义 'insert into wen values(%s,%s)',(item['title'],item['content' ...

  5. 串的匹配算法--C语言实现

    串这种数据结构,使用是比较多的,但是它的一些方法在更高级的语言中,比如Java,Python中封装的比较完整了.在这里,我只写了串中使用最多的匹配算法,即串的定位操作.串的匹配算法常用的两种就是朴素匹 ...

  6. Anticancer Effect of Deuterium Depleted Water - Redox Disbalance Leads to Oxidative Stress（低氘水的抗癌作用-氧化还原失衡导致了氧化应激）-解读人：范徉

    期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:瑞典卡罗林斯卡学院 物种:人 技术:标记定量蛋白质组学,氧化还原 ...

  7. Flask开发VIP版HttpServer #华为云·寻找黑马程序员#

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  8. Golang中的布隆过滤器

    目录 1. 布隆过滤器的概念 2. 布隆过滤器应用场景 3. 布隆过滤器工作原理 4. 布隆过滤器的优缺点 5. 布隆过滤器注意事项 6. Go实现布隆过滤器 1. 布隆过滤器的概念 布隆过滤器(Bl ...

  9. AutoLayout的那些事儿

    转自:http://www.cocoachina.com/ios/20160530/16522.html 本文投稿文章,作者:MangoMade(简书) AutoLayout非常强大也非常易用,可读性 ...

  10. SpringBoot与JPA

    JPA是什么 JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA ...