免费视频直播、点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能

免费视频直播、点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能，最终效果如图所示：

SkeyeWebPlayer播放器如何在vue-baidu-map百度地图组件中结合覆盖物 点(bm-marker)、自定义覆盖物(bm-overlay)等，实现在百度地图上方播放实时视频流，（支持FLV、HLS、RTSP、WS-FLV/WS-RTSP、WEBRTC、HEVC/H265）

1、将SkeyeWebPlayer.js文件拷到static目录下

SkeyeWebPlayer.js 资源

libVSS.wasm 文件用于解码h265 ,和快照截取下载

2、引入方式 static/SkeyeWebPlayer/SkeyeWebPlayer.js

3、在项目中按装 vue-baidu-map

npm install vue-baidu-map --save

局部引入 vue-baidu-map

import {BaiduMap, BmView, BmLocalSearch, BmMarker, BmInfoWindow} from "vue-baidu-map";
components: {
    BaiduMap, BmView, BmLocalSearch, BmMarker, BmInfoWindow
  },

渲染地图我想大家应该都会吧，直接上代码：

在监控点数据中绑定好经纬度坐标，和监控点相机图片；监控点数据格式 如下:

markerPointData: [
    {
      cameraId: 1,
      url: 'rtsp://39.101.128.80:5540/34020000001310000071/0',
      name: '监控点位一',
      indexCode: '000001',
      ipaddr: '192.168.0.111',
      markerPoint: { lng: 103.99104, lat: 30.627748 },
      markerIcon: require(`@/assets/camera/camera_0.png`)
    }
  ]

再利用bm-marker在地图上渲染出监控点，如下图：

在点击摄像机（监控点）的时候再弹出信息窗口，通过以下方法将地图中的监控点位置自动居中显示：

this.map.centerAndZoom(new this.BMap.Point(lng, lat), this.map.getZoom());

在VideoWindow InfoWindow 组件中封装好自定义覆盖物，此时要用到 { BmOverlay }组件，实现效果，如下图：

在组件内部 有show() ,hide()这两个方法，方便在外部调用，控制显示与隐藏，在关闭播放器窗口时还需要销毁播放器实例，

4、在完成好所有的准备工作后，我们把自定义覆盖物放到地图中就完成了图一所示的样子。相关代码资源下载

需要注意的是，在使用快照截取和H265播放时，需要用到开头说到的libVSS.wasm解码，要在webpack.base.conf.js中配置如下：

plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static/SkeyeWebPlayer/libVSS.wasm'),
        to: './'
      }
    ])
],