免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能

免费视频直播、点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能，最终效果如图所示：SkeyeWebPlayer播放器如何在vue-baidu-map百度地图组件中结合覆盖物点(bm-marker)、自定义覆盖物(bm-overlay)等，实现在百度地图上方播放实时视频流，（支持FLV、HLS、RTSP、WS-FLV/WS-RTSP、WEB

OpenSKEYE

8102人浏览 · 2022-03-31 15:39:16

OpenSKEYE · 2022-03-31 15:39:16 发布

免费视频直播、点播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: './'
      }
    ])
],