leaflet視頻監控播放(附源碼下載)

時間 2019-12-19

標籤 leaflet 視頻監控播放源碼下載简体版

原文原文鏈接

前言

leaflet 入門開發系列環境知識點了解：css

leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等

leaflet 在線例子

leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet視頻監控播放
源代碼 demo 下載html

效果圖以下：
jquery

本篇實現的思路：螢石官網，添加視頻設備，而後開啓直播獲取直播或者監控視頻流RTMP或者HLS，利用js插件ckplayer.js，在web網頁結合leaflet在地圖展現視頻監控播放效果。
螢石官網也有不少示例，能夠結合官網的文檔參考
螢石官網：https://open.ys7.com
螢石開發文檔：https://open.ys7.com/doc/zh/web

完整代碼以下：

<!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);
}
});
……