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