vue+leaflet示例:视频监控播放(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm i （2）启动demo命令：npm run dev （3）打包demo命令： npm run build:release

示例效果

由于视频流在线地址访问不到，所以视频流效果没出来，源码仅提供参考作用

本篇实现的思路：萤石官网，添加视频设备，然后开启直播获取直播或者监控视频流RTMP或者HLS，利用js插件video.js以及videojs-flash等，在web网页结合leaflet在地图展示视频监控播放效果。
萤石官网也有很多示例，可以结合官网的文档参考
萤石官网：https://open.ys7.com
萤石开发文档：https://open.ys7.com/doc/zh/

• 核心源码

<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:视频监控播放</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import config from "../config";
import { useRouter } from "vue-router";
import videoPic from "@/assets/videoPic.png";
// 引入videojs
import Video from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash"; // 要播放rtmp流
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 图片列表模拟数据
  const dataList = [videoPic, videoPic, videoPic, videoPic, videoPic];
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView([18.271086109608888, -102.56835937500001], 4);
  //创建底图切换数据源
  const baseLayer = L.tileLayer(config.baseMaps[1].Url); //ArcGIS影像图
  map.addLayer(baseLayer); //地图默认加载的底图
  //气泡窗口展示视频图片
  L.marker([30.78903675126116, -90.615234375])
    .addTo(map)
    .on("click", function (e) {
      let content =
        '<div><video id="m_video2" style="width: 600px; height: 400px;" class="video-js vjs-default-skin vjs-big-play-centered" /></div>';
      content += '<div id="m_pic" style="width: 600px; height: 120px;">';
      if (dataList && dataList.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          let imgUrl = dataList[i];
          content +=
            '<img src="' +
            imgUrl +
            '" height="118" width="118" style="padding-top:2px;padding-right:2px;cursor:pointer;"></img>';
        }
      }
      content += "</div>";
      map.openPopup(content, e.latlng, {
        maxWidth: 1000,
        offset: L.point(0, -25),
      });
      // 第一个选中的要播放的video标签, 记得是video标签,
      const currentInstance = Video(document.querySelector("#m_video2"), {
        autoplay: true, // 是否自动播放
        controls: true, // 是否显示控件
      });
      currentInstance.src({
        // src: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1',
        src: 'http://hls01open.ys7.com/openlive/d7e10dab781c497e90b305ab09f16ab1.hd.m3u8',
        type: "rtmp/flv", // 这个type值必写
      });
    });
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>