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等网络播放器,可以形成一套完整的视频直播、录播解决方案,满足用户在各种行业场景的流媒体业务需求。
EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui相关推荐
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
接上篇 在上一篇博客中, 我们白手起家, 从零搭建了 webpack + vue + AdminLTE 多页面脚手架. 代码在这里: easydss-web-src , 我为第一篇博客建立了单独的分支 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(四)- webpack + video.js 打造流媒体服务器前端
EasyPlayer播放器是基于EasyDSS流媒体服务器视频强大的后台管理能力,提供视频点播和直播播放能力的强大播放载体.流畅稳定的播放性能,集广告植入.数据监测等功能于一身,为开发者提供端到端的一 ...
- webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...
接上篇 本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! element-ui 介绍 饿了么前端开发组件框架 ...
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间...
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
- EasyDSS高性能RTMP/HLS(m3u8)/HTTP-FLV/RTSP流媒体服务器EasyDSS出现加密机授权异常问题如何解决?
EasyDSS流媒体服务器提供一站式的转码.点播.直播.时移回放服务,简化了开发和集成的工作. 其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像,直播支持RTMP输入,RTMP ...
- EasyDSS高性能流媒体服务器前端重构
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器视频录像、检索、回放方案
需求背景 近期遇到客户反馈对于直播摄像机录像功能是有一定的需求点的, 其实EasyDarwin团队早就研发出对应功能,只是用户对于产品没有足够了解,因此本篇将对录像功能来做一次介绍. 简介 首先,录像 ...
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
最新文章
- java 毫秒转时间字符串_java 时间字符串 转换 毫秒
- 单片机原理,单片机能做什么?
- 在mysql中会话变量前面的字符是什么_在MySQL中仅使用会话变量仅对字符的首次出现执行搜索/替换...
- 几张图帮你理解 docker 基本原理及快速入门
- P2184 贪婪大陆
- teamviewer类似软件_TeamViewer系统后台被黑客组织APT攻破,请注意防范
- C#解决Webservice第一次访问特别慢的问题
- 正面刚谷歌苹果,diss了BAT及友商,商汤科技说自己是一只“黑羊”
- vlookup 公式使用及常见问题
- element-ui对话框fullscreen.lock使用
- 统计学专业词汇英文翻译中英对照总结汇总(贾俊平 统计学 第七版 )
- 长沙县北部新城:“湖湘生态”蓝图已绘就,“右岸经济”起飞正当时
- 忆阻器类脑芯片与人工智能
- 微信小游戏--JS基础
- python绘制蟒蛇,绘制五彩蟒蛇
- 业界新闻: JAVA 7新特性让JVM“瘦身”成功!
- 使用python判断成绩是否合格
- 【LeetCode 5-中等】最长回文子串(高清截图)
- 常用Unity的优化技巧集锦
- NES/FC游戏: 勇者斗恶龙2
热门文章
- kurento教程_Kurento Room Demo 教程 (发布)
- 解决Windows10开机内存超过60%的内存占用过高问题
- 从决策树学习谈到贝叶斯分类算法、EM、HMM --别人的,拷来看看
- android自定义圆形图像
- android 实时更新textview,android应用开发:实时改变TextView的值
- oracle 注册程序,Oracle 12c New Feature: Listener注册进程LREG
- 在 Navicat Monitor for MySQL/MariaDB 中配置实例
- 文本比对工具【UltraCompare附安装包】Mac和Windows下载使用
- 有想法就去实现,外汇英镑近期走势
- 一加七语音唤醒_一加语音助手怎么唤醒_在哪里设置