[TOC]

一、为什么重构?

• 原调用方法过于复杂，使用者需要花时间阅读代码、关注插件内部实现，所以需要重构，让使用者无需关心内部逻辑，轻松实现我们所支持的视频相关业务。

二、设计构思

将 <u>videoPlayer.js</u>（与C++服务进行交互的方法库） 和 <u>DHPlayer.vue</u>打成一个DHPlayer.js，非Vue环境下也可使用。两种引用方式如下：

原生h5下——引入后可直接使用VideoPlayer对象：(Vue下也可如此引用，全局vue对象会自动注册DHPlayer组件)

    <script src="/static/DHPlayer.js"></script>

Vue下：

    import DHPlayer from 'static/DHPlayer.js'
    Vue.use(DHPlayer)

• videoPlayer.js

基本功能：

1、窗口初始化：websocket尝试连接服务，包含成功回调与失败回调
- 连接规则：目前是对localhost：8000-8004端口进行遍历连接，如果全都不通就请求打开DHPlayer服务，无论点击打开还是取消（<font color="red">web无法捕获</font>），在此过程中都会进行重连，直到连通或1分钟以后自动删除重连定时器。
- 成功回调：触发成功回调，并创建窗口（根据是否需要创建窗口参数，默认需要创建）
- 失败回调：连续1分钟无法连接，触发失败回调。
- 注：如果创建多个视频窗口，将会在同一个websocket连接中进行通信，该websocket连接将会作为全局对象绑定到windows上。

2、创建/销毁窗口、窗口显示/隐藏、窗口滚动

> 这些基本功能都会独立的方法，可直接使用，但是一般使用场景（如下）都在内部进行封装。

• 监听页面刷新、销毁事件，通知服务销毁窗口。
• 监听页面显隐事件（切换浏览器页签、最小化浏览器等会触发该事件），通知服务显隐窗口。
• 监听浏览器窗口的放大缩小、滚动事件，会重新获取传入挂载窗口dom节点的位置，通知服务调整窗口位置。

3、录像回放、实时预览

• 可通过在初始化的时候传定义好的type类型，内部根据type来调用发送对应的消息。

4、每个功能都会提供对应的回调方法

传参params：

为了使用的方便，决定在初始化的时候可以直接传入所有的参数，使用方法如下：

var oVideoControl = new VideoPlayer({
       videoId: 'DHVideoPlayer',
       createWindow: true,
       connectSuccess: function () {
           console.log('ws初始化成功')
       },
       connectClose: function () {
           oVideoControl = null
       },
       creatSuccess(e) {
           console.log(e) //窗口创建成功
       }
   })

传参API

VideoPlayer对象内置属性

• DHPlayer.vue

基于 videoPlayer.js封装的的VUE组件，包含 <u>DOM节点</u> 和 <u>基础方法</u>(目前包含初始化窗口后播放视频)，以及获取token、对视频路径进行token拼接等业务处理。

包含业务

1. 判断本地视频插件是否安装（websocket连接1分钟后还未连接成功，提示安装插件）
2. 比较本地插件与线上的版本，如果本地插件版本低于线上插件，提示更新（在websocket连接成功后拿到版本号，再调brm的获取插件信息的接口获取版本号进行比较）【该提示基于ICC框架实现，下载地址为服务器上固定路径，UI基于ant-design-vue，第三方可自行进行修改。】
3. websocket连接成功以后，创建窗口，子窗口数量根据通道个数或者rtsp地址数量进行计算，1（length = 1）、4（1 < length <= 4）、9（4 < length <= 9）、 16（9 < length <= 16）
4. 窗口创建成功以后，
   • 如果有rtsp路径传入（pathList），根据type去调用对应的录像回放/实时预览方法加载视频；
   • 如果没有路径，需要传入videoPlayList/realTimeList，根据type并通过传入的streamType（不传按照路数判断，超过4路自动默认辅码流，不超过默认是主码流）、channelId 获取对应的视频流地址，如果流地址端口为9090端口时，需要重定向（redirect=true），不需要加 token，其他端口均不需要重定向，从获取rtsp接口中拿到token并拼上。然后再根据type去调用对应的方法加载视频。

调用方法

<template>
    <DHPlayer :type="1" :windowType="0" :realTimeList="realTimeList"/>
</template>
<script>
    import DHPlayer from 'DHPlayer'
    export default {
        data() {
            return {
                realTimeList: [
                    {streamType: 1, channelId: '111$120'},
                    {streamType: 2, channelId: '111$121'}
                ]
            }
        }
    }
</script>

传参