加入dashboard

2025-10-16 10:30:42 +08:00 · 2020-01-28 17:22:14 +08:00
parent cb1e601052
commit 3a9851fcd6
57 changed files with 21572 additions and 16 deletions
--- a/config.toml
+++ b/config.toml
@@ -3,9 +3,9 @@ ListenAddr = ":2020"
 [Plugins.Jessica]
 ListenAddr = ":8080"
 [Plugins.RTMP]
-ListenAddr = ":1985"
+ListenAddr = ":1935"
 [Plugins.GateWay]
-ListenAddr = ":80"
+ListenAddr = ":81"
 #[Plugins.Cluster]
 #Master = "localhost:2019"
 #ListenAddr = ":2019"
--- a/dashboard/.gitignore
+++ b/dashboard/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -0,0 +1,24 @@
+# dashboard
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/dashboard/babel.config.js
+++ b/dashboard/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+}
--- a/dashboard/docs/.vuepress/config.js
+++ b/dashboard/docs/.vuepress/config.js
@@ -0,0 +1,20 @@
+module.exports = {
+    dest: 'public/docs',
+    serviceWorker: true,
+    themeConfig: {
+        sidebar: [
+            ['/', '起步'],
+            ['/develop', '插件开发'],
+            [ '/history', '更新日志' ],
+            {
+                title: '内置插件',
+                path: '/plugins/',
+                children: [
+                    '/plugins/jessica'
+                ]
+            },
+        ]
+    },
+    title: 'Monibuca',
+    base: '/docs/'
+}
--- a/dashboard/docs/.vuepress/enhanceApp.js
+++ b/dashboard/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,38 @@
+import upperFirst from 'lodash/upperFirst'
+  import camelCase from 'lodash/camelCase'
+  export default ({
+    Vue, // the version of Vue being used in the VuePress app
+    options, // the options for the root Vue instance
+    router, // the router instance for the app
+    siteData // site metadata
+  }) => {
+    // ...apply enhancements to the app
+   
+    const requireComponent = require.context(
+      // The relative path of the components folder
+      '../../src/components',
+      // Whether or not to look in subfolders
+      true,
+      // The regular expression used to match base component filenames
+      /.(vue|js)$/
+    )
+    
+    
+    requireComponent.keys().forEach(fileName => {
+      // Get component config
+      const componentConfig = requireComponent(fileName)
+      const fc = fileName.split('/')
+      const f = fc[fc.length - 1]
+      // Get PascalCase name of component
+      const componentName = upperFirst(
+        camelCase(
+          f.replace(/.*\//, '$1').replace(/\.\w+$/,'')
+        )
+      )
+      // Register component globally
+      Vue.component(
+        componentName,
+        componentConfig.default || componentConfig
+      )
+    })
+  }
--- a/dashboard/docs/README.md
+++ b/dashboard/docs/README.md
@@ -0,0 +1,53 @@
+# Monibuca快速起步
+## 介绍
+Monibuca 是一个开源的流媒体服务器开发框架，适用于快速定制化开发流媒体服务器，可以对接CDN厂商，作为回源服务器，也可以自己搭建集群部署环境。
+丰富的内置插件提供了流媒体服务器的常见功能，例如rtmp server、http-flv、视频录制、QoS等。除此以外还内置了后台web界面，方便观察服务器运行的状态。
+也可以自己开发后台管理界面，通过api方式获取服务器的运行信息。
+Monibuca 提供了可供定制化开发的插件机制，可以任意扩展其功能。
+
+## 启动
+启用所有内置插件
+```go
+package main
+
+import (
+	. "github.com/langhuihui/monibuca/monica"
+	_ "github.com/langhuihui/monibuca/plugins"
+)
+
+func main() {
+	Run("config.toml")
+	select {}
+}
+```
+
+## 配置
+
+要使用`Monibuca`,需要编写一个`toml`格式的配置文件，通常可以放在程序的同级目录下例如：`config.toml`(名称不是必须为`config`)
+
+该配置文件主要是为了定制各个插件的配置，例如监听端口号等，具体还是要看各个插件的设计。
+
+> 如果你编写了自己的插件，就必须在该配置文件中写入对自己插件的配置信息
+
+如果注释掉部分插件的配置，那么该插件就不会启用，典型的配置如下：
+```toml
+[Plugins.HDL]
+ListenAddr = ":2020"
+[Plugins.Jessica]
+ListenAddr = ":8080"
+[Plugins.RTMP]
+ListenAddr = ":1935"
+[Plugins.GateWay]
+ListenAddr = ":81"
+#[Plugins.Cluster]
+#Master = "localhost:2019"
+#ListenAddr = ":2019"
+#
+#[Plugins.Auth]
+#Key="www.monibuca.com"
+#[Plugins.RecordFlv]
+#Path="./resouce"
+[Plugins.QoS]
+Suffix = ["high","medium","low"]
+```
+具体配置的含义，可以参考每个插件的说明
--- a/dashboard/docs/develop.md
+++ b/dashboard/docs/develop.md
@@ -0,0 +1,178 @@
+# 插件开发
+## 插件的定义
+所谓的插件，没有什么固定的规则，只需要完成`安装`操作即可。插件可以实现任意的功能扩展，最常见的是实现某种传输协议用来推流或者拉流
+
+## 插件的安装
+下面是内置插件jessica的源码，代表了典型的插件安装
+```go
+package jessica
+
+import (
+	. "github.com/langhuihui/monibuca/monica"
+	"log"
+	"net/http"
+)
+
+var config = new(ListenerConfig)
+
+func init() {
+	InstallPlugin(&PluginConfig{
+		Name:   "Jessica",
+		Type:   PLUGIN_SUBSCRIBER,
+		Config: config,
+		Run:    run,
+	})
+}
+func run() {
+	log.Printf("server Jessica start at %s", config.ListenAddr)
+	log.Fatal(http.ListenAndServe(config.ListenAddr, http.HandlerFunc(WsHandler)))
+}
+```
+当主程序读取配置文件完成解析后，会调用各个插件的Run函数，上面代码中执行了一个http的端口监听
+
+## 开发订阅者插件
+所谓订阅者就是用来从流媒体服务器接收音视频流的程序，例如RTMP协议执行play命令后、http-flv请求响应程序、websocket响应程序。内置插件中录制flv程序也是一个特殊的订阅者。
+下面是http-flv插件的源码，供参考
+```go
+package HDL
+
+import (
+	. "github.com/langhuihui/monibuca/monica"
+	"github.com/langhuihui/monibuca/monica/avformat"
+	"github.com/langhuihui/monibuca/monica/pool"
+	"log"
+	"net/http"
+	"strings"
+)
+
+var config = new(ListenerConfig)
+
+func init() {
+	InstallPlugin(&PluginConfig{
+		Name:   "HDL",
+		Type:   PLUGIN_SUBSCRIBER,
+		Config: config,
+		Run:    run,
+	})
+}
+
+func run() {
+	log.Printf("HDL start at %s", config.ListenAddr)
+	log.Fatal(http.ListenAndServe(config.ListenAddr, http.HandlerFunc(HDLHandler)))
+}
+
+func HDLHandler(w http.ResponseWriter, r *http.Request) {
+	sign := r.URL.Query().Get("sign")
+	if err := AuthHooks.Trigger(sign); err != nil {
+		w.WriteHeader(403)
+		return
+	}
+	stringPath := strings.TrimLeft(r.RequestURI, "/")
+	if strings.HasSuffix(stringPath, ".flv") {
+		stringPath = strings.TrimRight(stringPath, ".flv")
+	}
+	if _, ok := AllRoom.Load(stringPath); ok {
+		//atomic.AddInt32(&hdlId, 1)
+		w.Header().Set("Transfer-Encoding", "chunked")
+		w.Header().Set("Content-Type", "video/x-flv")
+		w.Write(avformat.FLVHeader)
+		p := OutputStream{
+			Sign: sign,
+			SendHandler: func(packet *pool.SendPacket) error {
+				return avformat.WriteFLVTag(w, packet)
+			},
+			SubscriberInfo: SubscriberInfo{
+				ID: r.RemoteAddr, Type: "FLV",
+			},
+		}
+		p.Play(stringPath)
+	} else {
+		w.WriteHeader(404)
+	}
+}
+```
+其中，核心逻辑就是创建OutputStream对象，每一个订阅者需要提供SendHandler函数，用来接收来自发布者广播出来的音视频数据。
+最后调用该对象的Play函数进行播放。请注意：Play函数会阻塞当前goroutine。
+
+## 开发发布者插件
+
+所谓发布者，就是提供音视频数据的程序，例如接收来自OBS、ffmpeg的推流的程序。内置插件中，集群功能里面有一个特殊的发布者，它接收来自源服务器的音视频数据，然后在本服务器中广播音视频。
+以此为例，我们需要提供一个结构体定义来表示特定的发布者：
+```go
+type Receiver struct {
+	InputStream
+	io.Reader
+	*bufio.Writer
+}
+```
+其中InputStream 是固定的，必须包含，且必须以组合继承的方式定义。其余的成员则是任意的。
+发布者的发布动作需要特定条件的触发，例如在集群插件中，当本服务器有订阅者订阅了某个流，而该流并没有发布者的时候就会触发向源服务器拉流的函数：
+```go
+func PullUpStream(streamPath string) {
+	addr, err := net.ResolveTCPAddr("tcp", config.Master)
+	if MayBeError(err) {
+		return
+	}
+	conn, err := net.DialTCP("tcp", nil, addr)
+	if MayBeError(err) {
+		return
+	}
+	brw := bufio.NewReadWriter(bufio.NewReader(conn), bufio.NewWriter(conn))
+	p := &Receiver{
+		Reader: conn,
+		Writer: brw.Writer,
+	}
+	if p.Publish(streamPath, p) {
+		p.WriteByte(MSG_SUBSCRIBE)
+		p.WriteString(streamPath)
+		p.WriteByte(0)
+		p.Flush()
+		for _, v := range p.Subscribers {
+			p.Auth(v)
+		}
+	} else {
+		return
+	}
+	defer p.Cancel()
+	for {
+		cmd, err := brw.ReadByte()
+		if MayBeError(err) {
+			return
+		}
+		switch cmd {
+		case MSG_AUDIO:
+			if audio, err := p.readAVPacket(avformat.FLV_TAG_TYPE_AUDIO); err == nil {
+				p.PushAudio(audio)
+			}
+		case MSG_VIDEO:
+			if video, err := p.readAVPacket(avformat.FLV_TAG_TYPE_VIDEO); err == nil && len(video.Payload) > 2 {
+				tmp := video.Payload[0]         // 第一个字节保存着视频的相关信息.
+				video.VideoFrameType = tmp >> 4 // 帧类型 4Bit, H264一般为1或者2
+				p.PushVideo(video)
+			}
+		case MSG_AUTH:
+			cmd, err = brw.ReadByte()
+			if MayBeError(err) {
+				return
+			}
+			bytes, err := brw.ReadBytes(0)
+			if MayBeError(err) {
+				return
+			}
+			subId := strings.Split(string(bytes[0:len(bytes)-1]), ",")[0]
+			if v, ok := p.Subscribers[subId]; ok {
+				if cmd != 1 {
+					v.Cancel()
+				}
+			}
+		}
+	}
+}
+
+```
+正在该函数中会向源服务器建立tcp连接，然后发送特定命令表示需要拉流，当我们接收到源服务器的数据的时候，就调用PushVideo和PushAudio函数来广播音视频。
+
+核心逻辑是调用InputStream的Publish以及PushVideo、PushAudio函数
+
+## 开发钩子插件
+
--- a/dashboard/docs/history.md
+++ b/dashboard/docs/history.md
@@ -0,0 +1,4 @@
+# 更新历史
+
+- 2020/1/27
+1.0完成
--- a/dashboard/docs/plugins/README.md
+++ b/dashboard/docs/plugins/README.md
--- a/dashboard/docs/plugins/jessica.md
+++ b/dashboard/docs/plugins/jessica.md
@@ -0,0 +1,10 @@
+# Jessica
+该插件为基于WebSocket协议传输音视频的订阅者，音视频数据以裸数据的形式进行传输，我们需要Jessibuca播放器来进行播放
+Jessibua播放器已内置于源码中，该播放器通过js解码H264并用canvas进行渲染，可以运行在几乎所有的终端浏览器上面。
+在Monibuca的Web界面中预览功能就是使用的Jessibuca播放器。
+## 配置
+目前仅有的配置是监听的端口号
+```toml
+[Plugins.Jessica]
+ListenAddr = ":8080"
+```
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "docs:build": "vuepress build docs",
+    "docs:dev": "vuepress dev docs"
+  },
+  "dependencies": {
+    "@antv/g2plot": "^0.11.22",
+    "core-js": "^3.4.4",
+    "view-design": "^4.0.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.1.0",
+    "@vue/cli-plugin-vuex": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "iview-loader": "^1.3.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "loadash": "^1.0.0",
+    "vue-cli-plugin-iview": "^2.0.0",
+    "vue-cli-plugin-vuepress": "^0.1.1",
+    "vue-template-compiler": "^2.6.10",
+    "vuepress": "^0.10.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "vue/no-parsing-error": [
+        2,
+        {
+          "x-invalid-end-tag": false
+        }
+      ]
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/dashboard/public/docs/404.html
+++ b/dashboard/public/docs/404.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>How did we get here?</blockquote><a href="/docs/" class="router-link-active">Take me home.</a></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/assets/css/styles.92893aed.css
+++ b/dashboard/public/docs/assets/css/styles.92893aed.css
--- a/dashboard/public/docs/assets/img/search.83621669.svg
+++ b/dashboard/public/docs/assets/img/search.83621669.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
--- a/dashboard/public/docs/assets/js/1.685ed1cc.js
+++ b/dashboard/public/docs/assets/js/1.685ed1cc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{168:function(t,e,n){"use strict";n.r(e);var a=n(0),s=Object(a.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"关于-monibuca"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#关于-monibuca","aria-hidden":"true"}},[this._v("#")]),this._v(" 关于 Monibuca")])])}],!1,null,null,null);e.default=s.exports}}]);
--- a/dashboard/public/docs/assets/js/2.a6d3efaf.js
+++ b/dashboard/public/docs/assets/js/2.a6d3efaf.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{167:function(t,e,s){"use strict";s.r(e);var a=s(0),i=Object(a.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"page-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#page-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Page 2")]),e("p",[this._v("this is a second page")])])}],!1,null,null,null);e.default=i.exports}}]);
--- a/dashboard/public/docs/assets/js/3.a9fbea98.js
+++ b/dashboard/public/docs/assets/js/3.a9fbea98.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{166:function(t,n,e){"use strict";e.r(n);var s=e(0),c=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})}),[],!1,null,null,null);n.default=c.exports}}]);
--- a/dashboard/public/docs/assets/js/4.727e40e9.js
+++ b/dashboard/public/docs/assets/js/4.727e40e9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{165:function(t,e,i){"use strict";i.r(e);var s=i(0),a=Object(s.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"page-3-with-custom-link-page"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#page-3-with-custom-link-page","aria-hidden":"true"}},[this._v("#")]),this._v(" Page 3 with custom link page")]),e("p",[this._v("this is a third page")])])}],!1,null,null,null);e.default=a.exports}}]);
--- a/dashboard/public/docs/assets/js/5.78b155e8.js
+++ b/dashboard/public/docs/assets/js/5.78b155e8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{164:function(t,e,s){"use strict";s.r(e);var a=s(0),i=Object(a.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"page-1"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#page-1","aria-hidden":"true"}},[this._v("#")]),this._v(" Page 1")]),e("p",[this._v("this is a page")])])}],!1,null,null,null);e.default=i.exports}}]);
--- a/dashboard/public/docs/assets/js/6.35a311c9.js
+++ b/dashboard/public/docs/assets/js/6.35a311c9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{163:function(t,n,e){"use strict";e.r(n);var s=e(0),c=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})}),[],!1,null,null,null);n.default=c.exports}}]);
--- a/dashboard/public/docs/assets/js/7.ab3a52c1.js
+++ b/dashboard/public/docs/assets/js/7.ab3a52c1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{162:function(t,s,a){"use strict";a.r(s);var e=a(0),i=Object(e.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"jessica"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#jessica","aria-hidden":"true"}},[this._v("#")]),this._v(" Jessica")]),s("h2",{attrs:{id:"配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置","aria-hidden":"true"}},[this._v("#")]),this._v(" 配置")])])}],!1,null,null,null);s.default=i.exports}}]);
--- a/dashboard/public/docs/assets/js/app.92893aed.js
+++ b/dashboard/public/docs/assets/js/app.92893aed.js
--- a/dashboard/public/docs/config.html
+++ b/dashboard/public/docs/config.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page 2 | Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/2.a6d3efaf.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="active sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><h1 id="page-2"><a href="#page-2" aria-hidden="true" class="header-anchor">#</a> Page 2</h1><p>this is a second page</p></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><span class="prev">
+        ← <a href="/docs/install.html" class="prev">
+          安装
+        </a></span><span class="next"><a href="/docs/develop.html">
+          插件开发
+        </a> →
+      </span></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/2.a6d3efaf.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/develop.html
+++ b/dashboard/public/docs/develop.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/3.a9fbea98.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="active sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><span class="prev">
+        ← <a href="/docs/config.html" class="prev">
+          配置
+        </a></span><span class="next"><a href="/docs/history.html">
+          更新日志
+        </a> →
+      </span></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/3.a9fbea98.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/history.html
+++ b/dashboard/public/docs/history.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page 3 with custom link page | Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/4.727e40e9.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="active sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><h1 id="page-3-with-custom-link-page"><a href="#page-3-with-custom-link-page" aria-hidden="true" class="header-anchor">#</a> Page 3 with custom link page</h1><p>this is a third page</p></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><span class="prev">
+        ← <a href="/docs/develop.html" class="prev">
+          插件开发
+        </a></span><span class="next"><a href="/docs/plugins/jessica.html">
+          Jessica
+        </a> →
+      </span></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/4.727e40e9.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/index.html
+++ b/dashboard/public/docs/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>关于 Monibuca | Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/1.685ed1cc.js" as="script"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-exact-active router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="active sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><h1 id="关于-monibuca"><a href="#关于-monibuca" aria-hidden="true" class="header-anchor">#</a> 关于 Monibuca</h1></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/docs/install.html">
+          安装
+        </a> →
+      </span></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/1.685ed1cc.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/install.html
+++ b/dashboard/public/docs/install.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Page 1 | Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/5.78b155e8.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="active sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><h1 id="page-1"><a href="#page-1" aria-hidden="true" class="header-anchor">#</a> Page 1</h1><p>this is a page</p></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><span class="prev">
+        ← <a href="/docs/" class="prev router-link-active">
+          介绍
+        </a></span><span class="next"><a href="/docs/config.html">
+          配置
+        </a> →
+      </span></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/5.78b155e8.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/plugins/index.html
+++ b/dashboard/public/docs/plugins/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/6.35a311c9.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/7.ab3a52c1.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>内置插件</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"></div><div class="page-edit"><!----><!----></div><!----></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/6.35a311c9.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/plugins/jessica.html
+++ b/dashboard/public/docs/plugins/jessica.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Jessica | Monibuca</title>
+    <meta name="description" content="">
+    
+    
+    <link rel="preload" href="/docs/assets/css/styles.92893aed.css" as="style"><link rel="preload" href="/docs/assets/js/app.92893aed.js" as="script"><link rel="preload" href="/docs/assets/js/7.ab3a52c1.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.685ed1cc.js"><link rel="prefetch" href="/docs/assets/js/2.a6d3efaf.js"><link rel="prefetch" href="/docs/assets/js/3.a9fbea98.js"><link rel="prefetch" href="/docs/assets/js/4.727e40e9.js"><link rel="prefetch" href="/docs/assets/js/5.78b155e8.js"><link rel="prefetch" href="/docs/assets/js/6.35a311c9.js">
+    <link rel="stylesheet" href="/docs/assets/css/styles.92893aed.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/docs/" class="home-link router-link-active"><!----><span class="site-name">
+      Monibuca
+    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">介绍</a></li><li><a href="/docs/install.html" class="sidebar-link">安装</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li><li><a href="/docs/develop.html" class="sidebar-link">插件开发</a></li><li><a href="/docs/history.html" class="sidebar-link">更新日志</a></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>内置插件</span><span class="arrow down"></span></p><ul class="sidebar-group-items"><li><a href="/docs/plugins/jessica.html" class="active sidebar-link">Jessica</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/plugins/jessica.html#配置" class="sidebar-link">配置</a></li></ul></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="jessica"><a href="#jessica" aria-hidden="true" class="header-anchor">#</a> Jessica</h1><h2 id="配置"><a href="#配置" aria-hidden="true" class="header-anchor">#</a> 配置</h2></div><div class="page-edit"><!----><!----></div><div class="page-nav"><p class="inner"><span class="prev">
+        ← <a href="/docs/history.html" class="prev">
+          更新日志
+        </a></span><!----></p></div></div></div></div>
+    <script src="/docs/assets/js/app.92893aed.js" defer></script><script src="/docs/assets/js/7.ab3a52c1.js" defer></script>
+  </body>
+</html>
--- a/dashboard/public/docs/service-worker.js
+++ b/dashboard/public/docs/service-worker.js
@@ -0,0 +1,96 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [
+  {
+    "url": "404.html",
+    "revision": "0e4ff0fd403c5d29a13752bf3ef14d6d"
+  },
+  {
+    "url": "assets/css/styles.92893aed.css",
+    "revision": "07fa9a1fb782ef296585900714fac621"
+  },
+  {
+    "url": "assets/img/search.83621669.svg",
+    "revision": "83621669651b9a3d4bf64d1a670ad856"
+  },
+  {
+    "url": "assets/js/1.685ed1cc.js",
+    "revision": "97247c4d4a60db87b22488bfdf99197d"
+  },
+  {
+    "url": "assets/js/2.a6d3efaf.js",
+    "revision": "dca15d8c2b94dadcdce4386e7d628716"
+  },
+  {
+    "url": "assets/js/3.a9fbea98.js",
+    "revision": "7f6bca508f94f8f508a61cd05b582084"
+  },
+  {
+    "url": "assets/js/4.727e40e9.js",
+    "revision": "b8fca87e9c559c1fe3fa03b76d15c3bd"
+  },
+  {
+    "url": "assets/js/5.78b155e8.js",
+    "revision": "73d1f3053737ad68ee4ec4fa395fcae9"
+  },
+  {
+    "url": "assets/js/6.35a311c9.js",
+    "revision": "8bd2ad3294cf6a29e7326ca860d43250"
+  },
+  {
+    "url": "assets/js/7.ab3a52c1.js",
+    "revision": "437c1f4739f884dcff81135f7bc8450c"
+  },
+  {
+    "url": "assets/js/app.92893aed.js",
+    "revision": "6962a63ee86d8a65c9ae46100427d812"
+  },
+  {
+    "url": "config.html",
+    "revision": "73b0335d99419df53f57913cd7303509"
+  },
+  {
+    "url": "develop.html",
+    "revision": "bc1b3cad3f88b61fee351464cffc7d0f"
+  },
+  {
+    "url": "history.html",
+    "revision": "dc6b1088d3cc72f1f3a402c56a441a57"
+  },
+  {
+    "url": "index.html",
+    "revision": "577c237555d953d8a22d045212f0a92e"
+  },
+  {
+    "url": "install.html",
+    "revision": "d06af57877e4695ae1a81528e2f128f1"
+  },
+  {
+    "url": "plugins/index.html",
+    "revision": "e578381fed44a65589053470ea33795d"
+  },
+  {
+    "url": "plugins/jessica.html",
+    "revision": "fe406bf63d2d349727c63d6045fd2efa"
+  }
+].concat(self.__precacheManifest || []);
+workbox.precaching.suppressWarnings();
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
--- a/dashboard/public/favicon.ico
+++ b/dashboard/public/favicon.ico
--- a/dashboard/public/index.html
+++ b/dashboard/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>Monibuca</title>
+    <script src="jessibuca/ajax.js"></script>
+    <script src="jessibuca/renderer.js"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but dashboard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/dashboard/public/jessibuca/ajax.js
+++ b/dashboard/public/jessibuca/ajax.js
@@ -0,0 +1,535 @@
+// a simple ajax
+!(function () {
+
+    var jsonType = 'application/json';
+    var htmlType = 'text/html';
+    var xmlTypeRE = /^(?:text|application)\/xml/i;
+    var blankRE = /^\s*$/; // \s
+
+    /*
+     * default setting
+     * */
+    var _settings = {
+
+        type: "GET",
+
+        beforeSend: noop,
+
+        success: noop,
+
+        error: noop,
+
+        complete: noop,
+
+        context: null,
+
+        xhr: function () {
+            return new window.XMLHttpRequest();
+        },
+
+        accepts: {
+            json: jsonType,
+            xml: 'application/xml, text/xml',
+            html: htmlType,
+            text: 'text/plain'
+        },
+
+        crossDomain: false,
+
+        timeout: 0,
+
+        username: null,
+
+        password: null,
+
+        processData: true,
+
+        promise: noop
+    };
+
+    function noop() {
+    }
+
+    var ajax = function (options) {
+
+        //
+        var settings = extend({}, options || {});
+
+        //
+        for (var key in _settings) {
+            if (settings[key] === undefined) {
+                settings[key] = _settings[key];
+            }
+        }
+
+        //
+        try {
+            var q = {};
+            var promise = new Promise(function (resolve, reject) {
+                q.resolve = resolve;
+                q.reject = reject;
+            });
+
+            promise.resolve = q.resolve;
+            promise.reject = q.reject;
+
+            settings.promise = promise;
+        }
+        catch (e) {
+            //
+            settings.promise = {
+                resolve: noop,
+                reject: noop
+            };
+        }
+
+
+        //
+        if (!settings.crossDomain) {
+            settings.crossDomain = /^([\w-]+:)?\/\/([^\/]+)/.test(settings.url) && RegExp.$2 !== window.location.href;
+        }
+
+        var dataType = settings.dataType;
+        // jsonp
+        if (dataType === 'jsonp') {
+            //
+            var hasPlaceholder = /=\?/.test(settings.url);
+            if (!hasPlaceholder) {
+                var jsonpCallback = (settings.jsonp || 'callback') + '=?';
+
+                settings.url = appendQuery(settings.url, jsonpCallback)
+            }
+            return JSONP(settings);
+        }
+
+        // url
+        if (!settings.url) {
+            settings.url = window.location.toString();
+        }
+
+        //
+        serializeData(settings);
+
+        var mime = settings.accepts[dataType]; // mime
+        var baseHeader = {}; // header
+        var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol; // protocol
+        var xhr = _settings.xhr();
+        var abortTimeout;
+
+        // X-Requested-With header
+        // For cross-domain requests, seeing as conditions for a preflight are
+        // akin to a jigsaw puzzle, we simply never set it to be sure.
+        // (it can always be set on a per-request basis or even using ajaxSetup)
+        // For same-domain requests, won't change header if already provided.
+        if (!settings.crossDomain && !baseHeader['X-Requested-With']) {
+            baseHeader['X-Requested-With'] = 'XMLHttpRequest';
+        }
+
+        // mime
+        if (mime) {
+            //
+            baseHeader['Accept'] = mime;
+
+            if (mime.indexOf(',') > -1) {
+                mime = mime.split(',', 2)[0]
+            }
+            //
+            xhr.overrideMimeType && xhr.overrideMimeType(mime);
+        }
+
+        // contentType
+        if (settings.contentType || (settings.data && settings.type.toUpperCase() !== 'GET')) {
+            baseHeader['Content-Type'] = (settings.contentType || 'application/x-www-form-urlencoded; charset=UTF-8');
+        }
+
+        // headers
+        settings.headers = extend(baseHeader, settings.headers || {});
+
+        // on ready state change
+        xhr.onreadystatechange = function () {
+            // readystate
+            if (xhr.readyState === 4) {
+                clearTimeout(abortTimeout);
+                var result;
+                var error = false;
+                //
+                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+                    dataType = dataType || mimeToDataType(xhr.getResponseHeader('content-type'));
+                    result = xhr.responseText;
+
+                    try {
+                        // xml
+                        if (dataType === 'xml') {
+                            result = xhr.responseXML;
+                        }
+                        // json
+                        else if (dataType === 'json') {
+                            result = blankRE.test(result) ? null : JSON.parse(result);
+                        }
+                    }
+                    catch (e) {
+                        error = e;
+                    }
+
+                    if (error) {
+                        ajaxError(error, 'parseerror', xhr, settings);
+                    }
+                    else {
+                        ajaxSuccess(result, xhr, settings);
+                    }
+                }
+                else {
+                    ajaxError(null, 'error', xhr, settings);
+                }
+
+            }
+        };
+
+        // async
+        var async = 'async' in settings ? settings.async : true;
+
+        // open
+        xhr.open(settings.type, settings.url, async, settings.username, settings.password);
+
+        // xhrFields
+        if (settings.xhrFields) {
+            for (var name in settings.xhrFields) {
+                xhr[name] = settings.xhrFields[name];
+            }
+        }
+
+        // Override mime type if needed
+        if (settings.mimeType && xhr.overrideMimeType) {
+            xhr.overrideMimeType(settings.mimeType);
+        }
+
+
+        // set request header
+        for (var name in settings.headers) {
+            // Support: IE<9
+            // IE's ActiveXObject throws a 'Type Mismatch' exception when setting
+            // request header to a null-value.
+            //
+            // To keep consistent with other XHR implementations, cast the value
+            // to string and ignore `undefined`.
+            if (settings.headers[name] !== undefined) {
+                xhr.setRequestHeader(name, settings.headers[name] + "");
+            }
+        }
+
+        // before send
+        if (ajaxBeforeSend(xhr, settings) === false) {
+            xhr.abort();
+            return false;
+        }
+
+        // timeout
+        if (settings.timeout > 0) {
+            abortTimeout = window.setTimeout(function () {
+                xhr.onreadystatechange = noop;
+                xhr.abort();
+                ajaxError(null, 'timeout', xhr, settings);
+            }, settings.timeout);
+        }
+
+        // send
+        xhr.send(settings.data ? settings.data : null);
+
+        return settings.promise;
+    };
+
+    /*
+     * method  get
+     * */
+    ajax.get = function (url, data, success, dataType) {
+        if (isFunction(data)) {
+            dataType = dataType || success;
+            success = data;
+            data = undefined;
+        }
+
+        return ajax({
+            url: url,
+            data: data,
+            success: success,
+            dataType: dataType
+        });
+    };
+
+    /*
+     * method post
+     *
+     * dataType:
+     * */
+    ajax.post = function (url, data, success, dataType) {
+        if (isFunction(data)) {
+            dataType = dataType || success;
+            success = data;
+            data = undefined;
+        }
+        return ajax({
+            type: 'POST',
+            url: url,
+            data: data,
+            success: success,
+            dataType: dataType
+        })
+    };
+
+    /*
+     * method getJSON
+     * */
+    ajax.getJSON = function (url, data, success) {
+
+        if (isFunction(data)) {
+            success = data;
+            data = undefined;
+        }
+
+        return ajax({
+            url: url,
+            data: data,
+            success: success,
+            dataType: 'json'
+        })
+    };
+
+    /*
+     * method  ajaxSetup
+     * */
+    ajax.ajaxSetup = function (target, settings) {
+        return settings ? extend(extend(target, _settings), settings) : extend(_settings, target);
+    };
+
+    /*
+     * utils
+     *
+     * */
+
+
+    // triggers and extra global event ajaxBeforeSend that's like ajaxSend but cancelable
+    function ajaxBeforeSend(xhr, settings) {
+        var context = settings.context;
+        //
+        if (settings.beforeSend.call(context, xhr, settings) === false) {
+            return false;
+        }
+    }
+
+    // ajax success
+    function ajaxSuccess(data, xhr, settings) {
+        var context = settings.context;
+        var status = 'success';
+        settings.success.call(context, data, status, xhr);
+        settings.promise.resolve(data, status, xhr);
+        ajaxComplete(status, xhr, settings);
+    }
+
+    // status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
+    function ajaxComplete(status, xhr, settings) {
+        var context = settings.context;
+        settings.complete.call(context, xhr, status);
+    }
+
+    // type: "timeout", "error", "abort", "parsererror"
+    function ajaxError(error, type, xhr, settings) {
+        var context = settings.context;
+        settings.error.call(context, xhr, type, error);
+        settings.promise.reject(xhr, type, error);
+        ajaxComplete(type, xhr, settings);
+    }
+
+
+    // jsonp
+    /*
+     * tks: https://www.cnblogs.com/rubylouvre/archive/2011/02/13/1953087.html
+     * */
+    function JSONP(options) {
+        //
+        var callbackName = options.jsonpCallback || 'jsonp' + (new Date().getTime());
+
+        var script = window.document.createElement('script');
+
+        var abort = function () {
+            // 设置 window.xxx = noop
+            if (callbackName in window) {
+                window[callbackName] = noop;
+            }
+        };
+
+        var xhr = {abort: abort};
+        var abortTimeout;
+
+        var head = window.document.getElementsByTagName('head')[0] || window.document.documentElement;
+
+        // ie8+
+        script.onerror = function (error) {
+            _error(error);
+        };
+
+        function _error(error) {
+            window.clearTimeout(abortTimeout);
+            xhr.abort();
+            ajaxError(error.type, xhr, error.type, options);
+            _removeScript();
+        }
+
+        window[callbackName] = function (data) {
+            window.clearTimeout(abortTimeout);
+            ajaxSuccess(data, xhr, options);
+            _removeScript();
+        };
+
+        //
+        serializeData(options);
+
+        script.src = options.url.replace(/=\?/, '=' + callbackName);
+        //
+        script.src = appendQuery(script.src, '_=' + (new Date()).getTime());
+        //
+        script.async = true;
+
+        // script charset
+        if (options.scriptCharset) {
+            script.charset = options.scriptCharset;
+        }
+
+        //
+        head.insertBefore(script, head.firstChild);
+
+        //
+        if (options.timeout > 0) {
+            abortTimeout = window.setTimeout(function () {
+                xhr.abort();
+                ajaxError('timeout', xhr, 'timeout', options);
+                _removeScript();
+            }, options.timeout);
+        }
+
+        // remove script
+        function _removeScript() {
+            if (script.clearAttributes) {
+                script.clearAttributes();
+            } else {
+                script.onload = script.onreadystatechange = script.onerror = null;
+            }
+
+            if (script.parentNode) {
+                script.parentNode.removeChild(script);
+            }
+            //
+            script = null;
+
+            delete window[callbackName];
+        }
+
+        return options.promise;
+    }
+
+    //  mime to data type
+    function mimeToDataType(mime) {
+        return mime && (mime === htmlType ? 'html' : mime === jsonType ? 'json' : xmlTypeRE.test(mime) && 'xml') || 'text'
+    }
+
+    // append query
+    function appendQuery(url, query) {
+        return (url + '&' + query).replace(/[&?]{1,2}/, '?');
+    }
+
+    // serialize data
+    function serializeData(options) {
+        // formData
+        if (isObject(options) && !isFormData(options.data) && options.processData) {
+            options.data = param(options.data);
+        }
+
+        if (options.data && (!options.type || options.type.toUpperCase() === 'GET')) {
+            options.url = appendQuery(options.url, options.data);
+        }
+    }
+
+    // serialize
+    function serialize(params, obj, traditional, scope) {
+        var _isArray = isArray(obj);
+
+        for (var key in obj) {
+            var value = obj[key];
+
+            if (scope) {
+                key = traditional ? scope : scope + '[' + (_isArray ? '' : key) + ']';
+            }
+
+            // handle data in serializeArray format
+            if (!scope && _isArray) {
+                params.add(value.name, value.value);
+
+            }
+            else if (traditional ? _isArray(value) : isObject(value)) {
+                serialize(params, value, traditional, key);
+            }
+            else {
+                params.add(key, value);
+            }
+        }
+
+    }
+
+    // param
+    function param(obj, traditional) {
+        var params = [];
+        //
+        params.add = function (k, v) {
+            this.push(encodeURIComponent(k) + '=' + encodeURIComponent(v));
+        };
+        serialize(params, obj, traditional);
+        return params.join('&').replace('%20', '+');
+    }
+
+    // extend
+    function extend(target) {
+        var slice = Array.prototype.slice;
+        var args = slice.call(arguments, 1);
+        //
+        for (var i = 0, length = args.length; i < length; i++) {
+            var source = args[i] || {};
+            for (var key in  source) {
+                if (source.hasOwnProperty(key) && source[key] !== undefined) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    }
+
+    // is object
+    function isObject(obj) {
+        var type = typeof obj;
+        return type === 'function' || type === 'object' && !!obj;
+    }
+
+    // is formData
+    function isFormData(obj) {
+        return obj instanceof FormData;
+    }
+
+    // is array
+    function isArray(value) {
+        return Object.prototype.toString.call(value) === "[object Array]";
+    }
+
+    // is function
+    function isFunction(value) {
+        return typeof value === "function";
+    }
+
+    // browser
+    window.ajax = ajax;
+})();
+
+
+
+
+
+
+
--- a/dashboard/public/jessibuca/ff.js
+++ b/dashboard/public/jessibuca/ff.js
--- a/dashboard/public/jessibuca/renderer.js
+++ b/dashboard/public/jessibuca/renderer.js
@@ -0,0 +1,460 @@
+function Jessibuca(opt) {
+    this.canvasElement = opt.canvas;
+    this.contextOptions = opt.contextOptions;
+    this.videoBuffer = opt.videoBuffer || 1
+    if (!opt.forceNoGL) this.initContextGL();
+
+    if (this.contextGL) {
+        this.initProgram();
+        this.initBuffers();
+        this.initTextures();
+    };
+    this.decoderWorker = new Worker(opt.decoder || '264_mp3.js')
+    var _this = this
+    function draw(output) {
+        _this.drawNextOutputPicture(_this.width, _this.height, null, output)
+        postMessage({ cmd: "setBuffer", buffer: output }, '*', [output[0].buffer, output[1].buffer, output[2].buffer])
+    }
+    this.decoderWorker.onmessage = function (event) {
+        var msg = event.data
+        switch (msg.cmd) {
+            case "init":
+                console.log("decoder worker init")
+                postMessage({ cmd: "setVideoBuffer", time: _this.videoBuffer }, "*")
+                if (_this.onLoad) {
+                    _this.onLoad()
+                    delete _this.onLoad;
+                }
+                break
+            case "initSize":
+                _this.width = msg.w
+                _this.height = msg.h
+                if (_this.isWebGL()) {
+                    // var buffer = new ArrayBuffer(msg.w * msg.h + (msg.w * msg.h >> 1))
+                    // this.postMessage({ cmd: "setBuffer", buffer: buffer }, [buffer])
+                }
+                else {
+                    _this.initRGB(msg.w, msg.h)
+                }
+                break
+            case "render":
+                if (_this.onPlay) {
+                    _this.onPlay()
+                    delete _this.onPlay;
+                }
+                // if (msg.compositionTime) {
+                //     console.log(msg.compositionTime)
+                //     setTimeout(draw, msg.compositionTime, msg.output)
+                // } else {
+                //     draw(msg.output)
+                // }
+                draw(msg.output)
+                break
+            case "initAudio":
+                _this.initAudioPlay(msg.frameCount, msg.samplerate, msg.channels)
+                break
+            case "playAudio":
+                _this.playAudio(msg.buffer)
+                break
+            case "print":
+                console.log(msg.text);
+                break
+            case "printErr":
+                console.error(msg.text);
+                break
+        }
+    }
+};
+window.AudioContext = window.AudioContext || window.webkitAudioContext;
+function _unlock() {
+    var context = Jessibuca.prototype.audioContext = Jessibuca.prototype.audioContext || new window.AudioContext();
+    context.resume();
+    var source = context.createBufferSource();
+    source.buffer = context.createBuffer(1, 1, 22050);
+    source.connect(context.destination);
+    if (source.noteOn)
+        source.noteOn(0);
+    else
+        source.start(0);
+}
+// document.addEventListener("mousedown", _unlock, true);
+// document.addEventListener("touchend", _unlock, true);
+Jessibuca.prototype.audioEnabled = function (flag) {
+    if (flag) {
+        _unlock()
+        this.audioEnabled = function (flag) {
+            if (flag) {
+                this.audioContext.resume();
+            } else {
+                this.audioContext.suspend();
+            }
+        }
+    }
+}
+Jessibuca.prototype.playAudio = function (data) {
+    var context = this.audioContext;
+    var isPlaying = false;
+    var isDecoding = false;
+    if (!context) return false;
+    var audioBuffers = [];
+    var decodeQueue = []
+    var _this = this
+    var playNextBuffer = function (e) {
+        // isPlaying = false;
+        if (audioBuffers.length) {
+            playBuffer(audioBuffers.shift())
+        }
+        //if (audioBuffers.length > 1) audioBuffers.shift();
+    };
+    var playBuffer = function (buffer) {
+        isPlaying = true;
+        var audioBufferSouceNode = context.createBufferSource();
+        audioBufferSouceNode.buffer = buffer;
+        audioBufferSouceNode.connect(context.destination);
+        // audioBufferSouceNode.onended = playNextBuffer;
+        audioBufferSouceNode.start();
+        if (!_this.audioInterval) {
+            _this.audioInterval = setInterval(playNextBuffer, buffer.duration * 1000 - 1);
+        }
+        // setTimeout(playNextBuffer, buffer.duration * 1000)
+    }
+    var tryPlay = function (buffer) {
+        if (decodeQueue.length) {
+            context.decodeAudioData(decodeQueue.shift(), tryPlay, console.error);
+        } else {
+            isDecoding = false
+        }
+        if (isPlaying) {
+            audioBuffers.push(buffer);
+        } else {
+            playBuffer(buffer)
+        }
+    }
+    var playAudio = function (data) {
+        decodeQueue.push(...data)
+        if (!isDecoding) {
+            isDecoding = true
+            context.decodeAudioData(decodeQueue.shift(), tryPlay, console.error);
+        }
+    }
+    this.playAudio = playAudio
+    playAudio(data)
+}
+Jessibuca.prototype.initAudioPlay = function (frameCount, samplerate, channels) {
+    var context = this.audioContext;
+    var isPlaying = false;
+    var audioBuffers = [];
+    if (!context) return false;
+    var resampled = samplerate < 22050;
+    var audioBuffer = resampled ? context.createBuffer(channels, frameCount << 1, samplerate << 1) : context.createBuffer(channels, frameCount, samplerate);
+    var playNextBuffer = function () {
+        isPlaying = false;
+        console.log("~", audioBuffers.length)
+        if (audioBuffers.length) {
+            playAudio(audioBuffers.shift());
+        }
+        //if (audioBuffers.length > 1) audioBuffers.shift();
+    };
+
+    var copyToCtxBuffer = channels > 1 ? function (fromBuffer) {
+        for (var channel = 0; channel < channels; channel++) {
+            var nowBuffering = audioBuffer.getChannelData(channel);
+            if (resampled) {
+                for (var i = 0; i < frameCount; i++) {
+                    nowBuffering[i * 2] = nowBuffering[i * 2 + 1] = fromBuffer[i * (channel + 1)] / 32768;
+                }
+            } else
+                for (var i = 0; i < frameCount; i++) {
+                    nowBuffering[i] = fromBuffer[i * (channel + 1)] / 32768;
+                }
+        }
+    } : function (fromBuffer) {
+        var nowBuffering = audioBuffer.getChannelData(0);
+        for (var i = 0; i < nowBuffering.length; i++) {
+            nowBuffering[i] = fromBuffer[i] / 32768;
+        }
+        // nowBuffering.set(fromBuffer);
+    };
+    var playAudio = function (fromBuffer) {
+        if (isPlaying) {
+            audioBuffers.push(fromBuffer);
+            console.log(audioBuffers.length)
+            return;
+        }
+        isPlaying = true;
+        copyToCtxBuffer(fromBuffer);
+        var source = context.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(context.destination);
+        source.onended = playNextBuffer;
+        //setTimeout(playNextBuffer, audioBufferTime-audioBuffers.length*200);
+        source.start();
+    };
+    this.playAudio = playAudio;
+}
+/**
+ * Returns true if the canvas supports WebGL
+ */
+Jessibuca.prototype.isWebGL = function () {
+    return !!this.contextGL;
+};
+
+/**
+ * Create the GL context from the canvas element
+ */
+Jessibuca.prototype.initContextGL = function () {
+    var canvas = this.canvasElement;
+    var gl = null;
+
+    var validContextNames = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"];
+    var nameIndex = 0;
+
+    while (!gl && nameIndex < validContextNames.length) {
+        var contextName = validContextNames[nameIndex];
+
+        try {
+            if (this.contextOptions) {
+                gl = canvas.getContext(contextName, this.contextOptions);
+            } else {
+                gl = canvas.getContext(contextName);
+            };
+        } catch (e) {
+            gl = null;
+        }
+
+        if (!gl || typeof gl.getParameter !== "function") {
+            gl = null;
+        }
+
+        ++nameIndex;
+    };
+
+    this.contextGL = gl;
+};
+
+/**
+ * Initialize GL shader program
+ */
+Jessibuca.prototype.initProgram = function () {
+    var gl = this.contextGL;
+
+    var vertexShaderScript = [
+        'attribute vec4 vertexPos;',
+        'attribute vec4 texturePos;',
+        'varying vec2 textureCoord;',
+
+        'void main()',
+        '{',
+        'gl_Position = vertexPos;',
+        'textureCoord = texturePos.xy;',
+        '}'
+    ].join('\n');
+
+    var fragmentShaderScript = [
+        'precision highp float;',
+        'varying highp vec2 textureCoord;',
+        'uniform sampler2D ySampler;',
+        'uniform sampler2D uSampler;',
+        'uniform sampler2D vSampler;',
+        'const mat4 YUV2RGB = mat4',
+        '(',
+        '1.1643828125, 0, 1.59602734375, -.87078515625,',
+        '1.1643828125, -.39176171875, -.81296875, .52959375,',
+        '1.1643828125, 2.017234375, 0, -1.081390625,',
+        '0, 0, 0, 1',
+        ');',
+
+        'void main(void) {',
+        'highp float y = texture2D(ySampler,  textureCoord).r;',
+        'highp float u = texture2D(uSampler,  textureCoord).r;',
+        'highp float v = texture2D(vSampler,  textureCoord).r;',
+        'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
+        '}'
+    ].join('\n');
+
+    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, vertexShaderScript);
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+        console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
+    }
+
+    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragmentShaderScript);
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+        console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
+    }
+
+    var program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
+    }
+
+    gl.useProgram(program);
+
+    this.shaderProgram = program;
+};
+
+/**
+ * Initialize vertex buffers and attach to shader program
+ */
+Jessibuca.prototype.initBuffers = function () {
+    var gl = this.contextGL;
+    var program = this.shaderProgram;
+
+    var vertexPosBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
+
+    var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
+    gl.enableVertexAttribArray(vertexPosRef);
+    gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
+
+    var texturePosBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.STATIC_DRAW);
+
+    var texturePosRef = gl.getAttribLocation(program, 'texturePos');
+    gl.enableVertexAttribArray(texturePosRef);
+    gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
+
+    this.texturePosBuffer = texturePosBuffer;
+};
+
+/**
+ * Initialize GL textures and attach to shader program
+ */
+Jessibuca.prototype.initTextures = function () {
+    var gl = this.contextGL;
+    var program = this.shaderProgram;
+
+    var yTextureRef = this.initTexture();
+    var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
+    gl.uniform1i(ySamplerRef, 0);
+    this.yTextureRef = yTextureRef;
+
+    var uTextureRef = this.initTexture();
+    var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
+    gl.uniform1i(uSamplerRef, 1);
+    this.uTextureRef = uTextureRef;
+
+    var vTextureRef = this.initTexture();
+    var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
+    gl.uniform1i(vSamplerRef, 2);
+    this.vTextureRef = vTextureRef;
+};
+
+/**
+ * Create and configure a single texture
+ */
+Jessibuca.prototype.initTexture = function () {
+    var gl = this.contextGL;
+
+    var textureRef = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, textureRef);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    return textureRef;
+};
+
+/**
+ * Draw picture data to the canvas.
+ * If this object is using WebGL, the data must be an I420 formatted ArrayBuffer,
+ * Otherwise, data must be an RGBA formatted ArrayBuffer.
+ */
+Jessibuca.prototype.drawNextOutputPicture = function (width, height, croppingParams, data) {
+    var gl = this.contextGL;
+    if (gl) {
+        this.drawNextOuptutPictureGL(width, height, croppingParams, data);
+    } else {
+        this.drawNextOuptutPictureRGBA(width, height, croppingParams, data);
+    }
+};
+
+/**
+ * Draw the next output picture using WebGL
+ */
+Jessibuca.prototype.drawNextOuptutPictureGL = function (width, height, croppingParams, data) {
+    var gl = this.contextGL;
+    var texturePosBuffer = this.texturePosBuffer;
+    var yTextureRef = this.yTextureRef;
+    var uTextureRef = this.uTextureRef;
+    var vTextureRef = this.vTextureRef;
+    this.contextGL.viewport(0, 0, this.canvasElement.width, this.canvasElement.height);
+    // if (!croppingParams) {
+    //     gl.viewport(0, 0, width, height);
+    // } else {
+    //     gl.viewport(0, 0, croppingParams.width, croppingParams.height);
+
+    //     var tTop = croppingParams.top / height;
+    //     var tLeft = croppingParams.left / width;
+    //     var tBottom = croppingParams.height / height;
+    //     var tRight = croppingParams.width / width;
+    //     var texturePosValues = new Float32Array([tRight, tTop, tLeft, tTop, tRight, tBottom, tLeft, tBottom]);
+
+    //     gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+    //     gl.bufferData(gl.ARRAY_BUFFER, texturePosValues, gl.DYNAMIC_DRAW);
+    // }
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[0]);
+
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width / 2, height / 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[1]);
+
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width / 2, height / 2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data[2]);
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+};
+
+/**
+ * Draw next output picture using ARGB data on a 2d canvas.
+ */
+Jessibuca.prototype.drawNextOuptutPictureRGBA = function (width, height, croppingParams, data) {
+    // var canvas = this.canvasElement;
+    //var argbData = data;
+    //var ctx = canvas.getContext('2d');
+    // var imageData = ctx.getImageData(0, 0, width, height);
+    //this.imageData = this.ctx2d.getImageData(0, 0, width, height);
+    this.imageData.data.set(data);
+    //Module.print(typeof this.imageData.data);
+    if (!croppingParams) {
+        this.ctx2d.putImageData(this.imageData, 0, 0);
+    } else {
+        this.ctx2d.putImageData(this.imageData, -croppingParams.left, -croppingParams.top, 0, 0, croppingParams.width, croppingParams.height);
+    }
+};
+Jessibuca.prototype.ctx2d = null;
+Jessibuca.prototype.imageData = null;
+Jessibuca.prototype.initRGB = function (width, height) {
+    this.ctx2d = this.canvasElement.getContext('2d');
+    this.imageData = this.ctx2d.getImageData(0, 0, width, height);
+    this.clear = function () {
+        this.ctx2d.clearRect(0, 0, width, height)
+    };
+    //Module.print(this.imageData);
+};
+Jessibuca.prototype.close = function () {
+    if (this.audioInterval) {
+        clearInterval(this.audioInterval)
+    }
+    this.decoderWorker.postMessage({ cmd: "close" })
+    this.contextGL.clear(this.contextGL.COLOR_BUFFER_BIT);
+}
+Jessibuca.prototype.destroy = function(){
+    this.decoderWorker.terminate()
+}
+Jessibuca.prototype.play = function (url) {
+    this.decoderWorker.postMessage({ cmd: "play", url: url, isWebGL: this.isWebGL() })
+}
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@@ -0,0 +1,80 @@
+<template>
+    <div id="app">
+        <div>Monibuca</div>
+        <Menu mode="horizontal" :active-name="selectedMenu" style="position: absolute;top: 0;right: 0;">
+            <MenuItem name="home" to="/">首页</MenuItem>
+            <MenuItem name="docs" to="/docs" target="_blank">
+                文档
+            </MenuItem>
+            <MenuItem name="console" to="console">
+                控制台
+            </MenuItem>
+            <Submenu name="plugins">
+                <template slot="title">
+                    内置插件
+                </template>
+                <MenuGroup title="发布者/订阅者">
+                    <MenuItem name="cluster">集群</MenuItem>
+                    <MenuItem name="rtmp">RTMP</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="订阅者">
+                    <MenuItem name="jessica">Jessica</MenuItem>
+                    <MenuItem name="HDL">Http-Flv</MenuItem>
+                    <MenuItem name="record">录制Flv</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="发布者">
+                    <MenuItem name="HLS">HLS</MenuItem>
+                    <MenuItem name="TS">TS</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="钩子">
+                    <MenuItem name="Auth">验证</MenuItem>
+                    <MenuItem name="QoS">QoS</MenuItem>
+                    <MenuItem name="gateway">网关</MenuItem>
+                </MenuGroup>
+            </Submenu>
+            <MenuItem name="4" to="about">
+                支持
+            </MenuItem>
+        </Menu>
+        <router-view class="content"></router-view>
+        <div>Copyright © 2019-2020 dexter 苏ICP备20001212号</div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: 'app',
+        data(){
+            return {
+                selectedMenu:"home"
+            }
+        }
+    }
+</script>
+
+<style>
+    body,html{
+        height: 100%;
+    }
+    #app {
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #184c18;
+        position: relative;
+        height: 100%;
+    }
+
+
+    #app > div:first-child {
+        position: absolute;
+        top: 10px;
+        left: 30px;
+        font-size: x-large;
+    }
+    .content{
+        padding-top: 60px;
+    }
+</style>
--- a/dashboard/src/assets/alipay.png
+++ b/dashboard/src/assets/alipay.png
--- a/dashboard/src/assets/logo.png
+++ b/dashboard/src/assets/logo.png
--- a/dashboard/src/assets/wechat.jpg
+++ b/dashboard/src/assets/wechat.jpg
--- a/dashboard/src/components/Jessibuca.vue
+++ b/dashboard/src/components/Jessibuca.vue
@@ -0,0 +1,50 @@
+<template>
+    <Modal
+            v-bind="$attrs" draggable
+            v-on="$listeners"
+            :title="url"
+            @on-ok="onClosePreview"
+            @on-cancel="onClosePreview">
+        <canvas id="canvas" width="488" height="275" style="background: black"/>
+    </Modal>
+</template>
+
+<script>
+    let h5lc = null;
+    export default {
+        name: 'Jessibuca',
+        props: {
+            audioEnabled: Boolean,
+        },
+        data(){
+            return {
+                url:""
+            }
+        },
+        watch: {
+            audioEnabled(value){
+              h5lc.audioEnabled(value)
+            }
+        },
+        mounted() {
+            h5lc = new window.Jessibuca({
+                canvas: document.getElementById("canvas"),
+                decoder: "jessibuca/ff.js"
+            });
+        },
+        destroyed() {
+            this.onClosePreview()
+            h5lc.destroy()
+        },
+        methods: {
+            play(url){
+                this.url = url
+                h5lc.play(url)
+            },
+            onClosePreview() {
+                h5lc.close();
+            },
+        }
+    }
+</script>
+
--- a/dashboard/src/components/StartTime.vue
+++ b/dashboard/src/components/StartTime.vue
@@ -0,0 +1,18 @@
+<template>
+    <Poptip trigger="hover" :content="'⌚️'+ new Date(value).toLocaleString()">
+        <Time :time="new Date(value)"></Time>
+    </Poptip>
+</template>
+
+<script>
+    export default {
+        name: "StartTime",
+        props:{
+            value:String
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
--- a/dashboard/src/main.js
+++ b/dashboard/src/main.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import './plugins/iview.js'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/dashboard/src/plugins/iview.js
+++ b/dashboard/src/plugins/iview.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import ViewUI from 'view-design'
+
+Vue.use(ViewUI)
+
+import 'view-design/dist/styles/iview.css'
--- a/dashboard/src/router/index.js
+++ b/dashboard/src/router/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import About from '../views/About'
+import Console from '../views/Console'
+
+Vue.use(VueRouter)
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: About
+    }, {
+        path: '/console',
+        name: 'console',
+        component: Console
+    }
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+export default router
--- a/dashboard/src/store/index.js
+++ b/dashboard/src/store/index.js
@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+let summaryES = null
+
+export default new Vuex.Store({
+  state: {
+    summary:{
+      NetWork:[],
+      Rooms:[],
+      Memory:{
+        Used: 0,
+        Usage: 0
+      },
+      CPUUsage:0,
+      HardDisk:{
+        Used: 0,
+        Usage: 0
+      }
+    }
+  },
+  mutations: {
+    update(state,payload){
+      Object.assign(state,payload)
+    }
+  },
+  actions: {
+    fetchSummary({commit}){
+      summaryES = new EventSource(
+          "//" + location.host + "/api/summary"
+      );
+      summaryES.onmessage = evt=>{
+        if (!evt.data) return
+        let summary = JSON.parse(evt.data)
+        commit("update",{summary})
+      }
+    },
+    stopFetchSummary(){
+      summaryES.close()
+    }
+  },
+  modules: {
+  }
+})
--- a/dashboard/src/views/About.vue
+++ b/dashboard/src/views/About.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="root">
+    <h1>
+      赞助 Monibuca 的研发
+    </h1>
+    <p>
+      Monibuca 是采用 MIT 许可的开源项目，使用完全免费。 但是随着项目规模的增长，也需要有相应的资金支持才能持续项目的维护的开发。你可以通过下列的方法来赞助 Monibuca 的开发。
+    </p>
+    <img src="../assets/alipay.png">
+    <img src="../assets/wechat.jpg">
+  </div>
+</template>
+<style scoped>
+  .root{
+    background: lightgray;
+  }
+  .root>img{
+    width: 300px;
+    margin: 30px;
+  }
+</style>
--- a/dashboard/src/views/Console.vue
+++ b/dashboard/src/views/Console.vue
@@ -0,0 +1,186 @@
+<template>
+    <div class="layout">
+        <Card v-for="item in Rooms" :key="item.StreamName" class="room">
+            <p slot="title">
+                {{typeMap[item.Type]||item.Type}}{{item.StreamName}}
+            </p>
+            <StartTime slot="extra" :value="item.StartTime"></StartTime>
+            <p>
+                {{SoundFormat(item.AudioInfo.SoundFormat)}} {{item.AudioInfo.PacketCount}} {{SoundRate(item.AudioInfo.SoundRate)}} 声道:{{item.AudioInfo.SoundType}}
+            </p>
+            <p>
+                {{CodecID(item.VideoInfo.CodecID)}} {{item.VideoInfo.PacketCount}} {{item.VideoInfo.SPSInfo.Width}}x{{item.VideoInfo.SPSInfo.Height}}
+            </p>
+            <Button @click="onShowDetail(item)">
+                👨‍👩‍👦‍👦 {{item.SubscriberInfo?item.SubscriberInfo.length:0}}
+            </Button>
+            <Button v-if="item.Type" @click="preview(item)">
+                👁Preview
+            </Button>
+        </Card>
+        <div v-if="Rooms.length==0" class="empty">
+            <Icon type="md-wine" size="50"/>
+            没有任何房间
+        </div>
+        <div class="status">
+            <Alert>
+                带宽消耗 📥：{{totalInNetSpeed}} 📤：{{totalOutNetSpeed}}
+            </Alert>
+            <Alert :type="memoryStatus">
+                内存使用：{{networkFormat(Memory.Used,"M")}} 占比：{{Memory.Usage.toFixed(2)}}%
+            </Alert>
+            <Alert :type="cpuStatus">
+                CPU使用：{{CPUUsage.toFixed(2)}}%
+            </Alert>
+            <Alert :type="hardDiskStatus">
+                磁盘使用：{{networkFormat(HardDisk.Used,"M")}} 占比：{{HardDisk.Usage.toFixed(2)}}%
+            </Alert>
+        </div>
+        <Jessibuca ref="jessibuca" v-model="showPreview"></Jessibuca>
+    </div>
+</template>
+
+<script>
+    import {mapActions, mapState} from 'vuex'
+    import Jessibuca from "../components/Jessibuca";
+    import StartTime from "../components/StartTime";
+
+    const uintInc = {
+        "": "K",
+        K: "M",
+        M: "G",
+        G: null
+    }
+    const SoundFormat = {
+        0:  "Linear PCM, platform endian",
+            1:  "ADPCM",
+            2:  "MP3",
+            3:  "Linear PCM, little endian",
+            4:  "Nellymoser 16kHz mono",
+            5:  "Nellymoser 8kHz mono",
+            6:  "Nellymoser",
+            7:  "G.711 A-law logarithmic PCM",
+            8:  "G.711 mu-law logarithmic PCM",
+            9:  "reserved",
+            10: "AAC",
+            11: "Speex",
+            14: "MP3 8Khz",
+            15: "Device-specific sound"}
+    const CodecID = {
+        1:  "JPEG (currently unused)",
+            2:  "Sorenson H.263",
+            3:  "Screen video",
+            4:  "On2 VP6",
+            5:  "On2 VP6 with alpha channel",
+            6:  "Screen video version 2",
+            7:  "AVC",
+            12: "H265"}
+    export default {
+        name: "Console",
+        components: {
+            Jessibuca, StartTime
+        },
+        data() {
+            return {
+                showPreview: false,
+                typeMap: {
+                    TS: "🎬", HLS: "🍎", "": "⏳", Match365: "🏆", RTMP: "📸"
+                }
+            }
+        },
+        computed: {
+            ...mapState({
+                Rooms: state => state.summary.Rooms || [],
+                Memory: state => state.summary.Memory,
+                CPUUsage: state => state.summary.CPUUsage,
+                HardDisk: state => state.summary.HardDisk,
+                cpuStatus: state => {
+                    if (state.summary.CPUUsage > 99)
+                        return "error"
+                    return state.summary.CPUUsage > 50 ? "warning" : "success"
+                },
+                memoryStatus(state) {
+                    if (state.summary.CPUUsage > 99)
+                        return "error"
+                    return state.summary.CPUUsage > 50 ? "warning" : "success"
+                },
+                hardDiskStatus(state) {
+                    if (state.summary.CPUUsage > 99)
+                        return "error"
+                    return state.summary.CPUUsage > 50 ? "warning" : "success"
+                },
+                totalInNetSpeed(state) {
+                    return this.networkFormat(state.summary.NetWork.reduce((aac, c) => aac + c.ReceiveSpeed, 0)) + "/S"
+                },
+                totalOutNetSpeed(state) {
+                    return this.networkFormat(state.summary.NetWork.reduce((aac, c) => aac + c.SentSpeed, 0)) + "/S"
+                }
+            }),
+        },
+        methods: {
+            ...mapActions([
+                'fetchSummary',
+                'stopFetchSummary'
+            ]),
+            preview(item) {
+                this.$refs.jessibuca.play("ws://" + location.hostname + ":8080/" + item.StreamName)
+                this.showPreview = true
+            }, onShowDetail() {
+                // this.showDetail = true
+                // this.currentSub = item
+            },
+            networkFormat(value, unit = "") {
+                if (value > 1024 && uintInc[unit]) {
+                    return this.networkFormat(value / 1024, uintInc[unit])
+                }
+                return value.toFixed(2).replace(".00", "") + unit + "B"
+            },
+            SoundFormat(soundFormat){
+                return SoundFormat[soundFormat]
+            },
+            CodecID(codec){
+                return CodecID[codec]
+            },
+            SoundRate(rate){
+                return rate>1000?(rate/1000)+"kHz":rate+"Hz"
+            }
+        },
+        mounted() {
+            this.fetchSummary()
+        },
+        destroyed() {
+            this.stopFetchSummary()
+        }
+    }
+</script>
+
+<style scoped>
+    .layout {
+        padding-bottom: 30px;
+        position: relative;
+    }
+    .room{
+        width: 250px;
+        margin: 10px;
+        text-align: left;
+    }
+    .empty {
+        color: #eb5e46;
+        width: 100%;
+        min-height: 500px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .status {
+        position: fixed;
+        display: flex;
+        left: 5px;
+        bottom: 10px;
+    }
+
+    .status > div {
+        margin: 0 5px;
+    }
+</style>
--- a/dashboard/src/views/Home.vue
+++ b/dashboard/src/views/Home.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <img src="../assets/logo.png">
+    <div>
+      <p>
+        Monibuca 是一个开源的Go语言实现的流媒体服务器开发框架
+      </p>
+      <Button type="success" to="/docs" target="_blank">🚀START</Button>
+      <span style="margin: 0 10px"></span>
+      <Button type="default" target="_blank" to="https://github.com/langhuihui/monibuca">
+        <svg style="vertical-align: text-top" width="16" height="16" aria-labelledby="simpleicons-github-dark-icon" lang="" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-dark-icon" lang="en">GitHub Dark icon</title><path fill="#7F8C8D" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
+        GITHUB</Button>
+    </div>
+    <Row style="margin: 30px;">
+      <Col span="8">
+        <Card :bordered="false" style="margin: 30px">
+          <div slot="title" class="feature-title">⚡高性能</div>
+          <div>针对流媒体服务器独特的性质进行的优化，充分利用Golang的goroutine的性质对大量的连接的读写进行合理的分配计算资源，以及尽可能的减少内存Copy操作。使用对象池减少Golang的GC时间。</div>
+        </Card>
+      </Col>
+      <Col span="8">
+        <Card :bordered="false" style="margin: 30px">
+          <div slot="title" class="feature-title">🔧可扩展</div>
+          <div>流媒体服务器的个性化定制变的更简单，基于Golang语言，开发效率更高，独创的插件机制，可以方便用户定制个性化的功能组合，更高效率的利用服务器资源。</div>
+        </Card>
+      </Col>
+      <Col span="8">
+        <Card :bordered="false" style="margin: 30px">
+          <div slot="title" class="feature-title">📈可视化</div>
+          <div>功能强大的仪表盘可以直观的看到服务器运行的状态、消耗的资源、以及其他统计信息。用户可以利用控制台对服务器进行配置和控制。点击右上角菜单栏里面的控制台，可以看到演示。</div>
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+
+</script>
+<style scoped>
+  .feature-title{
+    color: #eb5e46;
+    font-weight: bold;
+    font-size: larger;
+  }
+  p {
+    margin: 30px;
+    font-size: 20px;
+  }
+  img{
+    margin: 20px;
+  }
+</style>
--- a/dashboard/vue.config.js
+++ b/dashboard/vue.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  chainWebpack: config => {
+    config.module
+        .rule('vue')
+        .use('iview-loader')
+        .loader('iview-loader')
+        .tap(()=> ({prefix: false}))
+        .end()
+  }
+}
--- a/monica/room.go
+++ b/monica/room.go
@@ -57,7 +57,7 @@ type RoomInfo struct {
 	VideoInfo      struct {
 		PacketCount int
 		CodecID     byte
-		avformat.SPSInfo
+		SPSInfo     avformat.SPSInfo
 	}
 	AudioInfo struct {
 		PacketCount int
--- a/plugins/auth/index.go
+++ b/plugins/auth/index.go
@@ -26,8 +26,6 @@ func init() {
 		Config: &config,
 		Run:    ClearSignCache,
 	})
-	AuthHooks.AddHook(CheckSign)
-	OnPublishHooks.AddHook(onPublish)
 }

 func onPublish(r *Room) {
@@ -61,6 +59,8 @@ func CheckSign(sign string) error {

 // ClearSignCache 删除过期数据
 func ClearSignCache() {
+	AuthHooks.AddHook(CheckSign)
+	OnPublishHooks.AddHook(onPublish)
 	for {
 		select {
 		case now := <-time.After(time.Minute):
--- a/plugins/gateway/index.go
+++ b/plugins/gateway/index.go
@@ -8,9 +8,13 @@ import (
 	"github.com/shirou/gopsutil/disk"
 	"github.com/shirou/gopsutil/mem"
 	"github.com/shirou/gopsutil/net"
+	"io/ioutil"
 	"log"
+	"mime"
 	"net/http"
 	"os/exec"
+	"path"
+	"runtime"
 	"time"
 )

@@ -18,6 +22,7 @@ var (
 	config        = new(ListenerConfig)
 	sseBegin      = []byte("data: ")
 	sseEnd        = []byte("\n\n")
+	dashboardPath string
 )

 type SSE struct {
@@ -68,6 +73,8 @@ func (sse *SSE) WriteExec(cmd *exec.Cmd) error {
 }

 func init() {
+	_, currentFilePath, _, _ := runtime.Caller(0)
+	dashboardPath = path.Join(path.Dir(currentFilePath), "../../dashboard/dist")
 	InstallPlugin(&PluginConfig{
 		Name:   "GateWay",
 		Type:   PLUGIN_HOOK,
@@ -77,11 +84,48 @@ func init() {
 }
 func run() {
 	http.HandleFunc("/api/summary", summary)
-	log.Printf("server api start at %s", config.ListenAddr)
+	http.HandleFunc("/", website)
+	log.Printf("server gateway start at %s", config.ListenAddr)
 	log.Fatal(http.ListenAndServe(config.ListenAddr, nil))
 }
+func website(w http.ResponseWriter, r *http.Request) {
+	filePath := r.URL.Path
+	if filePath == "/" {
+		filePath = "/index.html"
+	} else if filePath == "/docs" {
+		filePath = "/docs/index.html"
+	}
+	if mime := mime.TypeByExtension(path.Ext(filePath)); mime != "" {
+		w.Header().Set("Content-Type", mime)
+	}
+	if f, err := ioutil.ReadFile(dashboardPath + filePath); err == nil {
+		if _, err = w.Write(f); err != nil {
+			w.WriteHeader(505)
+		}
+	} else {
+		w.Header().Set("Location", "/")
+		w.WriteHeader(302)
+	}
+}
 func summary(w http.ResponseWriter, r *http.Request) {
-
+	sse := NewSSE(w, r.Context())
+	s := collect()
+	sse.WriteJSON(&s)
+	for range time.NewTicker(time.Second).C {
+		old := s
+		s = collect()
+		for i, v := range s.NetWork {
+			s.NetWork[i].ReceiveSpeed = v.Receive - old.NetWork[i].Receive
+			s.NetWork[i].SentSpeed = v.Sent - old.NetWork[i].Sent
+		}
+		AllRoom.Range(func(key interface{}, v interface{}) bool {
+			s.Rooms = append(s.Rooms, &v.(*Room).RoomInfo)
+			return true
+		})
+		if sse.WriteJSON(&s) != nil {
+			break
+		}
+	}
 }

 type Summary struct {
@@ -99,6 +143,7 @@ type Summary struct {
 		Usage float64
 	}
 	NetWork []NetWorkInfo
+	Rooms   []*RoomInfo
 }
 type NetWorkInfo struct {
 	Name         string
--- a/plugins/record/flv.go
+++ b/plugins/record/flv.go
@@ -5,8 +5,8 @@ import (
 	"github.com/langhuihui/monibuca/monica/avformat"
 	"github.com/langhuihui/monibuca/monica/pool"
 	"github.com/langhuihui/monibuca/monica/util"
+	"io"
 	"os"
-	"syscall"
 )

 func SaveFlv(streamPath string, append bool) error {
@@ -28,11 +28,11 @@ func SaveFlv(streamPath string, append bool) error {
 	p.ID = filePath
 	p.Type = "FlvRecord"
 	if append {
-		_, err = file.Seek(4, syscall.FILE_END)
+		_, err = file.Seek(4, io.SeekEnd)
 		if err == nil {
 			var tagSize uint32
 			if tagSize, err = util.ReadByteToUint32(file, true); err == nil {
-				_, err = file.Seek(int64(tagSize+4), syscall.FILE_END)
+				_, err = file.Seek(int64(tagSize+4), io.SeekEnd)
 				if err == nil {
 					var tag *pool.AVPacket
 					tag, err = avformat.ReadFLVTag(file)
--- a/plugins/record/publisher.go
+++ b/plugins/record/publisher.go
@@ -4,8 +4,8 @@ import (
 	"errors"
 	. "github.com/langhuihui/monibuca/monica"
 	"github.com/langhuihui/monibuca/monica/avformat"
+	"io"
 	"os"
-	"syscall"
 )

 type FlvFile struct {
@@ -17,7 +17,7 @@ func PublishFlvFile(streamPath string) error {
 		stream := FlvFile{}
 		stream.UseTimestamp = true
 		if stream.Publish(streamPath, &stream) {
-			file.Seek(int64(len(avformat.FLVHeader)), syscall.FILE_BEGIN)
+			file.Seek(int64(len(avformat.FLVHeader)), io.SeekStart)
 			for {
 				if tag, err := avformat.ReadFLVTag(file); err == nil {
 					switch tag.Type {
--- a/plugins/rtmp/msg.go
+++ b/plugins/rtmp/msg.go
@@ -117,7 +117,7 @@ type HaveStreamID interface {
 func GetRtmpMessage(chunk *Chunk) {
 	switch chunk.MessageTypeID {
 	case RTMP_MSG_CHUNK_SIZE, RTMP_MSG_ABORT, RTMP_MSG_ACK, RTMP_MSG_ACK_SIZE:
-		chunk.MsgData = util.BigEndian.Uint32(chunk.Body)
+		chunk.MsgData = Uint32Message(util.BigEndian.Uint32(chunk.Body))
 	case RTMP_MSG_USER_CONTROL: // RTMP消息类型ID=4, 用户控制消息.客户端或服务端发送本消息通知对方用户的控制事件.
 		{
 			base := UserControlMessage{
				`@@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>`
				`@@ -0,0 +1 @@`
				(window.webpackJsonp=window.webpackJsonp\|\|[]).push([[1],{168:function(t,e,n){"use strict";n.r(e);var a=n(0),s=Object(a.a)({},(function(){var t=this.$createElement;this._self._c;return this._m(0)}),[function(){var t=this.$createElement,e=this._self._c\|\|t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"关于-monibuca"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#关于-monibuca","aria-hidden":"true"}},[this._v("#")]),this._v(" 关于 Monibuca")])])}],!1,null,null,null);e.default=s.exports}}]);
				`@@ -0,0 +1 @@`
				`(window.webpackJsonp=window.webpackJsonp\|\|[]).push([[3],{166:function(t,n,e){"use strict";e.r(n);var s=e(0),c=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c\|\|t)("div",{staticClass:"content"})}),[],!1,null,null,null);n.default=c.exports}}]);`