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(变换)属性来实现多种不 ...
随机推荐
- Precision,Recall,F1的计算
Precision又叫查准率,Recall又叫查全率.这两个指标共同衡量才能评价模型输出结果. TP: 预测为1(Positive),实际也为1(Truth-预测对了) TN: 预测为0(Negati ...
- Java基础面试题及答案（三）
多线程 35. 并行和并发有什么区别? 并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔发生. 并行是在不同实体上的多个事件,并发是在同一实体上的多个事件. 在一台处理器 ...
- JVM的类加载机制全面解析
什么是类加载机制 JVM把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被JVM直接使用的Java类型,这就是JVM的类加载机制. 如果你对Class文件的结 ...
- 小程序如何判断用户（后台使用Django）
小程序如何判断用户是哪个: 有Web开发经验的都知道,客户端用户发起请求,服务器收到请求后,可以通过把用户user_id记录到session里,然后下次通过session里面的user_id来辨别是哪 ...
- Java8 格式化时间
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyyMMddHHmmss");LocalDateTime. ...
- c++关于multiset的头文件包含问题
最近在Bilibili上看到不少侯捷老师C++的视频教程,侯捷老师翻译了很多C++的经典书籍,比如<Essential C++中文版>.<STL源码剖析>,也写了<深入浅 ...
- 利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- Kubernetes增强型调度器Volcano算法分析
[摘要] Volcano 是基于 Kubernetes 的批处理系统,源自于华为云开源出来的.Volcano 方便 AI.大数据.基因.渲染等诸多行业通用计算框架接入,提供高性能任务调度引擎,高性能异 ...
- Python ——selenium报错 'chromedriver.exe' executable needs to be in PATH
from selenium import webdriver dr = webdriver.Chrome() 运行时报错: 问题分析: 1.没有下载chromedriver.exe 2.chromed ...
- 吴裕雄--天生自然python学习笔记：python通过“任务计划程序”实现定时自动下载或更新运行 PM2.5 数据抓取程序数据
在 Windows 任务计划程序中,设置每隔 30 分钟自动抓取 PM2.5 数据,井保存 在 SQLite 数据库中 . import sqlite3,ast,requests,os from bs ...