[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>

傳參