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小专栏

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

posted @ 2019-12-18 21:22  GIS之家  阅读(227)  评论(0编辑  收藏