前言

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. linux 生成免密登陆步奏

    1.大致流程 有时需要从服务器A免密连接到服务器B,这时需要在服务器A生成私钥和公钥,大致过程其实就2步. 1.1 在服务器A生成公钥和私钥 在服务器A上输入如下命令: ssh-keygen -t r ...

  2. 教你如何提高 PHP 代码的质量

    说实话,在代码质量方面,PHP 的压力非常大.通过阅读本系列文章,您将了解如何提高 PHP 代码的质量. 我们可以将此归咎于许多原因,但这肯定不仅仅是因为 PHP 生态系统缺乏适当的测试工具.在本文中 ...

  3. AJAX与Django

    AJAX 什么是AJAX? AJAX不是JavaScript的规范,它的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求.提交任务之 ...

  4. 如何在VMware下通过挂载系统光盘搭建本地yum软件仓库

    1.打开自己VMware软件中的虚拟机 2.输入用户名root密码登陆进去 3.打开 应用程序----收藏-----终端 4.首先回到根目录,输入cd ..(中间有空格) 5.创建一个名称为swlaa ...

  5. 【网络流相关】最大流的Dinic算法实现

    Luogu P3376 于\(EK\)算法求最大流时每一次只求一条增广路,时间复杂度会比较高.尽管实际应用中表现比较优秀,但是有一些题目还是无法通过. 那么我们就会使用\(Dinic\)算法实现多路增 ...

  6. ThinkPHP5——模型关联(一对多关联)

    关联定义 一对多关联的情况也比较常见,使用hasMany方法定义,参数包括: hasMany('关联模型名','外键名','主键名',['模型别名定义']); 例如租客表和宿舍表,一个宿舍有多个租客, ...

  7. JAVA学习第一课－手工笔记

    JVM:JAVA虚拟机,JAVA核心,跨平台,作用是翻译. JRE:运行环境,包含JVM和运行的核心类库. JDK:全新开发使用,包含JRE,编译工具: 核心是JVM 以下是关系库 安装路径不要有空格 ...

  8. Android Selector和Shape的用法

    一.Shape的用法 :shape用于设定形状,可以在selector,layout等里面使用,有6个子标签,各属性如下: 填充:设置填充的颜色 间隔:设置四个方向上的间隔 大小:设置大小 圆角:同时 ...

  9. .Net core_Excel 导出二维码（以导出箱单为例）

    [AccessLogAttribute(Note = "导出条形码箱单 — 条形码")]public ActionResult ExportContract(string INNE ...

  10. 利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务

    作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验.目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户 ...