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

原创

Openskeye

发布于 2023-04-04 14:36:35

3.6K0

文章被收录于专栏：国标视频云平台国标视频云平台

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

])

],

demo代码资源下载

在VUE项目中使用永久免费H5直播点播播放器SkeyeWebPlayer.js

SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之电子地图管理

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

h5py

视频播放器

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

h5py

视频播放器

登录后参与评论

0 条评论

热度

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

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

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

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

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

局部引入 vue-baidu-map

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

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

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

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

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

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

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

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

demo代码资源下载

在VUE项目中使用永久免费H5直播点播播放器SkeyeWebPlayer.js

SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之电子地图管理

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

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

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

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

局部引入 vue-baidu-map

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

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

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

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

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

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

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

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

demo代码资源下载

在VUE项目中使用永久免费H5直播点播播放器SkeyeWebPlayer.js

SkeyeVSS综合安防监控Onvif、RTSP、GB28181视频云无插件直播点播解决方案之电子地图管理

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

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