前言

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. python与redis交互及redis基本使用

    Redis简介 Redis是一使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日个开源的志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工 ...

  2. 使用IDEA创建SpringMVC项目

    作为一名从.NET转Java的小渣渣,之前都是听说Java配置复杂,今天算是见识到了.甚是怀念宇宙第一IDE VS和.NET高效的开发. 网上大多教程是基于Eclipse的,即使按照IDEA的教程做, ...

  3. Integer的比较==和String的比较==总结

    一.序言 今天发现了一个很有趣的问题,在群里和朋友们讨论的也比较激烈,我现在给大家阐述一下问题. 二.发现问题 上代码... package com.hzwealth.test.question; p ...

  4. Scheme实现数字电路仿真(1)——组合电路

    EDA是个很大的话题,本系列只针对其中一小部分,数字电路的仿真,叙述一点概念性的东西,并不会过于深入,这方面的内容实则是无底洞.本系列并不是真的要做EDA,按照SICP里的相关内容,采用Lisp的方言 ...

  5. 【华为云实战开发】9.如何进行PHP项目的快速搭建并实现CICD？【华为云技术分享】

    1 概述 1.1 文章目的 本文主要想为研发PHP项目的企业或个人提供上云指导,通过本文中的示例项目 “workerman-todpole”,为开发者提供包括项目管理,代码托管,代码检查,编译构建,测 ...

  6. 鲲鹏性能优化十板斧（二）——CPU与内存子系统性能调优

    1.1 CPU与内存子系统性能调优简介 调优思路 性能优化的思路如下: l   如果CPU的利用率不高,说明资源没有充分利用,可以通过工具(如strace)查看应用程序阻塞在哪里,一般为磁盘,网络或应 ...

  7. Cypher基本指令学习1

    1.查询节点 查询所有节点match (n) return n 查询带有标签的节点 match(movie:Flyer) return movie.name 查询关联节点(查询A导演的所有电影) ma ...

  8. 解密国内BAT等大厂前端技术体系-百度篇（长文建议收藏）

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  9. luogu P2650 弹幕考察

    题意简化:求某个区间在一组区间中覆盖的数量 对于这个问题,我们很容易想到线段树,或者树状数组,但是maxlongint不能让我们这么做 30分思路: 对于m个区间,枚举n个区间判断与它是否重合 但是O ...

  10. iOS面试的算法相关

    转自:https://www.jianshu.com/p/c4820b159159 面试中遇到的这些算法,在平常工作中,基本不会用到. 不过现实的面试中经常喜欢问关于算法的问题 有些还要求写出代码.一 ...