一、簡介

按照?ZLMediaKit快速開始 編譯運行ZLMediaKit成功后，我們可以運行其合作開源項目MediaServerUI，來對ZLMediaKit進行可視化管理。通過MediaServerUI，我們可以實現(xiàn)在瀏覽器查看ZLMediaKit的延遲率、負載率、正在進行的推拉流、服務器配置等信息。

二、下載MediaServerUI

在?https://gitee.com/kkkkk5G/MediaServerUI 下載MediaServerUI-master.zip，拷貝到CentOS系統(tǒng)中（我的是CentOS v7.5.1804）。

執(zhí)行命令：

unzip MediaServerUI-master.zip
cd MediaServerUI-master
vi package-lock.json

查看文件package-lock.json的內容：

從package-lock.json里面的"@types/node"這一段可以看到MediaServerUI這個項目所用的Node.js版本是12.0.8，所以我們要安裝不低于12.0.8版本的Node.js。如果我們裝了較低版本的Node.js，則之后使用npm install命令時可能會報錯："npm ERR! Error: CERT_UNTRUSTED" 或者"npm ERR! TypeError: Cannot read property 'latest' of undefined"

三、安裝Node.js和npm

安裝Node.js和npm有三種方式，第一種是直接使用已編譯好的Node.js包，第二種是通過源碼安裝，這兩種方式我們可以參考：《Node.js 安裝配置》。但我們這里推薦使用第三種方式，通過yum install?方法安裝，這種安裝方式是最簡單的，執(zhí)行命令：

yum install epel-release
yum install nodejs
yum install npm

安裝后，通過命令node -v ，npm -v可以查看到node和npm的版本信息，則表示安裝成功了。

默認安裝好后，網(wǎng)絡源是國外源，我們得設置npm源為阿里源，否則等下執(zhí)行npm install時可能會報錯：npm ERR! Linux XXX

?執(zhí)行命令：

npm config get registry
npm config set registry https://registry.npm.taobao.org
npm config get registry

如果輸出結果：https://registry.npm.taobao.org/?則表示設置成功了，參考：《設置npm源的幾種方式》

四、編譯MediaServerUI

進入MediaServerUI-master源碼目錄，修改global.js文件

vi global.js

將serverip修改成ZLMediaKit的ip和http端口號（可以在ZLMediaKit的配置文件中查看），將secret修改成ZLMediaKit的secret。

執(zhí)行命令：

npm install
npm run build

然后即會在MediaServerUI-master源碼目錄下生成dist目錄，?dist目錄為前端打包?錄distribution，可以理解為已經(jīng)經(jīng)過處理后用于發(fā)布的代碼。

我們將dist目錄下的所有文件和目錄拷貝到正在運行的ZLMediaKit的www目錄中

瀏覽器（推薦谷歌瀏覽器）輸入ZLMediaKit的ip+http端口，即可查看效果：

注意：按照一般的流程，如果我們更換了ZLMediaKit的ip，則我們需要重新修改MediaServerUI的global.js文件，更改里面對應的serverip，然后重新執(zhí)行npm run build生成dist目錄，再將里面的內容拷貝到ZLMediaKitwww目錄中。這樣是比較麻煩的，我們可以直接修改www目錄下js目錄下的app.1a091279.js，直接修改serverip，如下：

c=Object(l["a"])
(s,o,i,!1,null,null,null),d=c.exports,h="172.16.17.154:30000",u="http://"+h+"/in
dex/api"

然后刷新瀏覽器即可實現(xiàn)MediaServerUI的相應改變。

五、修復MediaServerUI的bug

MediaServerUI已經(jīng)很長時間沒更新了，有些bug作者也沒修復。這里我發(fā)現(xiàn)了兩個bug

（1）顯示的觀看人數(shù)?不正確

可以通過修改MediaServerUI源碼的src/components/videoList.vue中的131行，將videoData.totoalReaderCount這行修改為videoData.totalReaderCount

（2）?MediaServerUI的視頻無法播放（黑屏，無預覽畫面）

這是因為最新版本的ZLMediaKit的流url規(guī)則改了，修改MediaServerUI源碼的src/components/videoList.vue，將所有.flv的地方改成.live.flv就可以了

修改完后，重新執(zhí)行npm run build，再將dist目錄中的內容拷貝到ZLMediaKitwww目錄，即可解決。