手机网站开发服务商,深圳营销型网站,哈尔滨最新情况,泉州商城网站开发设计一、简介
按照 ZLMediaKit快速开始 编译运行ZLMediaKit成功后#xff0c;我们可以运行其合作开源项目MediaServerUI#xff0c;来对ZLMediaKit进行可视化管理。通过MediaServerUI#xff0c;我们可以实现在浏览器查看ZLMediaKit的延迟率、负载率、正在进行的推拉流、服务器…一、简介
按照 ZLMediaKit快速开始 编译运行ZLMediaKit成功后我们可以运行其合作开源项目MediaServerUI来对ZLMediaKit进行可视化管理。通过MediaServerUI我们可以实现在浏览器查看ZLMediaKit的延迟率、负载率、正在进行的推拉流、服务器配置等信息。 二、下载MediaServerUI
在 https://gitee.com/kkkkk5G/MediaServerUI 下载MediaServerUI-master.zip拷贝到CentOS系统中我的是CentOS v7.5.1804。
执行命令
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 方法安装这种安装方式是最简单的执行命令
yum install epel-release
yum install nodejs
yum install npm 安装后通过命令node -v npm -v可以查看到node和npm的版本信息则表示安装成功了。 默认安装好后网络源是国外源我们得设置npm源为阿里源否则等下执行npm install时可能会报错npm ERR! Linux XXX 执行命令
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。 执行命令
npm install
npm run build 然后即会在MediaServerUI-master源码目录下生成dist目录 dist目录为前端打包⽬录distribution可以理解为已经经过处理后用于发布的代码。 我们将dist目录下的所有文件和目录拷贝到正在运行的ZLMediaKit的www目录中
浏览器推荐谷歌浏览器输入ZLMediaKit的iphttp端口即可查看效果 注意按照一般的流程如果我们更换了ZLMediaKit的ip则我们需要重新修改MediaServerUI的global.js文件更改里面对应的serverip然后重新执行npm run build生成dist目录再将里面的内容拷贝到ZLMediaKitwww目录中。这样是比较麻烦的我们可以直接修改www目录下js目录下的app.1a091279.js直接修改serverip如下
cObject(l[a])
(s,o,i,!1,null,null,null),dc.exports,h172.16.17.154:30000,uhttp://h/in
dex/api
然后刷新浏览器即可实现MediaServerUI的相应改变。 五、修复MediaServerUI的bug
MediaServerUI已经很长时间没更新了有些bug作者也没修复。这里我发现了两个bug
1显示的观看人数 不正确
可以通过修改MediaServerUI源码的src/components/videoList.vue中的131行将videoData.totoalReaderCount这行修改为videoData.totalReaderCount 2 MediaServerUI的视频无法播放黑屏无预览画面
这是因为最新版本的ZLMediaKit的流url规则改了修改MediaServerUI源码的src/components/videoList.vue将所有.flv的地方改成.live.flv就可以了 修改完后重新执行npm run build再将dist目录中的内容拷贝到ZLMediaKitwww目录即可解决。
