vue使用海康的H5视频播放器开发包实时预览监控画面

使用原因

之前用海康的视频WEB插件实现过监控画面在前端页面的实时预览,但是会有两个问题:
1、该插件需要先进行安装,而且每次开机后也要重新启动该插件;
2、使用该插件很难更改其样式,只能使用其自带的窗口(1x1,2x2等),如过我要一个1x2的窗口就无法实现;
所以才产生了使用其它方法实现前端页面实时预览监控画面的想法。

两者优缺点

1、视频WEB插件
缺点:需要安装插件;样式难以更改;
优点:视频响应快,流畅性好,可以同时查看多个监控画面;
2、H5视频播放器开发包
缺点:视频流畅性查,卡顿等问题,特别是有查看多个监控画面的需求时不要用这种方法;
优点:不用安装插件;样式更改简单;

使用方法

1、下载开发包
在这里插入图片描述
2、将下载的开发包放入项目中
在项目中的public文件夹下新建一个h5player的文件夹(这里的文件夹名字可以自己取,后端引入时注意一下就好了),接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。
在这里插入图片描述
3、在项目中引入开发包文件
在public/index.html文件里引入
在这里插入图片描述
4、封装后player的demo
新增.vue文件,复制下面的代码

<template>
    <div>
      <div :id="preId" style="width: 400px; height: 200px"></div>
    </div>
  </template>
  <script>
  export default {
    name: "h5HkVideo",
    props: {
      preUrl: {
        type: String,
      },
      preId: {
        type: String,
      }
    },
    data() {
      return {
        // 播放器对象
        player: null,
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initPlayer();
      });
    },
    methods: {
      /**
       * 初始化播放器
       */
      initPlayer() {
        this.player = new window.JSPlugin({
          // 需要英文字母开头 必填
          szId: this.preId,
          // 必填,引用H5player.min.js的js相对路径
          szBasePath: "/h5player",
   
          // // 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高
          // iWidth: 600,
          // iHeight: 400,
   
        //   // 分屏播放,默认最大分屏4*4
        //   iMaxSplit: 16,
        //   iCurrentSplit: 1,
   
        //   // 样式
        //   oStyle: {
        //     border: '#343434',
        //     borderSelect: '#FFCC00',
        //     background: '#000'
        //   }
        });
        this.initPlugin();
      },
      /**
       * 事件初始化
       */
      initPlugin() {
        this.player.JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            console.log("windowSelect callback: ", iWindIndex);
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(
              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
              oError
            );
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            // console.log("鼠标移过回调", iWindIndex);
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            // console.log("鼠标移出回调", iWindIndex);
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log("全屏切换回调", bFull);
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log("性能不足回调", iWndIndex);
          },
        });
   
        // this.play();
      },
      /**
       * 播放
       */
      play(data) {
        let preUrl;
        if (data != undefined) {
          preUrl = data; // 播放地址
        } else {
          preUrl = this.preUrl; // 播放地址
        }
        const param = {
          playURL: preUrl,
          // 1:高级模式  0:普通模式,高级模式支持所有
          mode: 1,
        };
        // 当前播放窗口下标
        let index = 0;
        // console.log(this.playerArr);
        this.player.JS_Play(preUrl, param, index).then(
          () => {
            // 播放成功回调
            console.log("播放成功");
          },
          (err) => {
            console.log("播放失败");
            console.info("JS_Play failed:", err);
          }
        );
      },
    },
  };
  </script>

5、使用封装的组件

<template>
  <div class="video" ref="videoTest">
   <test-web-h-5 :preId="preId1" ref="h5Player1"></test-web-h-5>
   <test-web-h-5 :preId="preId2" ref="h5Player2"></test-web-h-5>
   <el-button type="primary" @click="handlePlay('1')">播放视频一</el-button>
   <el-button type="primary" @click="handlePlay('2')">播放视频二</el-button>
  </div>
</template>

<script>
import TestWebH5 from './components/testWebH5.vue'
export default {
  components: {
    TestWebH5,
  },
  data() {
    return {
      preId1: 'player',
      preId2: 'player2'
    }
  },
  methods: {
    handlePlay(val) {
      if (val === '1') {
        this.$refs.h5Player1.play("ws://视频一地址")
      } else {
        this.$refs.h5Player2.play("ws://视频二地址")
      }
    },
  },
</script>

<style scoped lang="scss">
.video {
  width: 100%;
  height: 100%;
}
</style>

在这里插入图片描述

  • 12
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3是一个流行的JavaScript框架,用于构建用户界面。H5是指基于HTML5标准开发的移动端网页,用于在移动设备上展示内容。海康是一家专注于视频图像处理技术的公司,提供视频监控解决方案。WS是指WebSocket,它是一种在客户端和服务器之间实现双向通信的协议。在线视频播放器指的是能够在网页上直接播放视频的工具。 基于Vue3的H5海康WS在线视频播放器是一个使用Vue3框架开发的适用于移动设备的在线视频播放器。它可以通过WebSocket与海康设备建立实时的视频流通信。通过使用H5技术,用户只需在移动设备上打开网页就可以实时观看海康设备传输的视频。 该播放器可以实现以下功能: 1. 实时观看视频传输:用户可以通过播放器直接观看海康设备传输的实时视频流,无需安装任何额外的应用程序。 2. 视频控制:播放器提供基本的视频控制功能,如播放、暂停、快进、快退等,用户可以根据自己的需求来控制视频播放。 3. 分辨率调节:播放器可以根据网络情况自动调整视频传输的分辨率,确保在恶劣网络环境下仍能流畅观看视频。 4. 声音控制:用户可以通过播放器控制海康设备的音频播放,根据需要开启或关闭设备的声音。 5. 全屏播放:播放器支持全屏播放模式,用户可以通过点击按钮将播放器切换到全屏模式,更好地观看视频。 总之,基于Vue3的H5海康WS在线视频播放器提供了便捷的视频观看体验,让用户能够通过移动设备方便地实时观看海康设备的视频传输。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值