EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- 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 如下:

<template>
<div class="container-fluid no-padding">
    <div class="alert alert-success">{{msg}}</div>
    <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
    </el-table>
    <br>
    <el-pagination layout="prev,pager,next" class="pull-right" :total="total" :page-size.sync="pageSize" :current-page.sync="currentPage"></el-pagination>
</div>
</template>

<script>
import Vue from 'vue'
import { Table, TableColumn, Pagination } from 'element-ui'
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);

export default {
data() {
    return {
        currentPage: 1,
        pageSize: 10,
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }],
        msg: "我是视频广场"
    }
},
computed: {
    total() {
        return this.tableData.length;
    },
    pageData() {
        let start = (this.currentPage - 1) * this.pageSize;
        let end = start + this.pageSize;
        return this.tableData.slice(start, end);
    }
},
}
</script>

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

来看看效果吧

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

npm run start

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

源码位置: https://github.com/easydss/easydss-web-src/tree/blog_3

EasyDSS应用场景

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

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

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

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

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

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

关于EasyDSS

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