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

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

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

EasyDSS应用场景

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

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

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

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

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

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

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

关于EasyDSS

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

你可能感兴趣的:(EasyDSS功能介绍)