乐趣区

关于前端:免费视频直播点播H5播放器SkeyeWebPlayer-结合vuebaidumap百度地图组件实现电子地图播放功能

jiezi

免费视频直播、点播 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


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-map-skeye-player</title>
    <script src="static/SkeyeWebPlayer/SkeyeWebPlayer.js"></script> 
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
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},
渲染地图我想大家应该都会吧，间接上代码：
<template>
  <div class="bmap">
    <baidu-map
      class="map"
      ak="ydtz9Gf75Pt9swZvc0bWa8t0UWUSxW5I"
      :mapStyle="mapStyle"
      :center="mapcenter"
      :zoom="mapZoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
      @ready="mapReady">

      <template v-for="(item, index) in markerPointData">
        <bm-marker
          :key="index"
          :position="item.markerPoint"
          :icon="{url: item.markerIcon, size: {width: 30, height: 30}}"
          @click="lookInfo(item, false)">
        </bm-marker>
      </template>

      <!-- 信息窗体 -->
      <InfoWindow ref="InfoWindow" @preview="preview"></InfoWindow>

      <!-- 监控窗体 -->
      <VideoWindow ref="videoWindow"></VideoWindow>
    </baidu-map>
  </div>
</template>
在监控点数据中绑定好经纬度坐标，和监控点相机图片；监控点数据格式 如下:
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: './'
      }
    ])
],
退出移动版