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等网络播放器，可以形成一套完整的视频直播、录播解决方案，满足用户在各种行业场景的流媒体业务需求。
