EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV流媒体服务器前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

EasyDSS流媒体解决方案总体可划分成三个部分：前端视频源设备（PC、手机、摄像机）流媒体数据获取并即时回传、流媒体服务器端直播和录像与回放、客户端直播播放与录像检索回放。前端推流我们使用跨平台的RTMP推送库EasyRTMP（支持平台包括有：Windows、Linux、Android、iOS、ARM），流媒体服务器端采用EasyDSS流媒体服务软件，客户端支持全平台（Windows、Android、iOS、H5），客户端可通过EasyDSS流媒体服务器提供的HTTP服务接口，结合EasyPlayer播放器实现直播播放和录像回放等功能。

element-ui 介绍

饿了么前端开发组件框架 element-ui 是 “一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。”

本篇将在前面的脚手架基础上, 引入 element-ui, 并完成一个分页表格。

安装配置 element-ui

npm i element-ui babel-plugin-component --save-dev

babel-plugin-component 用来控制只引入需要的组件，以达到减小项目体积的目的。

将 .babelrc 修改如下:

{
    "presets": [
        "es2015",
        "stage-2"
    ],
    "plugins": [[ "component", [
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-default"
            }
        ]]]
}

在自己的组件中使用 element-ui

修改 index.vue 如下:

先 import 再 Vue.use ,就可以愉快的使用了. 因为前面我们安装并配置了 babel-plugin-component 它将自动为我们引入相关组件的样式

来看看效果吧

基于前面搭建好的这一套脚手架, 后面再引入第三方组件库就变得很容易了, 我们来看看运行效果吧.

npm run start

下一篇, 介绍如何引入 videojs 播放器插件

EasyDSS应用场景

现场直播
摄像机或其它设备实时采集到的现场画面，通过编码器或编码软件推送到直播服务器分发，用户即可通过PC、手机、平板电脑等多种终端实时观看现场直播内容。常用于年会、发布会、政企会议等的网络直播。

网络电视
实现传统电视台的网络播出，支持多平台多终端的直播观看及时移回看。

远程监控
配合网络摄像头可实现远程视频监控，终端用户可以通过PC、手机、平板电脑等多种终端实时观看远程画面，并可以把监控画面录制下来随时回看或分享。广泛应用于宝宝在线、家居安全、公共安防等方向。

实时课堂
应用于远程课堂直播，让不在现场的人也能实时学习优质课程。支持时移，可以随时回看任意时间的课程。

科研方向
应用于农业、养殖业、科学实验等跨区域场景研究。

企业展示
对企业的展示、宣传、活动、行政、培训等视频资源进行 高质量转码，发布到互联网，让员工和客户可以通过企业 网站、移动门户等观看。

关于EasyDSS

EasyDSS(http://www.easydss.com)流媒体解决方案采用业界优秀的流媒体框架模式设计，服务运行轻量、高效、稳定、可靠、易维护，支持RTMP直播、RTMP推送、HTTP点播、HTTP-FLV直播、HLS直播，并支持关键帧缓冲，画面秒开等多种特性，能够接入Web、Android、iOS、H5、微信等全平台客户端，是移动互联网时代贴近企业点播/直播需求的一款接地气的流媒体服务器，配套OBS、EasyRTMP等直播推流工具以及EasyPlayer等网络播放器，可以形成一套完整的视频直播、录播解决方案，满足用户在各种行业场景的流媒体业务需求。