leaflet视频监控播放(附源码下载)
前言
leaflet 入门开发系列环境知识点了解：
- leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件，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视频监控播放(附源码下载)的更多相关文章
- Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）
我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...
- leaflet图斑历史时空播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Android 音视频深入 四 录视频MP4（附源码下载）
本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...
- leaflet实现风场图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Android 音视频深入 十 FFmpeg给视频加特效（附源码下载）
项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(AVfilte ...
- Android 音视频深入 八 小视频录制（附源码下载）
本篇项目地址,求starthttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/%E5%B0%8F%E ...
- leaflet 结合 Echarts4 实现迁徙图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
随机推荐
- Android利用碎片fragment实现底部标题栏(Github模板开源)
在安卓开发当中,一个十分重要的布局则是底部标题栏了,拥有了底部标题栏,我们就拥有了整个软件UI开发的框架,一般而言,整个软件的布局首先就是从底部标题栏开始构建,然后再开始其他模块的编写,组成一个完善的 ...
- MySQL CRUD使用之小总结
总结一下最近碰到的一些关于MySQL CRUD方面的语句. 在使用pymysql的executemany方法时,需要注意的几个问题: 1.在写sql语句时,不管字段为什么类型,占位符统一使用%s,且不 ...
- “word无法创建工作文件，请检查临时环境变量”的解决办法
问 题:word无法创建工作文件,请检查临时环境变量 解决方法: 1.运行regedit,打开注册表: 2.找到 ⑴.HKEY_USERS\S-1-5-19\Software\Micros ...
- AutoCad 二次开发 jig操作之标注跟随线移动
AutoCad 二次开发 jig操作之标注跟随线移动 在autocad当中,我认为的jig操作的意思就是即时绘图的意思,它能够实时的显示出当前的操作,以便我们直观的感受到当前的绘图操作是什么样子会有什 ...
- python_tornado
1.创建Tornado服务器 1.创建Application对象 Application是Torando最核心的类 所有关于服务器的配置信息都写在Applicatio ...
- C#语法--委托，架构的血液
委托的定义 什么是委托? 委托实际上是一种类型,是一种引用类型. 微软用delegate关键字来声明委托,delegate与int,string,double等关键字一样.都是声明用的. 下面先看下声 ...
- 快速理解spark-on-k8s中的external-shuffle-service
[摘要] external-shuffle-service是Spark里面一个重要的特性,有了它后,executor可以在不同的stage阶段动态改变数量,大大提升集群资源利用率.但是这个特性当前在k ...
- luogu P2640 神秘磁石
题目描述 1.若给他一个一维坐标系,那么他的磁力一定要在素数坐标的位置上才能发挥的最大(不管位置坐标的大小,只要是素数那么磁力就一样大) 2.若两个磁石相距为k,那么磁石间的破坏力将会达到当前磁力的峰 ...
- 17-Python执行JS代码--PyExecJS、PyV8、Js2Py
一.Python执行JS代码--PyExecJS.PyV8.Js2Py 1.1.PyExecJS PyExecJS的优点是您不需要照顾JavaScript环境.特别是,它可以在Windows环境中运行 ...
- Springboot实现登录功能
SpringBoot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再 ...