diff --git a/.gitignore b/.gitignore
index 338003d..833feee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -135,3 +135,6 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+*yarn.lock
+*package-lock.json
+*log/
diff --git a/code/VideoAccess-VCMP/api/.vscode/launch.json b/code/VideoAccess-VCMP/api/.vscode/launch.json
new file mode 100644
index 0000000..e8d5ae1
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/.vscode/launch.json
@@ -0,0 +1,41 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "启动API",
+            "program": "${workspaceRoot}/server.js",
+            "env": {
+                "NODE_ENV": "development"
+            },
+            "args": [
+                "-p 14000",
+                "-f http://localhost:14000",
+                // "-g postgres://postgres:123@10.8.30.32:5432/yinjiguanli",
+                // "-g postgres://postgres:123456@221.230.55.27:5432/yinjiguanli",
+                // "-g postgres://FashionAdmin:123456@10.8.30.156:5432/SmartEmergency",
+                "-g postgres://postgres:Mantis1921@116.63.50.139:54327/smartYingji"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "run mocha",
+            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
+            "stopOnEntry": false,
+            "args": [
+                "app/test/*.test.js",
+                "--no-timeouts"
+            ],
+            "cwd": "${workspaceRoot}",
+            "runtimeExecutable": null,
+            "env": {
+                "NODE_ENV": "development"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/Dockerfile b/code/VideoAccess-VCMP/api/Dockerfile
new file mode 100644
index 0000000..316b93f
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/Dockerfile
@@ -0,0 +1,14 @@
+
+FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2
+
+MAINTAINER liuxinyi "liu.xinyi@free-sun.com.cn"
+
+COPY . /var/app
+
+WORKDIR /var/app
+
+EXPOSE 8080
+
+CMD ["-g", "postgres://FashionAdmin:123456@iota-m1:5433/SmartRiver", "--qnak", "5XrM4wEB9YU6RQwT64sPzzE6cYFKZgssdP5Kj3uu", "--qnsk", "w6j2ixR_i-aelc6I7S3HotKIX-ukMzcKmDfH6-M5", "--qnbkt", "anxinyun-test", "--qndmn", "http://test.resources.anxinyun.cn"]
+
+ENTRYPOINT [ "node", "server.js" ]
diff --git a/code/VideoAccess-VCMP/api/app/index.js b/code/VideoAccess-VCMP/api/app/index.js
new file mode 100644
index 0000000..e1436de
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./lib');
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/app/lib/controllers/auth/index.js b/code/VideoAccess-VCMP/api/app/lib/controllers/auth/index.js
new file mode 100644
index 0000000..00040ce
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/controllers/auth/index.js
@@ -0,0 +1,189 @@
+'use strict';
+const Hex = require('crypto-js/enc-hex');
+const MD5 = require('crypto-js/md5');
+const moment = require('moment');
+const uuid = require('uuid');
+
+async function login(ctx, next) {
+    const transaction = await ctx.fs.dc.orm.transaction();
+    try {
+        const models = ctx.fs.dc.models;
+        const params = ctx.request.body;
+        let password = Hex.stringify(MD5(params.password));
+
+        const userRes = await models.User.findOne({
+            where: {
+                username: params.username,
+                password: password,
+                delete: false,
+            },
+            attributes: { exclude: ['password'] },
+            include: [{
+                attributes: ["resourceId"],
+                model: models.UserResource
+            }]
+        });
+
+        if (!userRes) {
+            ctx.status = 400;
+            ctx.body = {
+                "message": "账号或密码错误"
+            }
+        } else if (!userRes.enable) {
+            ctx.status = 400;
+            ctx.body = { message: "该用户已被禁用" }
+        } else {
+            const token = uuid.v4();
+
+            let userRslt = Object.assign(userRes.dataValues, {
+                authorized: true,
+                token: token,
+                userResources: userRes.userResources.map(r => r.resourceId),
+            });
+
+            await models.UserToken.create({
+                token: token,
+                userInfo: userRslt,
+                expired: moment().add(30, 'days').format()
+            });
+
+            ctx.status = 200;
+            ctx.body = userRslt;
+        }
+        await transaction.commit();
+    } catch (error) {
+        await transaction.rollback();
+        ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+        ctx.status = 400;
+        ctx.body = {
+            "message": "登录失败"
+        }
+    }
+}
+
+/**
+ * 微信小程序登录
+ * @@requires.body {phone-手机号, password-密码} ctx 
+ */
+async function wxLogin(ctx, next) {
+    const transaction = await ctx.fs.dc.orm.transaction();
+    try {
+        const models = ctx.fs.dc.models;
+        const params = ctx.request.body;
+        let password = Hex.stringify(MD5(params.password));
+        const userRes = await models.User.findOne({
+            where: {
+                phone: params.phone,
+                password: password,
+                delete: false,
+            },
+            attributes: { exclude: ['password'] }
+        });
+        if (!userRes) {
+            ctx.status = 400;
+            ctx.body = { message: "手机号或密码错误" }
+        } else if (!userRes.enable) {
+            ctx.status = 400;
+            ctx.body = { message: "该用户已被禁用" }
+        } else {
+            const token = uuid.v4();
+            //获取用户关注区域信息
+            const departmentRes = await models.Department.findOne({ where: { id: userRes.departmentId } });
+            let attentionRegion = departmentRes;
+            while (attentionRegion.dependence && attentionRegion.type != 1) {
+                const departmentParent = await models.Department.findOne({ where: { id: attentionRegion.dependence } });
+                attentionRegion = {
+                    ...departmentParent.dataValues,
+                    nextRegin: attentionRegion
+                }
+            }
+            //获取用户权限信息
+            const resourceRes = await models.UserResource.findAll({
+                where: {
+                    userId: userRes.id
+                },
+                include: [{
+                    model: models.Resource,
+                    attributes: ['code', 'name'],
+                }],
+                attributes: []
+            });
+            let userRslt = Object.assign({
+                authorized: true,
+                token: token,
+                ...userRes.dataValues
+            });
+            await models.UserToken.create({
+                token: token,
+                userInfo: userRslt,
+                expired: moment().add(30, 'day').format('YYYY-MM-DD HH:mm:ss')
+            }, { transaction: transaction });
+            ctx.status = 200;
+            ctx.body = Object.assign({
+                ...userRslt,
+                userRegionType: departmentRes.type,//1-市级，2-区县级，3-乡镇级，4-村级
+                attentionRegion: attentionRegion,
+                resources: resourceRes.map(r => r.resource)
+            });
+        }
+        await transaction.commit();
+    } catch (error) {
+        await transaction.rollback();
+        ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+        ctx.status = 400;
+        ctx.body = {
+            "message": "登录失败"
+        }
+    }
+}
+
+async function logout(ctx) {
+    try {
+        const { token, code } = ctx.request.body;
+        const models = ctx.fs.dc.models;
+
+        await models.UserToken.destroy({
+            where: {
+                token: token,
+            },
+        });
+
+        ctx.status = 204;
+    } catch (error) {
+        ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+        ctx.status = 400;
+        ctx.body = {
+            "message": "登出失败"
+        }
+    }
+}
+
+/**
+ * 微信小程序登出
+ * @request.body {token-用户登录Token} ctx 
+ */
+async function wxLogout(ctx) {
+    try {
+        const { token } = ctx.request.body;
+        const models = ctx.fs.dc.models;
+        await models.UserToken.destroy({
+            where: {
+                token: token,
+            },
+        });
+        ctx.status = 204;
+    } catch (error) {
+        ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
+        ctx.status = 400;
+        ctx.body = {
+            "message": "登出失败"
+        }
+    }
+}
+
+module.exports = {
+    login,
+    wxLogin,
+    logout,
+    wxLogout
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/app/lib/index.js b/code/VideoAccess-VCMP/api/app/lib/index.js
new file mode 100644
index 0000000..df16b42
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/index.js
@@ -0,0 +1,36 @@
+'use strict';
+
+const routes = require('./routes');
+const authenticator = require('./middlewares/authenticator');
+// const apiLog = require('./middlewares/api-log');
+const businessRest = require('./middlewares/business-rest');
+
+module.exports.entry = function (app, router, opts) {
+    app.fs.logger.log('info', '[FS-AUTH]', 'Inject auth and api mv into router.');
+
+    app.fs.api = app.fs.api || {};
+    app.fs.api.authAttr = app.fs.api.authAttr || {};
+    app.fs.api.logAttr = app.fs.api.logAttr || {};
+
+    router.use(authenticator(app, opts));
+    router.use(businessRest(app, router, opts));
+    // router.use(apiLog(app, opts));
+
+    router = routes(app, router, opts);
+};
+
+module.exports.models = function (dc) { // dc = { orm: Sequelize对象, ORM: Sequelize, models: {} }
+    require('./models/user')(dc);
+    require('./models/user_token')(dc);
+    require('./models/department')(dc);
+    require('./models/resource')(dc);
+    require('./models/user_resource')(dc);
+    require('./models/places')(dc);
+    require('./models/user_placeSecurityRecord')(dc);
+    require('./models/report_type')(dc);
+    require('./models/report_downManage')(dc);
+    require('./models/department')(dc);
+    require('./models/report_configition')(dc);
+    require('./models/report_collection')(dc);
+    require('./models/report_rectify')(dc);
+};
diff --git a/code/VideoAccess-VCMP/api/app/lib/middlewares/api-log.js b/code/VideoAccess-VCMP/api/app/lib/middlewares/api-log.js
new file mode 100644
index 0000000..12d256c
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/middlewares/api-log.js
@@ -0,0 +1,83 @@
+/**
+ * Created by PengPeng on 2017/4/26.
+ */
+'use strict';
+
+const moment = require('moment');
+const pathToRegexp = require('path-to-regexp');
+
+function factory(app, opts) {
+    async function sendToEsAsync(producer, payloads) {
+        return new Promise((resolve, reject) => {
+            producer.send(payloads, function (err) {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve();
+                }
+            });
+        })
+    }
+
+    async function logger(ctx, next) {
+        const { path, method } = ctx;
+        const start = Date.now();
+
+        // 等待路由处理
+        await next();
+
+        try {
+            let logAttr = null;
+            for (let prop in app.fs.api.logAttr) {
+                let keys = [];
+                let re = pathToRegexp(prop.replace(/\:[A-Za-z_\-]+\b/g, '(\\d+)'), keys);
+                if (re.test(`${method}${path}`)) {
+                    logAttr = app.fs.api.logAttr[prop];
+                    break;
+                }
+            }
+            let parameter = null, parameterShow = null, user_id, _token, app_key;
+            if (ctx.fs.api) {
+                const { actionParameter, actionParameterShow, userId, token, appKey } = ctx.fs.api;
+                parameter = actionParameter;
+                parameterShow = actionParameterShow;
+                user_id = userId;
+                _token = token;
+                app_key = appKey;
+            }
+            const producer = ctx.fs.kafka.producer;
+
+            const message = {
+                log_time: moment().toISOString(),
+                method: method,
+                content: logAttr ? logAttr.content : '',
+                parameter: JSON.stringify(parameter) || JSON.stringify(ctx.request.body),
+                parameter_show: parameterShow,
+                visible: logAttr ? logAttr.visible : true,
+                cost: Date.now() - start,
+                status_code: ctx.status,
+                url: ctx.request.url,
+                user_agent: ctx.request.headers["user-agent"],
+                user_id: user_id,
+                session: _token,
+                app_key: app_key,
+                header: JSON.stringify(ctx.request.headers),
+                ip: ctx.request.headers["x-real-ip"] || ctx.ip
+            };
+
+            const payloads = [{
+                topic: `${opts.kafka.topicPrefix}`,
+                messages: [JSON.stringify(message)],
+                partition: 0
+            }];
+
+            await sendToEsAsync(producer, payloads);
+
+        } catch (e) {
+            ctx.fs.logger.error(`日志记录失败: ${e}`);
+        }
+    }
+    return logger;
+}
+
+module.exports = factory;
diff --git a/code/VideoAccess-VCMP/api/app/lib/middlewares/authenticator.js b/code/VideoAccess-VCMP/api/app/lib/middlewares/authenticator.js
new file mode 100644
index 0000000..cdc5caf
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/middlewares/authenticator.js
@@ -0,0 +1,150 @@
+/**
+ * Created by PengLing on 2017/3/27.
+ */
+'use strict';
+
+const pathToRegexp = require('path-to-regexp');
+const util = require('util');
+const moment = require('moment');
+
+class ExcludesUrls {
+    constructor(opts) {
+        this.allUrls = undefined;
+        this.reload(opts);
+    }
+
+    sanitizePath(path) {
+        if (!path) return '/';
+        const p = '/' + path.replace(/^\/+/i, '').replace(/\/+$/, '').replace(/\/{2,}/, '/');
+        return p;
+    }
+
+    reload(opts) {
+        // load all url
+        if (!this.allUrls) {
+            this.allUrls = opts;
+            let that = this;
+            this.allUrls.forEach(function (url, i, arr) {
+                if (typeof url === "string") {
+                    url = { p: url, o: '*' };
+                    arr[i] = url;
+                }
+                const keys = [];
+                let eachPath = url.p;
+                url.p = (!eachPath || eachPath === '(.*)' || util.isRegExp(eachPath)) ? eachPath : that.sanitizePath(eachPath);
+                url.pregexp = pathToRegexp(eachPath, keys);
+            });
+        }
+    }
+
+    isExcluded(path, method) {
+        return this.allUrls.some(function (url) {
+            return !url.auth
+                && url.pregexp.test(path)
+                && (url.o === '*' || url.o.indexOf(method) !== -1);
+        });
+    }
+}
+
+/**
+ * 判断Url是否不鉴权
+ * @param {*} opts {exclude: [*] or []}，'*'或['*']:跳过所有路由; []:所有路由都要验证
+ * @param {*} path 当前request的path
+ * @param {*} method 当前request的method
+ */
+let isPathExcluded = function (opts, path, method) {
+    let excludeAll = Boolean(opts.exclude && opts.exclude.length && opts.exclude[0] == '*');
+    let excludes = null;
+    if (!excludeAll) {
+        let excludeOpts = opts.exclude || [];
+        excludeOpts.push({ p: '/login', o: 'POST' });
+        excludeOpts.push({ p: '/wxLogin', o: 'POST' });
+        excludeOpts.push({ p: '/logout', o: 'PUT' });
+        excludeOpts.push({ p: '/wxLogout', o: 'PUT' });
+        excludes = new ExcludesUrls(excludeOpts);
+    }
+    let excluded = excludeAll || excludes.isExcluded(path, method);
+    return excluded;
+};
+
+let authorizeToken = async function (ctx, token) {
+    let rslt = null;
+    const tokenFormatRegexp = /^(\{{0,1}([0-9a-fA-F]){8}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){4}-([0-9a-fA-F]){12}\}{0,1})$/g;
+    if (token && tokenFormatRegexp.test(token)) {
+        try {
+            const axyRes = await ctx.fs.dc.models.UserToken.findOne({
+                where: {
+                    token: token,
+                    expired: { $gte: moment().format('YYYY-MM-DD HH:mm:ss') }
+                }
+            });
+            const { userInfo, expired } = axyRes;
+            if (!expired || moment().valueOf() <= moment(expired).valueOf()) {
+                rslt = {
+                    'authorized': userInfo.authorized,
+                    'resources': (userInfo || {}).resources || [],
+                };
+                ctx.fs.api.userId = userInfo.id;
+                ctx.fs.api.userInfo = userInfo;
+                ctx.fs.api.token = token;
+            }
+        } catch (err) {
+            const { error } = err.response || {};
+            ctx.fs.logger.log('[anxinyun]', '[AUTH] failed', (error || {}).message || `cannot GET /users/${token}`);
+        }
+    }
+    return rslt;
+};
+
+let isResourceAvailable = function (resources, options) {
+    let authCode = null;
+    // authorize user by authorization attribute
+    const { authAttr, method, path } = options;
+    console.log(resources, options)
+    for (let prop in authAttr) {
+        let keys = [];
+        let re = pathToRegexp(prop.replace(/\:[A-Za-z_\-]+\b/g, '(\\d+)'), keys);
+        if (re.test(`${method}${path}`)) {
+            authCode = authAttr[prop];
+            break;
+        }
+    }
+    return !authCode || (resources || []).some(code => code === authCode);
+};
+
+function factory(app, opts) {
+    return async function auth(ctx, next) {
+        const { path, method, header, query } = ctx;
+        ctx.fs.logger.log('[AUTH] start', path, method);
+        ctx.fs.api = ctx.fs.api || {};
+        ctx.fs.port = opts.port;
+        ctx.redis = app.redis;
+        let error = null;
+        if (path) {
+            if (!isPathExcluded(opts, path, method)) {
+                const user = await authorizeToken(ctx, header.token || query.token);
+                if (user && user.authorized) {
+                    // if (!isResourceAvailable(user.resources, { authAttr: app.fs.auth.authAttr, path, method })) {
+                    //     error = { status: 403, name: 'Forbidden' }
+                    // } else {
+                    //     error = { status: 401, name: 'Unauthorized' }
+                    // }
+                } else {
+                    error = { status: 401, name: 'Unauthorized' }
+                }
+            }
+        } else {
+            error = { status: 401, name: 'Unauthorized' };
+        }
+        if (error) {
+            ctx.fs.logger.log('[AUTH] failed', path, method);
+            ctx.status = error.status;
+            ctx.body = error.name;
+        } else {
+            ctx.fs.logger.log('[AUTH] passed', path, method);
+            await next();
+        }
+    }
+}
+
+module.exports = factory;
diff --git a/code/VideoAccess-VCMP/api/app/lib/middlewares/business-rest.js b/code/VideoAccess-VCMP/api/app/lib/middlewares/business-rest.js
new file mode 100644
index 0000000..d9542aa
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/middlewares/business-rest.js
@@ -0,0 +1,50 @@
+'use strict';
+
+ const request = require('superagent');
+const buildUrl = (url,token) => {
+    let connector = url.indexOf('?') === -1 ? '?' : '&';
+    return `${url}${connector}token=${token}`;
+};
+ 
+ function factory(app, router, opts) {
+     return async function (ctx, next) {
+         
+         const token = ctx.fs.api.token;
+         
+         //console.log(username,password)
+         const req = {
+             get: (url, query) => {
+                 return request
+                     .get(buildUrl(url,token))
+                     .query(query)
+             },
+             post: (url, data, query) => {
+                 return request
+                     .post(buildUrl(url,token))
+                     .query(query)
+                     //.set('Content-Type', 'application/json')
+                     .send(data);
+             },
+ 
+             put: (url, data) => {
+                 return request
+                     .put(buildUrl(url,token))
+                     //.set('Content-Type', 'application/json')
+                     .send(data);
+             },
+ 
+             delete: (url) => {
+                 return request
+                     .del(buildUrl(url,token))
+             },
+         };
+ 
+         app.business = app.business || {};
+         app.business.request = req;
+ 
+         await next();
+     };
+ }
+ 
+ module.exports = factory;
+ 
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/app/lib/models/user.js b/code/VideoAccess-VCMP/api/app/lib/models/user.js
new file mode 100644
index 0000000..683ccaf
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/models/user.js
@@ -0,0 +1,108 @@
+/* eslint-disable*/
+'use strict';
+
+module.exports = dc => {
+  const DataTypes = dc.ORM;
+  const sequelize = dc.orm;
+  const User = sequelize.define("user", {
+    id: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+      defaultValue: null,
+      comment: null,
+      primaryKey: true,
+      field: "id",
+      autoIncrement: true,
+      unique: "user_id_uindex"
+    },
+    name: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "name",
+      autoIncrement: false
+    },
+    username: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: null,
+      comment: "用户名 账号",
+      primaryKey: false,
+      field: "username",
+      autoIncrement: false
+    },
+    password: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "password",
+      autoIncrement: false
+    },
+    departmentId: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+      defaultValue: null,
+      comment: "部门id",
+      primaryKey: false,
+      field: "department_id",
+      autoIncrement: false
+    },
+    email: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "email",
+      autoIncrement: false
+    },
+    enable: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+      defaultValue: null,
+      comment: "启用状态",
+      primaryKey: false,
+      field: "enable",
+      autoIncrement: false
+    },
+    delete: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+      defaultValue: null,
+      comment: null,
+      primaryKey: false,
+      field: "delete",
+      autoIncrement: false
+    },
+    phone: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: null,
+      comment: "手机号(小程序使用手机号登录)",
+      primaryKey: false,
+      field: "phone",
+      autoIncrement: false
+    },
+    post: {
+      type: DataTypes.STRING,
+      allowNull: true,
+      defaultValue: null,
+      comment: "职位",
+      primaryKey: false,
+      field: "post",
+      autoIncrement: false
+    }
+  }, {
+    tableName: "user",
+    comment: "",
+    indexes: []
+  });
+  dc.models.User = User;
+
+
+  return User;
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/app/lib/routes/auth/index.js b/code/VideoAccess-VCMP/api/app/lib/routes/auth/index.js
new file mode 100644
index 0000000..b0de650
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/routes/auth/index.js
@@ -0,0 +1,32 @@
+'use strict';
+
+const auth = require('../../controllers/auth');
+
+module.exports = function (app, router, opts) {
+    /**
+     * @api {Post} login 登录.
+     * @apiVersion 1.0.0
+     * @apiGroup Auth
+     */
+    app.fs.api.logAttr['POST/login'] = { content: '登录', visible: true };
+    router.post('/login', auth.login);
+
+    /**
+     * @api {POST} wxLogin 微信小程序登录.（使用手机号、密码登录）
+     * @apiVersion 1.0.0
+     * @apiGroup Auth
+     */
+    app.fs.api.logAttr['POST/wxLogin'] = { content: '微信小程序登录', visible: true };
+    router.post('/wxLogin', auth.wxLogin);
+
+    app.fs.api.logAttr['PUT/logout'] = { content: '登出', visible: false };
+    router.put('/logout', auth.logout);
+
+    /**
+     * @api {PUT} wxLogout 微信小程序登出
+     * @apiVersion 1.0.0
+     * @apiGroup Auth
+     */
+    app.fs.api.logAttr['PUT/wxLogout'] = { content: '登出', visible: false };
+    router.put('/wxLogout', auth.wxLogout);
+};
diff --git a/code/VideoAccess-VCMP/api/app/lib/routes/index.js b/code/VideoAccess-VCMP/api/app/lib/routes/index.js
new file mode 100644
index 0000000..2d6a9f8
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/app/lib/routes/index.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+module.exports = function (app, router, opts) {
+    fs.readdirSync(__dirname).forEach((filename) => {
+        if (filename.indexOf('.') !== 0 &&fs.lstatSync(path.join(__dirname, filename)).isDirectory()) { 
+            fs.readdirSync(path.join(__dirname, filename)).forEach((api) => {
+                if (api.indexOf('.') == 0 || api.indexOf('.js') == -1) return;
+                require(`./${filename}/${api}`)(app, router, opts);
+            });
+        }
+    });
+
+    return router;
+};
diff --git a/code/VideoAccess-VCMP/api/config.js b/code/VideoAccess-VCMP/api/config.js
new file mode 100644
index 0000000..5537608
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/config.js
@@ -0,0 +1,103 @@
+'use strict';
+/*jslint node:true*/
+const path = require('path');
+const os = require('os');
+const moment = require('moment');
+const args = require('args');
+
+const dev = process.env.NODE_ENV == 'development';
+
+// 启动参数
+args.option(['p', 'port'], '启动端口');
+args.option(['g', 'pg'], 'postgre服务URL');
+args.option(['f', 'fileHost'], '文件中心本地化存储: WebApi 服务器地址(必填), 该服务器提供文件上传Web服务');
+
+const flags = args.parse(process.argv);
+
+const IOT_VIDEO_ACCESS_DB = process.env.IOT_VIDEO_ACCESS_DB || flags.pg;
+const IOT_VIDEO_ACCESS_LOCAL_SVR_ORIGIN = process.env.IOT_VIDEO_ACCESS_LOCAL_SVR_ORIGIN || flags.fileHost;
+
+if (!IOT_VIDEO_ACCESS_DB) {
+    console.log('缺少启动参数，异常退出');
+    args.showHelp();
+    process.exit(-1);
+}
+
+const product = {
+    port: flags.port || 8080,
+    staticDirs: ['static'],
+    mws: [
+        {
+            entry: require('@fs/attachment').entry,
+            opts: {
+                local: {
+                    origin: IOT_VIDEO_ACCESS_LOCAL_SVR_ORIGIN || `http://localhost:${flags.port || 8080}`,
+                    rootPath: 'static',
+                    childPath: 'upload',
+                },
+                maxSize: 104857600, // 100M
+            }
+        }, {
+            entry: require('./app').entry,
+            opts: {
+                exclude: [], // 不做认证的路由，也可以使用 exclude: ["*"]  跳过所有路由
+            }
+        }
+    ],
+    dc: {
+        url: IOT_VIDEO_ACCESS_DB,
+        opts: {
+            pool: {
+                max: 80,
+                min: 10,
+                idle: 10000
+            },
+            define: {
+                freezeTableName: true, // 固定表名
+                timestamps: false // 不含列 "createAt"/"updateAt"/"DeleteAt"
+            },
+            timezone: '+08:00',
+            logging: false
+        },
+        models: [require('./app').models]
+    },
+    logger: {
+        level: 'info',
+        json: false,
+        filename: path.join(__dirname, 'log', 'runtime.log'),
+        colorize: false,
+        maxsize: 1024 * 1024 * 5,
+        rotationFormat: false,
+        zippedArchive: true,
+        maxFiles: 10,
+        prettyPrint: true,
+        label: '',
+        timestamp: () => moment().format('YYYY-MM-DD HH:mm:ss.SSS'),
+        eol: os.EOL,
+        tailable: true,
+        depth: null,
+        showLevel: true,
+        maxRetries: 1
+    }
+};
+
+const development = {
+    port: product.port,
+    staticDirs: product.staticDirs,
+    mws: product.mws,
+    dc: product.dc,
+    logger: product.logger
+};
+
+if (dev) {
+    // mws
+    for (let mw of development.mws) {
+        // if (mw.opts.exclude) mw.opts.exclude = ['*']; // 使用 ['*'] 跳过所有路由
+    }
+    // logger
+    development.logger.filename = path.join(__dirname, 'log', 'development.log');
+    development.logger.level = 'debug';
+    development.dc.opts.logging = console.log;
+}
+
+module.exports = dev ? development : product;
diff --git a/code/VideoAccess-VCMP/api/package.json b/code/VideoAccess-VCMP/api/package.json
new file mode 100644
index 0000000..43c97b7
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "smart-emergency",
+    "version": "1.0.0",
+    "description": "fs smart emergency api",
+    "main": "server.js",
+    "scripts": {
+        "test": "set DEBUG=true&&\"node_modules/.bin/mocha\" --harmony --reporter spec app/test/*.test.js",
+        "start": "set NODE_ENV=development&&node server -p 14000 -g postgres://postgres:123@10.8.30.32:5432/yinjiguanli -f http://localhost:14000",
+        "start:linux": "export NODE_ENV=development&&node server -p 4000 -g postgres://FashionAdmin:123456@10.8.30.39:5432/pm1",
+        "automate": "sequelize-automate -c sequelize-automate.config.js"
+    },
+    "author": "",
+    "license": "MIT",
+    "repository": {},
+    "dependencies": {
+        "@fs/attachment": "^1.0.0",
+        "args": "^3.0.7",
+        "crypto-js": "^4.0.0",
+        "file-saver": "^2.0.2",
+        "fs-web-server-scaffold": "^2.0.2",
+        "ioredis": "^4.19.4",
+        "koa-convert": "^1.2.0",
+        "koa-proxy": "^0.9.0",
+        "moment": "^2.24.0",
+        "path": "^0.12.7",
+        "path-to-regexp": "^3.0.0",
+        "pg": "^7.9.0",
+        "redis": "^3.1.2",
+        "request": "^2.88.2",
+        "superagent": "^3.5.2",
+        "uuid": "^3.3.2"
+    },
+    "devDependencies": {
+        "mocha": "^6.0.2"
+    }
+}
diff --git a/code/VideoAccess-VCMP/api/sequelize-automate.config.js b/code/VideoAccess-VCMP/api/sequelize-automate.config.js
new file mode 100644
index 0000000..a0fb179
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/sequelize-automate.config.js
@@ -0,0 +1,35 @@
+module.exports = {
+    // 数据库配置 与 sequelize 相同
+    dbOptions: {
+        database: 'yinjiguanli',
+        username: 'postgres',
+        password: '123',
+        dialect: 'postgres',
+        host: '10.8.30.32',
+        port: 5432,
+        define: {
+            underscored: false,
+            freezeTableName: false,
+            charset: 'utf8mb4',
+            timezone: '+00: 00',
+            dialectOptions: {
+                collate: 'utf8_general_ci',
+            },
+            timestamps: false,
+        },
+    },
+    options: {
+        type: 'freesun', // 指定 models 代码风格
+        camelCase: true, // Models 文件中代码是否使用驼峰命名
+        modalNameSuffix: false, // 模型名称是否带 ‘Model’ 后缀
+        fileNameCamelCase: false, // Model 文件名是否使用驼峰法命名，默认文件名会使用表名，如 `user_post.js`；如果为 true，则文件名为 `userPost.js`
+        dir: './app/lib/models', // 指定输出 models 文件的目录
+        typesDir: 'models', // 指定输出 TypeScript 类型定义的文件目录，只有 TypeScript / Midway 等会有类型定义
+        emptyDir: false, // ！！！ 谨慎操作 生成 models 之前是否清空 `dir` 以及 `typesDir`
+        tables: ['user_placeSecurityRecord', 'places'], // 指定生成哪些表的 models，如 ['user', 'user_post']；如果为 null，则忽略改属性
+        skipTables: ['user'], // 指定跳过哪些表的 models，如 ['user']；如果为 null，则忽略改属性
+        tsNoCheck: false, // 是否添加 `@ts-nocheck` 注释到 models 文件中
+        ignorePrefix: [], // 生成的模型名称忽略的前缀，因为 项目中有以下表名是以 t_ 开头的，在实际模型中不需要， 可以添加多个 [ 't_data_', 't_',] ,长度较长的 前缀放前面
+        attrLength: false, // 在生成模型的字段中 是否生成 如 var（128）这种格式，公司一般使用 String ，则配置为 false
+    },
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/server.js b/code/VideoAccess-VCMP/api/server.js
new file mode 100644
index 0000000..9d1454d
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/server.js
@@ -0,0 +1,12 @@
+/**
+ * Created by rain on 2016/1/25.
+ */
+
+'use strict';
+/*jslint node:true*/
+//from koa
+
+const scaffold = require('fs-web-server-scaffold');
+const config = require('./config');
+
+module.exports = scaffold(config);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/api/utils/forward-api.js b/code/VideoAccess-VCMP/api/utils/forward-api.js
new file mode 100644
index 0000000..6b48e3e
--- /dev/null
+++ b/code/VideoAccess-VCMP/api/utils/forward-api.js
@@ -0,0 +1,15 @@
+'use strict';
+const proxy = require('koa-proxy');
+const convert = require('koa-convert');
+
+module.exports = {
+    entry: function (app, router, opts) {
+        app.use(convert(proxy({
+            host: opts.host,
+            match: opts.match,
+            map: function (path) {
+                return path.replace(opts.match, '');
+            }
+        })));
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/.babelrc b/code/VideoAccess-VCMP/web/.babelrc
new file mode 100644
index 0000000..6c96eb8
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/.babelrc
@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    // ["import", {
+    // //   "libraryName": "antd",
+    //   "libraryDirectory": "es"
+    // }]
+  ],
+  "env": {
+    "development": {}
+  }
+}
diff --git a/code/VideoAccess-VCMP/web/.vscode/launch.json b/code/VideoAccess-VCMP/web/.vscode/launch.json
new file mode 100644
index 0000000..d48243f
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Server",
+            "type": "node",
+            "request": "launch",
+            "program": "${workspaceRoot}/server.js",
+            "args": [
+                "-u http://127.0.0.1:4000"
+            ],
+            "outputCapture": "std",
+            "env": {
+                "NODE_ENV": "development"
+            }
+        }        
+    ]
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/.vscode/settings.json b/code/VideoAccess-VCMP/web/.vscode/settings.json
new file mode 100644
index 0000000..f5f67f5
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/.vscode/settings.json
@@ -0,0 +1,4 @@
+// 将设置放入此文件中以覆盖默认值和用户设置。
+{
+    "editor.fontSize": 16,
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/Dockerfile b/code/VideoAccess-VCMP/web/Dockerfile
new file mode 100644
index 0000000..02c9375
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/Dockerfile
@@ -0,0 +1,12 @@
+
+FROM repository.anxinyun.cn/base-images/nodejs12:20.10.12.2
+
+COPY . /var/app
+
+WORKDIR /var/app
+
+EXPOSE 8080
+
+CMD ["-u", "http://localhost:8088"]
+
+ENTRYPOINT [ "node", "server.js" ]
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/1.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/1.png
new file mode 100644
index 0000000..52dbdb8
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/1.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/10.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/10.png
new file mode 100644
index 0000000..a543c2a
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/10.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/11.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/11.png
new file mode 100644
index 0000000..f569e09
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/11.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/12.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/12.png
new file mode 100644
index 0000000..7265983
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/12.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/2.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/2.png
new file mode 100644
index 0000000..708e41d
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/2.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/3.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/3.png
new file mode 100644
index 0000000..933b3f1
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/3.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/4.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/4.png
new file mode 100644
index 0000000..793baca
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/4.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/5.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/5.png
new file mode 100644
index 0000000..c66ec46
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/5.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/6.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/6.png
new file mode 100644
index 0000000..157f56a
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/6.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/7.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/7.png
new file mode 100644
index 0000000..ddd4f3d
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/7.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/8.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/8.png
new file mode 100644
index 0000000..3a01c87
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/8.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/9.png b/code/VideoAccess-VCMP/web/client/assets/images/avatar/9.png
new file mode 100644
index 0000000..0a952d4
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/9.png differ
diff --git a/code/VideoAccess-VCMP/web/client/assets/images/avatar/avatar.jpg b/code/VideoAccess-VCMP/web/client/assets/images/avatar/avatar.jpg
new file mode 100644
index 0000000..dd6739f
Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/avatar/avatar.jpg differ
diff --git a/code/VideoAccess-VCMP/web/client/index.ejs b/code/VideoAccess-VCMP/web/client/index.ejs
new file mode 100644
index 0000000..be3ad78
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/index.ejs
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <link rel="shortcut icon" href="/assets/images/favicon.ico">
+</head>
+
+<body>
+    <div id='App'></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/index.html b/code/VideoAccess-VCMP/web/client/index.html
new file mode 100644
index 0000000..d7a7b3a
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <link rel="shortcut icon" href="/assets/images/favicon.ico">
+</head>
+
+<body>
+    <div id='App'></div>
+
+    <!-- Webpack -->
+    <script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script>
+    <!-- Vite -->
+    <script type="module">
+        import RefreshRuntime from "http://localhost:5002/@react-refresh"
+        RefreshRuntime.injectIntoGlobalHook(window)
+        window.$RefreshReg$ = () => { }
+        window.$RefreshSig$ = () => (type) => type
+        window.__vite_plugin_react_preamble_installed__ = true
+        const global = window
+    </script>
+    <script type="module" src="http://localhost:5002/src/index.jsx"></script>
+    <!-- Vite End -->
+    <script>
+        //过滤掉一些无用的警告、没有价值的报错
+        //代理console.warn方法
+        const _consoleWarn = (...rest) => {
+            console.error(...rest)
+        };
+        console.error = (...rest) => {
+            if (
+                ![
+                    'Each child in a list should have a unique "key" prop',
+                ].some((item) => rest[0].indexOf(item) !== -1)
+            ) {
+                _consoleWarn(...rest);
+            }
+        };
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/index.js b/code/VideoAccess-VCMP/web/client/index.js
new file mode 100644
index 0000000..734451c
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/index.js
@@ -0,0 +1,20 @@
+/**
+ * User: liuxinyi/liu.xinyi@free-sun.com.cn
+ * Date: 2016/2/22
+ * Time: 15:29
+ *
+ */
+'use strict';
+
+const views = require('koa-view');
+const path = require('path');
+
+module.exports = {
+    entry: function (app, router, opt) {
+        app.use(views(__dirname));
+
+        router.get('(.*)', async function (ctx) {
+            await ctx.render(path.join(__dirname, './index'));
+        });
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/app.jsx b/code/VideoAccess-VCMP/web/client/src/app.jsx
new file mode 100644
index 0000000..a4fcd60
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/app.jsx
@@ -0,0 +1,23 @@
+'use strict';
+
+import React, { useEffect } from 'react';
+import Layout from './layout';
+import Auth from './sections/auth';
+import Example from './sections/example';
+
+const App = props => {
+    const { projectName } = props
+
+    useEffect(() => {
+        document.title = projectName;
+    }, [])
+
+    return (
+        <Layout
+            title={projectName}
+            sections={[Auth, Example]}
+        />
+    )
+}
+
+export default App;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/components/index.js b/code/VideoAccess-VCMP/web/client/src/components/index.js
new file mode 100644
index 0000000..326a725
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/components/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+export {
+    
+};
diff --git a/code/VideoAccess-VCMP/web/client/src/index.jsx b/code/VideoAccess-VCMP/web/client/src/index.jsx
new file mode 100644
index 0000000..9a2559a
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/index.jsx
@@ -0,0 +1,8 @@
+'use strict';
+
+import React from 'react';
+import { render } from 'react-dom';
+import App from './app';
+import './index.less';
+
+render((<App projectName="飞尚物联" />), document.getElementById('App'));
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/index.less b/code/VideoAccess-VCMP/web/client/src/index.less
new file mode 100644
index 0000000..a4b488c
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/index.less
@@ -0,0 +1,38 @@
+// webpack （vite 用 alias 兼容了）
+@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import '~nprogress/nprogress.css';
+
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    height: 100%;
+    width: 100%;
+
+    a:link {
+        text-decoration: none;
+        color: unset
+    }
+
+    a:visited {
+        text-decoration: none;
+        color: unset
+    }
+
+    a:hover {
+        text-decoration: none;
+        color: unset
+    }
+
+    a:active {
+        text-decoration: none;
+        color: unset
+    }
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/actions/global.js b/code/VideoAccess-VCMP/web/client/src/layout/actions/global.js
new file mode 100644
index 0000000..0548a95
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/actions/global.js
@@ -0,0 +1,44 @@
+'use strict';
+import { RouteRequest } from '@peace/utils';
+import { RouteTable } from '$utils'
+
+export const INIT_LAYOUT = 'INIT_LAYOUT';
+export function initLayout (title, copyright, sections, actions) {
+    return {
+        type: INIT_LAYOUT,
+        payload: {
+            title,
+            copyright,
+            sections,
+            actions
+        }
+    };
+}
+
+export const RESIZE = 'RESIZE';
+export function resize (clientHeight, clientWidth) {
+    const headerHeight = 60
+    const footerHeight = 0
+    return {
+        type: RESIZE,
+        payload: {
+            clientHeight: clientHeight - headerHeight - footerHeight,
+            clientWidth: clientWidth
+        }
+    }
+}
+
+export const INIT_API_ROOT = 'INIT_API_ROOT';
+export function initApiRoot () {
+    return dispatch => {
+        RouteRequest.get(RouteTable.apiRoot).then(res => {
+            localStorage.setItem('apiRoot', res.root);
+            dispatch({
+                type: INIT_API_ROOT,
+                payload: {
+                    apiRoot: res.root
+                }
+            })
+        });
+    }
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/components/footer/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/components/footer/index.jsx
new file mode 100644
index 0000000..307b319
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/components/footer/index.jsx
@@ -0,0 +1,15 @@
+'use strict';
+import React from 'react';
+import moment from 'moment'
+
+export default class Footer extends React.Component {
+    render () {
+        // const { } = this.props;
+
+        return (
+            <div style={{ textAlign: 'center', lineHeight: '32px' }}>
+                Copyright © {moment().year()} All Rights Reserved　版权所有· 江西飞尚科技有限公司
+            </div>
+        );
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
new file mode 100644
index 0000000..9abadb1
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
@@ -0,0 +1,43 @@
+'use strict';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Nav } from '@douyinfe/semi-ui';
+
+const Header = props => {
+    const { dispatch, history, user, actions } = props
+
+    return (
+        <div style={{ position: 'relative', height: 60, minWidth: 520 }}>
+            <div style={{ float: 'left', paddingLeft: 32, fontSize: 16 }}>
+                <div style={{
+                    lineHeight: '60px', display: 'inline-block', fontSize: 20, textShadow: '0 4px 3px rgba(0, 0, 0, 0.2)',
+                    userSelect: 'none'
+                }}>
+                    飞尚物联
+                </div>
+            </div>
+            <div id="nav" style={{ float: 'right' }}>
+                <Nav mode={'horizontal'} onClick={({ itemKey }) => {
+                    if (itemKey == 'logout') {
+                        dispatch(actions.auth.logout(user));
+                        history.push(`/signin`);
+                    }
+                }}>
+                    <Nav.Sub itemKey={'user'} text={<div style={{ display: 'inline-block' }}>{user.displayName}</div>}>
+                        <Nav.Item itemKey={'logout'} text={'退出'} />
+                    </Nav.Sub>
+                </Nav>
+            </div>
+        </div>
+    )
+};
+
+function mapStateToProps (state) {
+    const { global, auth } = state;
+    return {
+        actions: global.actions,
+        user: auth.user
+    };
+}
+
+export default connect(mapStateToProps)(Header);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
new file mode 100644
index 0000000..fd1170a
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { connect } from 'react-redux';
+import { Nav } from '@douyinfe/semi-ui';
+import { push } from 'react-router-redux';
+
+let scrollbar = null
+const Sider = props => {
+    const { collapsed, clientHeight, dispatch } = props
+    const [items, setItems] = useState([])
+    const [selectedKeys, setSelectedKeys] = useState([])
+    const [openKeys, setOpenKeys] = useState([])
+
+    useEffect(() => {
+        const { sections, dispatch, user } = props;
+        let nextItems = []
+        for (let c of sections) {
+            if (typeof c.getNavItem == 'function') {
+                let item = c.getNavItem(user, dispatch);
+                if (item) {
+                    nextItems.push.apply(nextItems, item)
+                }
+            }
+        }
+        setItems(nextItems)
+
+        scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
+    }, [])
+
+    useEffect(() => {
+        if (scrollbar) {
+            scrollbar.update();
+        }
+    })
+
+    return (
+        <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
+            <Nav
+                style={{}}
+                onSelect={({ selectedItems }) => {
+                    const selectItem = selectedItems[0]
+                    if (selectItem.to) {
+                        dispatch(push(selectItem.to))
+                    }
+                }}
+                items={items}
+            />
+        </div>
+    )
+}
+
+function mapStateToProps (state) {
+    const { global } = state;
+    return {
+        clientHeight: global.clientHeight,
+    };
+}
+
+export default connect(mapStateToProps)(Sider);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/containers/index.js b/code/VideoAccess-VCMP/web/client/src/layout/containers/index.js
new file mode 100644
index 0000000..345ec16
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/containers/index.js
@@ -0,0 +1,6 @@
+'use strict';
+import Layout from './layout';
+import NoMatch from './no-match';
+
+export { Layout };
+export { NoMatch };
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
new file mode 100644
index 0000000..6b74fab
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
@@ -0,0 +1,135 @@
+'use strict';
+
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Layout, Toast } from '@douyinfe/semi-ui';
+import Sider from '../../components/sider';
+import Header from '../../components/header';
+import Footer from '../../components/footer';
+import { resize } from '../../actions/global';
+import * as NProgress from 'nprogress';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+NProgress.configure({
+    template: `
+    <div class="bar" style="height:2px" role="bar">
+        <div class="peg"></div>
+    </div>
+    <div class="spinner" role="spinner">
+        <div class="spinner-icon"></div>
+    </div>
+    `
+});
+
+let scrollbar
+
+const LayoutContainer = props => {
+    const {
+        dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
+        location, match, routes, history
+    } = props
+    const [collapsed, setCollapsed] = useState(false)
+
+    NProgress.start();
+
+    const resize_ = () => {
+        dispatch(resize(
+            document.body.clientHeight,
+            document.body.clientWidth - (collapsed ? 120 : 240)
+        ));
+    }
+
+    useEffect(() => {
+        scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
+
+        window.addEventListener('resize', resize_);
+        return () => {
+            window.removeEventListener('resize', resize_);
+        }
+    }, [])
+
+    useEffect(() => {
+        NProgress.done();
+        if (!user || !user.authorized) {
+            history.push('/signin');
+        }
+        if (msg) {
+            if (msg.done) {
+                Toast.success(msg.done);
+            }
+            if (msg.error) {
+                Toast.error(msg.error);
+            }
+        }
+        const dom = document.getElementById('page-content');
+        if (dom) {
+            scrollbar.update();
+            dom.scrollTop = 0;
+        }
+    })
+
+    return (
+        <Layout id="layout">
+            <Layout.Header>
+                <Header
+                    user={user}
+                    pathname={location.pathname}
+                    toggleCollapsed={() => {
+                        setCollapsed(!collapsed);
+                    }}
+                    collapsed={collapsed}
+                    history={history}
+                />
+            </Layout.Header>
+            <Layout>
+                <Layout.Sider>
+                    <Sider
+                        sections={sections}
+                        dispatch={dispatch}
+                        user={user}
+                        pathname={location.pathname}
+                        collapsed={collapsed}
+                    />
+                </Layout.Sider>
+                <Layout.Content>
+                    <div style={{
+                        margin: '12px 12px 0px',
+                    }}>
+                        <div id="page-content" style={{
+                            height: clientHeight - 12,
+                            minWidth: 520,
+                            position: 'relative',
+                        }}>
+                            <div style={{
+                                minHeight: clientHeight - 32 - 12,
+                                position: 'relative',
+                                padding: '12px 8px',
+                            }}>
+                                {children}
+                            </div>
+                            <Layout.Footer>
+                                <Footer />
+                            </Layout.Footer>
+                        </div>
+                    </div>
+                </Layout.Content>
+            </Layout>
+        </Layout >
+    )
+}
+
+function mapStateToProps (state) {
+    const { global, auth, ajaxResponse } = state;
+    return {
+        title: global.title,
+        copyright: global.copyright,
+        sections: global.sections,
+        actions: global.actions,
+        clientWidth: global.clientWidth,
+        clientHeight: global.clientHeight,
+        msg: ajaxResponse.msg,
+        user: auth.user
+    };
+}
+
+export default connect(mapStateToProps)(LayoutContainer);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/containers/no-match/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/containers/no-match/index.jsx
new file mode 100644
index 0000000..c0437a5
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/containers/no-match/index.jsx
@@ -0,0 +1,18 @@
+'use strict';
+
+import React from 'react';
+import moment from 'moment'
+
+const NoMatch = props => {
+    return (
+        <div style={{ textAlign: 'center', padding: 120 }}>
+            <p style={{ fontSize: 80, lineHeight: 1.5 }}>404</p>
+            <p style={{ fontSize: 32, lineHeight: 2 }}>PAGE NOT FOUND</p>
+            <p>很遗憾，您暂时无法访问该页面。</p>
+            <p>请检查您访问的链接地址是否正确。</p>
+            <p style={{ marginTop: 80 }}>Copyright © {moment().year()} 飞尚</p>
+        </div>
+    )
+}
+
+export default NoMatch;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/index.jsx
new file mode 100644
index 0000000..8fd67a2
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/index.jsx
@@ -0,0 +1,177 @@
+'use strict';
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import configStore from './store';
+import { Provider } from 'react-redux';
+import { createBrowserHistory } from 'history';
+import { ConnectedRouter } from 'connected-react-router'
+import { Layout, NoMatch } from './containers';
+import { Switch, Route } from "react-router-dom";
+import { ConfigProvider } from '@douyinfe/semi-ui';
+import * as layoutActions from './actions/global';
+import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
+import { basicReducer } from '@peace/utils';
+import 'moment/locale/zh-cn';
+
+moment.locale('zh-cn');
+
+const { initLayout, initApiRoot, resize } = layoutActions;
+
+const Root = props => {
+    const { sections, title, copyright } = props;
+    const [history, setHistory] = useState(null)
+    const [store, setStore] = useState(null)
+    const [outerRoutes, setOuterRoutes] = useState([])
+    const [combineRoutes, setCombineRoutes] = useState([])
+    const [innnerRoutes, setInnerRoutes] = useState([])
+
+    const flatRoutes = (routes) => {
+        const combineRoutes = [];
+
+        function flat (routes, parentRoute) {
+            routes.forEach((route, i) => {
+                let obj = {
+                    path: route.path,
+                    breadcrumb: route.breadcrumb,
+                    component: route.component || null,
+                    authCode: route.authCode || '',
+                    key: route.key
+                }
+                if (!route.path.startsWith("/")) {
+                    console.error('路由配置需以 "/" 开始：' + route.path);
+                }
+                if (route.path.length > 1 && route.path[route.path.length] == '/') {
+                    console.error('除根路由路由配置不可以以 "/" 结束：' + route.path);
+                }
+                if (parentRoute && parentRoute != '/') {
+                    obj.path = parentRoute + route.path;
+                }
+                if (route.exact) {
+                    obj.exact = true
+                }
+                if (route.hasOwnProperty('childRoutes')) {
+                    combineRoutes.push(obj);
+                    flat(route.childRoutes, obj.path)
+                } else {
+                    combineRoutes.push(obj)
+                }
+            })
+        }
+
+        flat(routes);
+        return combineRoutes;
+    }
+
+    const initReducer = (reducers, reducerName, action) => {
+        let reducerParams = {}
+        const { actionType, initReducer, reducer } = action()()
+        if (initReducer || reducer) {
+            if (reducer) {
+                if (reducer.name) {
+                    reducerName = reducer.name
+                }
+                if (reducer.params) {
+                    reducerParams = reducer.params
+                }
+            } else {
+                reducerName = `${reducerName}Rslt`
+            }
+            reducers[reducerName] = function (state, action) {
+                return basicReducer(state, action, Object.assign({ actionType: actionType }, reducerParams));
+            }
+        }
+    }
+
+    useEffect(() => {
+        let innerRoutes = []
+        let outerRoutes = []
+        let reducers = {}
+        let actions = {
+            layout: layoutActions
+        }
+
+        for (let s of sections) {
+            if (!s.key) console.warn('请给你的section添加一个key值，section name:' + s.name);
+            for (let r of s.routes) {
+                if (r.type == 'inner' || r.type == 'home') {
+                    innerRoutes.push(r.route)
+                } else if (r.type == 'outer') {
+                    outerRoutes.push(r.route)
+                }
+            }
+            if (s.reducers) {
+                reducers = { ...reducers, ...s.reducers }
+            }
+            if (s.actions) {
+                actions = { ...actions, [s.key]: s.actions }
+                if (s.key != 'auth') {
+                    for (let ak in s.actions) {
+                        let actions = s.actions[ak]
+                        if (actions && typeof actions == 'object') {
+                            for (let actionName in actions) {
+                                initReducer(reducers, actionName, actions[actionName])
+                            }
+                        } else if (typeof actions == 'function') {
+                            initReducer(reducers, ak, actions)
+                        }
+                    }
+                }
+            }
+        }
+
+        let history = createBrowserHistory();
+        let store = configStore(reducers, history);
+        store.dispatch(initLayout(title, copyright, sections, actions));
+        store.dispatch(resize(document.body.clientHeight, document.body.clientWidth));
+        store.dispatch(actions.auth.initAuth());
+        store.dispatch(initApiRoot())
+
+        const combineRoutes = flatRoutes(innerRoutes);
+
+        setInnerRoutes(combineRoutes)
+        setHistory(history)
+        setStore(store)
+        setOuterRoutes(outerRoutes.map(route => (
+            <Route
+                key={route.key}
+                exact
+                path={route.path}
+                component={route.component}
+            />
+        )))
+        setCombineRoutes(combineRoutes.map(route => (
+            <Route
+                key={route.key}
+                exact={route.hasOwnProperty('exact') ? route.exact : true}
+                path={route.path}
+                component={route.component}
+            />
+        )))
+    }, [])
+
+    return (
+        store ?
+            <ConfigProvider locale={zhCN}>
+                <Provider store={store}>
+                    <ConnectedRouter history={history}>
+                        <Switch>
+                            {outerRoutes}
+                            <Layout
+                                history={history}
+                                routes={innnerRoutes}
+                            >
+                                {combineRoutes}
+                            </Layout>
+                            <Route
+                                path={'*'}
+                                component={NoMatch}
+                            />
+                        </Switch>
+                    </ConnectedRouter>
+                </Provider>
+            </ConfigProvider>
+            : ''
+    )
+}
+
+export default Root;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/reducers/ajaxResponse.js b/code/VideoAccess-VCMP/web/client/src/layout/reducers/ajaxResponse.js
new file mode 100644
index 0000000..ee934d8
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/reducers/ajaxResponse.js
@@ -0,0 +1,28 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/4/1.
+ */
+'use strict';
+const initState = {
+    msg: null
+};
+
+import Immutable from 'immutable';
+
+/**
+ * 全局ajax响应处理：
+ * 判断action中是否有done字段，如果有，则修改store中的msg.done
+ * 判断action中是否有error字段，如果有，则修改store中msg.error
+ * 在layout中根据msg的值，呈现提示信息。
+*/
+export default function ajaxResponse(state = initState, action) {
+    if (action.done) {
+        return Immutable.fromJS(state).set('msg', {done: action.done}).toJS();
+    }
+
+    if (action.error) {
+        return Immutable.fromJS(state).set('msg', {error: action.error}).toJS();
+    }
+
+    return {msg: null};
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/reducers/global.js b/code/VideoAccess-VCMP/web/client/src/layout/reducers/global.js
new file mode 100644
index 0000000..8159de4
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/reducers/global.js
@@ -0,0 +1,36 @@
+'use strict';
+import Immutable from 'immutable';
+import { INIT_LAYOUT, RESIZE } from '../actions/global';
+
+function global (state = {
+    title: '',
+    copyright: '',
+    sections: [],
+    actions: {},
+    plugins: {},
+    clientHeight: 768,
+    clientWidth: 1024
+}, action) {
+    const payload = action.payload;
+    switch (action.type) {
+        case RESIZE:
+            return Immutable.fromJS(state).merge({
+                clientHeight: payload.clientHeight,
+                clientWidth: payload.clientWidth
+            }).toJS();
+        case INIT_LAYOUT:
+            return {
+                title: payload.title,
+                copyright: payload.copyright,
+                sections: payload.sections,
+                actions: payload.actions,
+                plugins: payload.plugins,
+                clientHeight: state.clientHeight,
+                detailsComponent: null
+            };
+        default:
+            return state;
+    }
+}
+
+export default global;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/reducers/index.js b/code/VideoAccess-VCMP/web/client/src/layout/reducers/index.js
new file mode 100644
index 0000000..975cbd5
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/reducers/index.js
@@ -0,0 +1,15 @@
+/**
+ * User: liuxinyi/liu.xinyi@free-sun.com.cn
+ * Date: 2016/1/13
+ * Time: 17:52
+ *
+ */
+'use strict';
+
+import global from './global';
+import ajaxResponse from './ajaxResponse';
+
+export default {
+    global,
+    ajaxResponse
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/store/index.js b/code/VideoAccess-VCMP/web/client/src/layout/store/index.js
new file mode 100644
index 0000000..b723906
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/store/index.js
@@ -0,0 +1,13 @@
+'use strict';
+
+import storeProd from './store.prod'
+import storeDev from './store.dev'
+
+let store = null;
+if (process.env.NODE_ENV == 'production') {
+    store = storeProd;
+} else {
+    store = storeDev;
+}
+
+export default store;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/store/store.dev.js b/code/VideoAccess-VCMP/web/client/src/layout/store/store.dev.js
new file mode 100644
index 0000000..57beb1e
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/store/store.dev.js
@@ -0,0 +1,30 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/4/8.
+ */
+'use strict';
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import reduxThunk from 'redux-thunk';
+import { connectRouter, routerMiddleware } from 'connected-react-router';
+import innerReducers from '../reducers';
+
+function configStore(reducers, history) {
+    const reducer = Object.assign({}, innerReducers, reducers, {
+        router: connectRouter(history)
+    });
+
+    const composeEnhancers =
+        typeof window === 'object' &&
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+            }) : compose;
+
+    const enhancers = composeEnhancers(
+        applyMiddleware(routerMiddleware(history), reduxThunk)
+    );
+
+    return createStore(combineReducers(reducer), {}, enhancers);
+}
+
+export default configStore;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/store/store.prod.js b/code/VideoAccess-VCMP/web/client/src/layout/store/store.prod.js
new file mode 100644
index 0000000..e29f026
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/layout/store/store.prod.js
@@ -0,0 +1,20 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/4/8.
+ */
+'use strict';
+
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import reduxThunk from 'redux-thunk';
+import { connectRouter, routerMiddleware } from 'connected-react-router';
+import innerReducers from '../reducers';
+
+function configStore(reducers, history){
+    const reducer = Object.assign({}, innerReducers, reducers, {
+        router: connectRouter(history)
+    });
+
+    return createStore(combineReducers(reducer), {}, applyMiddleware(routerMiddleware(history), reduxThunk));
+}
+
+export default configStore;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/auth.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/auth.js
new file mode 100644
index 0000000..a70b5aa
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/auth.js
@@ -0,0 +1,79 @@
+'use strict';
+
+import { ApiTable } from '$utils'
+import { Request } from '@peace/utils'
+
+export const INIT_AUTH = 'INIT_AUTH';
+export function initAuth () {
+    const user = JSON.parse(sessionStorage.getItem('user')) || {};
+    return {
+        type: INIT_AUTH,
+        payload: {
+            user: user
+        }
+    };
+}
+
+export const REQUEST_LOGIN = 'REQUEST_LOGIN';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_ERROR = 'LOGIN_ERROR';
+export function login (username, password) {
+    return dispatch => {
+        dispatch({ type: REQUEST_LOGIN });
+
+        if (!username || !password) {
+            dispatch({
+                type: LOGIN_ERROR,
+                payload: { error: '请输入账号名和密码' }
+            });
+            return Promise.resolve();
+        }
+
+        return dispatch({
+            type: LOGIN_SUCCESS,
+            payload: {
+                user: {
+                    authorized: true,
+                    displayName: 'TEST'
+                }
+            },
+        });
+
+        const url = ApiTable.login;
+        return Request.post(url, { username, password, p: '456' })
+            .then(user => {
+                sessionStorage.setItem('user', JSON.stringify(user));
+                dispatch({
+                    type: LOGIN_SUCCESS,
+                    payload: { user: user },
+                });
+            }, error => {
+                let { body } = error.response;
+                dispatch({
+                    type: LOGIN_ERROR,
+                    payload: {
+                        error: body && body.message ? body.message : '登录失败'
+                    }
+                })
+            });
+    }
+}
+
+export const LOGOUT = 'LOGOUT';
+export function logout (user) {
+    const token = user.token;
+    const url = ApiTable.logout;
+    sessionStorage.removeItem('user');
+    Request.put(url, {
+        token: token
+    });
+    return {
+        type: LOGOUT
+    };
+}
+
+export default {
+    initAuth,
+    login,
+    logout
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/index.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/index.js
new file mode 100644
index 0000000..d44996e
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/actions/index.js
@@ -0,0 +1,10 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/4/1.
+ */
+'use strict';
+import auth from './auth';
+
+export default {
+    ...auth    
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/index.js
new file mode 100644
index 0000000..9229b94
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/index.js
@@ -0,0 +1,4 @@
+'use strict';
+import Login from './login';
+
+export { Login };
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx b/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx
new file mode 100644
index 0000000..21aefea
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx
@@ -0,0 +1,62 @@
+'use strict';
+import React, { useEffect, useRef } from 'react';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import { Form, Button, Toast } from '@douyinfe/semi-ui';
+import { login } from '../actions/auth';
+
+const Login = props => {
+    const { dispatch, user, error, isRequesting } = props
+    const form = useRef();
+
+    useEffect(() => {
+        if (error) {
+            Toast.error(error);
+            form.current.setValue('password', '')
+        }
+    }, [error])
+
+    useEffect(() => {
+        if (user && user.authorized) {
+            dispatch(push('/example/e1'));
+        }
+    }, [user])
+
+    return (
+        <div style={{
+            height: '100vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+            <div style={{
+                width: 400,
+                height: 410,
+                padding: 30,
+            }}>
+                <p style={{ fontSize: 21, fontWeight: 'bold', textAlign: 'center' }}>飞尚物联</p>
+                <Form
+                    onSubmit={values => {
+                        dispatch(login(values.username, values.password))
+                    }}
+                    getFormApi={formApi => form.current = formApi}
+                >
+                    <Form.Input field='username' label='用户名' />
+                    <Form.Input field='password' mode="password" autoComplete="" label='密码' />
+                    <Button htmlType='submit' block theme="solid" >登录</Button>
+                </Form>
+            </div>
+        </div>
+    );
+}
+
+function mapStateToProps (state) {
+    const { auth } = state;
+    return {
+        user: auth.user,
+        error: auth.error,
+        isRequesting: auth.isRequesting
+    }
+}
+
+export default connect(mapStateToProps)(Login);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/index.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/index.js
new file mode 100644
index 0000000..f8e40fb
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/index.js
@@ -0,0 +1,12 @@
+'use strict';
+
+import routes from './routes';
+import reducers from './reducers';
+import actions from './actions';
+
+export default {
+    key: 'auth',
+    reducers: reducers,
+    routes: routes,
+    actions: actions
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/auth.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/auth.js
new file mode 100644
index 0000000..edeebff
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/auth.js
@@ -0,0 +1,40 @@
+'use strict';
+import * as actionTypes from '../actions/auth';
+import Immutable from 'immutable';
+
+const initState = {
+    user: {},
+    isRequesting: false,
+    error: null
+};
+
+function auth(state = initState, action) {
+    const payload = action.payload;
+    switch (action.type){
+        case actionTypes.INIT_AUTH:
+            return Immutable.fromJS(state).set('user', payload.user).toJS();
+        case actionTypes.REQUEST_LOGIN:
+            return Immutable.fromJS(state).merge({
+                isRequesting: true,
+                error: null
+            }).toJS();
+        case actionTypes.LOGIN_SUCCESS:
+            return Immutable.fromJS(state).merge({
+                isRequesting: false,
+                user: payload.user
+            }).toJS();
+        case actionTypes.LOGIN_ERROR:
+            return Immutable.fromJS(state).merge({
+                isRequesting: false,
+                error: payload.error
+            }).toJS();
+        case actionTypes.LOGOUT:
+            return Immutable.fromJS(state).merge({
+                user: null
+            }).toJS();
+        default:
+            return state;
+    }
+}
+
+export default auth;
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/index.js
new file mode 100644
index 0000000..ba81f11
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/reducers/index.js
@@ -0,0 +1,6 @@
+'use strict';
+import auth from './auth'
+
+export default {
+    auth
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/auth/routes.js b/code/VideoAccess-VCMP/web/client/src/sections/auth/routes.js
new file mode 100644
index 0000000..d9a14ac
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/auth/routes.js
@@ -0,0 +1,12 @@
+'use strict';
+
+import { Login } from './containers';
+
+export default [{
+    type: 'outer',
+    route: {
+        key:'signin',
+        path: "/signin",
+        component: Login
+    }
+}];
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/actions/example.js b/code/VideoAccess-VCMP/web/client/src/sections/example/actions/example.js
new file mode 100644
index 0000000..367fa0e
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/actions/example.js
@@ -0,0 +1,15 @@
+'use strict';
+
+import { basicAction } from '@peace/utils'
+import { ApiTable } from '$utils'
+
+export function getMembers (orgId) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_MEMBERS',
+        url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+        msg: { error: '获取用户列表失败' },
+        reducer: { name: 'members' }
+    });
+}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/actions/index.js b/code/VideoAccess-VCMP/web/client/src/sections/example/actions/index.js
new file mode 100644
index 0000000..090c73f
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/actions/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+import * as example from './example'
+
+export default {
+    ...example
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/containers/example.jsx b/code/VideoAccess-VCMP/web/client/src/sections/example/containers/example.jsx
new file mode 100644
index 0000000..3a06fd0
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/containers/example.jsx
@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Card } from '@douyinfe/semi-ui';
+import '../style.less'
+const { Meta } = Card;
+
+const Example = (props) => {
+    const { dispatch, actions, user, loading } = props
+
+    useEffect(() => {
+        // ACTION 示例
+        dispatch(actions.example.getMembers(user.orgId))
+    }, [])
+
+    return (
+        <Spin tip="biubiubiu~" spinning={loading}>
+            <div id='example'>
+                <p>STYLE EXAMPLE</p>
+            </div>
+            <Card
+                style={{ maxWidth: 300 }}
+                cover={
+                    <img
+                        alt="example"
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg"
+                    />
+                }
+            >
+                <Meta title="组件示例" />
+            </Card>
+        </Spin>
+    )
+}
+
+function mapStateToProps (state) {
+    const { auth, global, members } = state;
+    return {
+        loading: members.isRequesting,
+        user: auth.user,
+        actions: global.actions,
+        members: members.data
+    };
+}
+
+export default connect(mapStateToProps)(Example);
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/containers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/example/containers/index.js
new file mode 100644
index 0000000..19e6695
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/containers/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+import Example from './example';
+
+export { Example };
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/index.js b/code/VideoAccess-VCMP/web/client/src/sections/example/index.js
new file mode 100644
index 0000000..92c4b45
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/index.js
@@ -0,0 +1,15 @@
+'use strict';
+
+import reducers from './reducers';
+import routes from './routes';
+import actions from './actions';
+import { getNavItem } from './nav-item';
+
+export default {
+    key: 'example',
+    name: '书写示例',
+    reducers: reducers,
+    routes: routes,
+    actions: actions,
+    getNavItem: getNavItem
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/nav-item.jsx b/code/VideoAccess-VCMP/web/client/src/sections/example/nav-item.jsx
new file mode 100644
index 0000000..cfcbbdc
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/nav-item.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconCode } from '@douyinfe/semi-icons';
+
+export function getNavItem (user, dispatch) {
+    return (
+        [
+            {
+                itemKey: 'example', text: '举个栗子', icon: <IconCode />,
+                items: [
+                    { itemKey: 'e1', to: '/example/e1', text: '举个棒子' },
+                ]
+            },
+        ]
+    );
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/reducers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/example/reducers/index.js
new file mode 100644
index 0000000..7ed1088
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/reducers/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/routes.js b/code/VideoAccess-VCMP/web/client/src/sections/example/routes.js
new file mode 100644
index 0000000..591e4ce
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/routes.js
@@ -0,0 +1,18 @@
+'use strict';
+import { Example, } from './containers';
+
+export default [{
+    type: 'inner',
+    route: {
+        path: '/example',
+        key: 'example',
+        breadcrumb: '栗子',
+        // 不设置 component 则面包屑禁止跳转
+        childRoutes: [{
+            path: '/e1',
+            key: 'e1',
+            component: Example,
+            breadcrumb: '棒子',
+        }]
+    }
+}];
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/example/style.less b/code/VideoAccess-VCMP/web/client/src/sections/example/style.less
new file mode 100644
index 0000000..75ecdb6
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/example/style.less
@@ -0,0 +1,7 @@
+#example {
+    box-shadow: 3px 3px 2px black;
+}
+
+#example:hover {
+    color: yellowgreen;
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/utils/authCode.js b/code/VideoAccess-VCMP/web/client/src/utils/authCode.js
new file mode 100644
index 0000000..971ccb5
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/utils/authCode.js
@@ -0,0 +1,5 @@
+'use strict';
+
+export const AuthorizationCode = {
+    
+};
diff --git a/code/VideoAccess-VCMP/web/client/src/utils/func.js b/code/VideoAccess-VCMP/web/client/src/utils/func.js
new file mode 100644
index 0000000..4750606
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/utils/func.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const isAuthorized = (authcode) => {
+    if (JSON.parse(sessionStorage.getItem('user'))) {
+        const { resources } = JSON.parse(sessionStorage.getItem('user'));
+        return resources.includes(authcode);
+    } else {
+        return false;
+    }
+}
+
+export default {
+    isAuthorized
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/utils/index.js b/code/VideoAccess-VCMP/web/client/src/utils/index.js
new file mode 100644
index 0000000..9a588fe
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/utils/index.js
@@ -0,0 +1,13 @@
+'use strict';
+import { isAuthorized } from './func';
+import { AuthorizationCode } from './authCode';
+import { ApiTable, RouteTable } from './webapi'
+
+export {
+    isAuthorized,
+
+    AuthorizationCode,
+
+    ApiTable,
+    RouteTable,
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
new file mode 100644
index 0000000..5e33127
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
@@ -0,0 +1,14 @@
+'use strict';
+
+export const ApiTable = {
+    login: 'login',
+    logout: 'logout',
+
+    getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
+};
+
+export const RouteTable = {
+    apiRoot: '/api/root',
+    fileUpload: '/_upload/new',
+    cleanUpUploadTrash: '/_upload/cleanup',
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/config.js b/code/VideoAccess-VCMP/web/config.js
new file mode 100644
index 0000000..56b2ffa
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/config.js
@@ -0,0 +1,91 @@
+'use strict';
+/*jslint node:true*/
+const path = require('path');
+/*这种以CommonJS的同步形式去引入其它模块的方式代码更加简洁:获取组件*/
+const os = require('os');
+const moment = require('moment');
+const args = require('args');
+const dev = process.env.NODE_ENV == 'development' || process.env.NODE_ENV == 'developmentVite';
+const vite = process.env.NODE_ENV == 'developmentVite';
+
+dev && console.log('\x1B[33m%s\x1b[0m', '请遵循并及时更新 readme.md，维护良好的开发环境，媛猿有责');
+// // 启动参数
+args.option(['p', 'port'], '启动端口');
+args.option(['u', 'api-url'], 'webapi的URL');
+
+const flags = args.parse(process.argv);
+
+const API_URL = process.env.API_URL || flags.apiUrl;
+
+if (!API_URL) {
+    console.log('缺少启动参数，异常退出');
+    args.showHelp();
+    process.exit(-1);
+}
+
+const product = {
+    port: flags.port || 8080,
+    staticDirs: [path.join(__dirname, './client')],
+    mws: [{
+        entry: require('./middlewares/proxy').entry,
+        opts: {
+            host: API_URL,
+            match: /^\/_api\//,
+        }
+    }, {
+        entry: require('./routes').entry,
+        opts: {
+            apiUrl: API_URL,
+            staticRoot: './client',
+        }
+    }, {
+        entry: require('./client').entry,// 静态信息
+        opts: {}
+    }],
+    logger: {
+        level: 'debug',
+        json: false,
+        filename: path.join(__dirname, 'log', 'runtime.txt'),
+        colorize: true,
+        maxsize: 1024 * 1024 * 5,
+        rotationFormat: false,
+        zippedArchive: true,
+        maxFiles: 10,
+        prettyPrint: true,
+        label: '',
+        timestamp: () => moment().format('YYYY-MM-DD HH:mm:ss.SSS'),
+        eol: os.EOL,
+        tailable: true,
+        depth: null,
+        showLevel: true,
+        maxRetries: 1
+    }
+};
+
+let config;
+if (dev) {
+    config = {
+        port: product.port,
+        staticDirs: product.staticDirs,
+        mws: product.mws
+            .concat([
+                vite ?
+                    {
+                        entry: require('./middlewares/vite-dev').entry,
+                        opts: {}
+                    }
+                    :
+                    {
+                        entry: require('./middlewares/webpack-dev').entry,
+                        opts: {}
+                    }
+            ])
+        ,
+        logger: product.logger
+    }
+    config.logger.filename = path.join(__dirname, 'log', 'development.txt');
+} else {
+    config = product;
+}
+
+module.exports = config;//区分开发和发布
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/jsconfig.json b/code/VideoAccess-VCMP/web/jsconfig.json
new file mode 100644
index 0000000..99271a0
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/jsconfig.json
@@ -0,0 +1,15 @@
+{
+
+	"compilerOptions": {
+		"target": "es6",
+		"module": "commonjs",
+		"allowSyntheticDefaultImports": true
+	},
+	"exclude": [
+		"node_modules",
+		"bower_components",
+		"jspm_packages",
+		"tmp",
+		"temp"
+	]
+}
diff --git a/code/VideoAccess-VCMP/web/middlewares/proxy.js b/code/VideoAccess-VCMP/web/middlewares/proxy.js
new file mode 100644
index 0000000..c9a2623
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/middlewares/proxy.js
@@ -0,0 +1,16 @@
+'use strict';
+
+const proxy = require('koa-proxy');
+const convert = require('koa-convert');
+
+module.exports = {
+    entry: function (app, router, opts) {
+        app.use(convert(proxy({
+            host: opts.host,
+            match: opts.match,
+            map: function (path) {
+                return path.replace(opts.match, '');
+            }
+        })));
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/middlewares/vite-dev.js b/code/VideoAccess-VCMP/web/middlewares/vite-dev.js
new file mode 100644
index 0000000..e05406f
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/middlewares/vite-dev.js
@@ -0,0 +1,25 @@
+'use strict';
+
+const express = require('express')
+const { createServer: createViteServer } = require('vite')
+
+module.exports = {
+    entry: async function (app, router, opts) {
+        const server = express()
+
+        // 以中间件模式创建 Vite 服务器
+        // 竟然会自动读 /vite.config.js 的配置
+        const vite = await createViteServer({})
+        // 将 vite 的 connect 实例作中间件使用
+        server.use(vite.middlewares)
+
+        server.use('*', async (req, res) => {
+            // 如果 `middlewareMode` 是 `'ssr'`，应在此为 `index.html` 提供服务.
+            // 如果 `middlewareMode` 是 `'html'`，则此处无需手动服务 `index.html`
+            // 因为 Vite 自会接管
+        })
+
+        server.listen(5002)
+        console.info('vite server.listen 5002');
+    }
+};
diff --git a/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js b/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
new file mode 100644
index 0000000..7e7326c
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
@@ -0,0 +1,42 @@
+'use strict';
+const express = require('express')
+const webpack = require('webpack');
+const devConfig = require('../webpack.config');
+const middleware = require('webpack-dev-middleware');
+const proxy = require('koa-better-http-proxy');
+const url = require('url');
+
+const compiler = webpack(devConfig);
+
+module.exports = {
+    entry: function (app, router, opts) {
+        app.use(proxy('http://localhost:5001', {
+            filter: function (ctx) {
+                return /\/build/.test(url.parse(ctx.url).path);
+            },
+            proxyReqPathResolver: function (ctx) {
+                return 'client' + url.parse(ctx.url).path;
+            }
+        }));
+
+        app.use(proxy('http://localhost:5001', {
+            filter: function (ctx) {
+                return /\/$/.test(url.parse(ctx.url).path);
+            },
+            proxyReqPathResolver: function (ctx) {
+                return 'client/build/index.html';
+            }
+        }));
+
+        const server = express();
+        server.use(middleware(compiler));
+        // server.use(require("webpack-hot-middleware")(compiler));
+        server.listen('5001', function (err) {
+            if (err) {
+                console.error(err);
+            } else {
+                console.info(`webpack-dev listen 5001`);
+            }
+        })
+    }
+};
diff --git a/code/VideoAccess-VCMP/web/package.json b/code/VideoAccess-VCMP/web/package.json
new file mode 100644
index 0000000..d1ab4a0
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/package.json
@@ -0,0 +1,73 @@
+{
+    "name": "fs-anxincloud-4.0",
+    "version": "1.0.0",
+    "description": "anxincloud-4.0",
+    "main": "server.js",
+    "scripts": {
+        "test": "mocha",
+        "start-vite": "cross-env NODE_ENV=developmentVite npm run start-params",
+        "start": "cross-env NODE_ENV=development npm run start-params",
+        "start-params": "node server -p 5000 -u http://127.0.0.1:4000",
+        "deploy": "export NODE_ENV=production&& npm run build && node server",
+        "build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
+        "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js"
+    },
+    "keywords": [
+        "app"
+    ],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@babel/core": "^7.14.6",
+        "@babel/plugin-proposal-class-properties": "^7.14.5",
+        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+        "@babel/plugin-transform-runtime": "^7.14.5",
+        "@babel/polyfill": "^7.12.1",
+        "@babel/preset-env": "^7.14.7",
+        "@babel/preset-react": "^7.14.5",
+        "babel-loader": "^8.2.2",
+        "babel-plugin-import": "^1.13.3",
+        "connected-react-router": "^6.8.0",
+        "css-loader": "^3.5.0",
+        "express": "^4.17.1",
+        "file-loader": "^6.0.0",
+        "html-webpack-plugin": "^4.5.0",
+        "immutable": "^4.0.0-rc.12",
+        "less": "^3.12.2",
+        "less-loader": "^7.0.2",
+        "nprogress": "^0.2.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-redux": "^7.2.1",
+        "react-router-dom": "^5.2.0",
+        "react-router-redux": "^4.0.8",
+        "redux": "^4.0.5",
+        "redux-thunk": "^2.3.0",
+        "style-loader": "^2.0.0",
+        "webpack": "^5.3.2",
+        "webpack-bundle-analyzer": "^4.1.0",
+        "webpack-cli": "^4.2.0",
+        "webpack-dev-middleware": "^4.0.2",
+        "webpack-hot-middleware": "^2.25.0"
+    },
+    "dependencies": {
+        "@douyinfe/semi-ui": "^2.8.0",
+        "@fs/attachment": "^1.0.0",
+        "@peace/components": "0.0.35",
+        "@peace/utils": "^0.0.44",
+        "@vitejs/plugin-react": "^1.3.1",
+        "@vitejs/plugin-react-refresh": "^1.3.6",
+        "args": "^5.0.1",
+        "cross-env": "^7.0.3",
+        "fs-web-server-scaffold": "^1.0.6",
+        "koa-better-http-proxy": "^0.2.5",
+        "koa-proxy": "^1.0.0-alpha.3",
+        "koa-view": "^2.1.4",
+        "moment": "^2.22.0",
+        "npm": "^7.20.6",
+        "perfect-scrollbar": "^1.5.5",
+        "superagent": "^6.1.0",
+        "vite": "^2.9.5",
+        "webpack-dev-server": "^3.11.2"
+    }
+}
diff --git a/code/VideoAccess-VCMP/web/readme.md b/code/VideoAccess-VCMP/web/readme.md
new file mode 100644
index 0000000..69f86da
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/readme.md
@@ -0,0 +1,214 @@
+创建时间：2021/08/19
+
+## 1. 文档维护：
+
+- 文档相关内容若有更改，请及时更新文档，以备后来者查询；
+
+## 2. 项目开发：
+
+- 请遵循此文档约定的目录结构与约定
+
+```js
+    |-- .babelrc
+    |-- config.js
+    |-- Dockerfile
+    |-- jsconfig.json
+    |-- package.json
+    |-- readme.md
+    |-- server.js
+    |-- webpack.config.js
+    |-- webpack.config.prod.js
+    |-- .vscode
+    |   |-- launch.json
+    |   |-- settings.json
+    |-- client
+    |   |-- index.ejs
+    |   |-- index.html                      // 当前 html 文件
+    |   |-- index.js
+    |   |-- assets                          // 资源文件
+    |   |   |-- images
+    |   |       |-- avatar
+    |   |-- src                             // 项目代码
+    |       |-- app.js                      // 由此开始并加载模块
+    |       |-- index.js                    
+    |       |-- components                  // 公用组件
+    |       |   |-- index.js                // 由此导出组件
+    |       |   |-- Upload
+    |       |       |-- index.js
+    |       |-- layout                      // 项目布局以及初始化等操作
+    |       |   |-- index.js
+    |       |   |-- actions
+    |       |   |   |-- global.js
+    |       |   |-- components
+    |       |   |   |-- footer
+    |       |   |   |   |-- index.js
+    |       |   |   |-- header
+    |       |   |   |   |-- index.js
+    |       |   |   |-- sider
+    |       |   |       |-- index.js
+    |       |   |-- containers
+    |       |   |   |-- index.js
+    |       |   |   |-- layout
+    |       |   |   |   |-- index.js
+    |       |   |   |   |-- index.less
+    |       |   |   |-- no-match
+    |       |   |       |-- index.js
+    |       |   |-- reducers
+    |       |   |   |-- ajaxResponse.js
+    |       |   |   |-- global.js            // 全局数据，主要包含屏幕可视宽高、所有的 action 等
+    |       |   |   |-- index.js
+    |       |   |-- store
+    |       |       |-- index.js
+    |       |       |-- store.dev.js
+    |       |       |-- store.prod.js
+    |       |-- sections                     // 各功能模块
+    |       |   |-- auth                     // 比较特别的 Auth 模块，目前 action、reducer 依然采用原始写法；包含登录、忘记密码等项目基本功能页面
+    |       |   |   |-- index.js
+    |       |   |   |-- routes.js
+    |       |   |   |-- actions
+    |       |   |   |   |-- auth.js
+    |       |   |   |   |-- index.js
+    |       |   |   |-- components
+    |       |   |   |-- containers
+    |       |   |   |   |-- index.js
+    |       |   |   |   |-- login.js
+    |       |   |   |-- reducers
+    |       |   |   |   |-- auth.js
+    |       |   |   |   |-- index.js
+    |       |   |   |-- __tests__
+    |       |   |-- example                   // 示例模块，一般的功能模块应遵循此结构
+    |       |       |-- index.js              // 由此导出该模块信息，应包括一个 key 值，actions 等
+    |       |       |-- nav-item.js           // 用于生成菜单项，此文件内可以进行权限判断
+    |       |       |-- routes.js             // 路由文件
+    |       |       |-- style.less            // 样式文件，若样式并不是非常多，每个模块一个样式文件即可
+    |       |       |-- actions                 
+    |       |       |   |-- example.js        // 具体的 action 操作
+    |       |       |   |-- index.js          // 由此导出该项目的 action
+    |       |       |-- components            // 组件
+    |       |       |-- containers            // 容器，此文件夹内应只包括该模块第一层级的页面
+    |       |       |   |-- example.js
+    |       |       |   |-- index.js
+    |       |       |-- reducers              // 若采用封装后的 action 写法，则 reducer 可不写
+    |       |           |-- index.js
+    |       |-- utils                         //
+    |           |-- authCode.js
+    |           |-- func.js                   // 常用函数
+    |           |-- index.js
+    |           |-- webapi.js                 // api 路由
+    |-- log
+    |-- middlewares
+    |   |-- proxy.js
+    |   |-- webpack-dev.js
+    |-- routes
+    |   |-- index.js
+    |   |-- attachment
+    |-- typings
+        |-- node
+        |   |-- node.d.ts
+        |-- react
+            |-- react.d.ts
+```
+
+- 封装后一般 action 写法：
+
+    `@peace/utils 的 actionHelp 中有详细注释`
+
+    ``` js
+    'use strict';
+
+    import { basicAction } from '@peace/utils'
+    import { ApiTable } from '$utils'
+
+    export function getMembers(orgId) {
+        return dispatch => basicAction({
+            type: 'get',
+            dispatch: dispatch,
+            actionType: 'GET_MEMBERS',
+            url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+            msg: { error: '获取用户列表失败' },
+            reducer: { name: 'members' }
+        });
+    }
+    ```
+
+1. 若 type=post，则可以使用 data 属性发送对象格式数据；
+
+2. reducer.name 会作为该 action 对应的 reducer 的名字，从 state 里可以解构此变量，获得该 action 异步或其他操作获得的数据；
+
+3. msg 可以发送 `{ option:'获取用户列表' }` ，则 actionHelp 会自动将其处理为失败和成功两种情况；
+
+    若单独写 success 或 error 的 key，则只在成功或失败的时候进行提示；
+
+4. 后续可以优化：type=get 时候，
+
+    使用 query 属性将数据传递，在 @peace/utils 的 actionHelp 中将其添加到路由后面；eg. `{ enterpriseId: orgId }`
+
+    使用 replace 属性传递对象数据，对象数据中将被替换的值为key，替换的值为 value，然后再 actionHelp 中更改路由；eg. `{ "{enterpriseId}": orgId}`
+
+5. 最终取得的 reducer 中的数据格式一般为：
+    ``` js
+    {
+        data: xxx,           // 接口返回的数据格式
+        isRequesting: false, // 请求状态
+        success: true,       // 以此判断请求是否成功，不用再以 payload.type 判断
+    }
+    ```
+
+- actions 的引用
+
+    从 reducer 的 state.global.actions 里引用具体 action
+
+    ```js
+    const Example = (props) => {
+        const { dispatch, actions, user, loading } = props
+
+        useEffect(() => {
+            dispatch(actions.example.getMembers(user.orgId))
+        }, [])
+
+        return (
+            <Spin tip="biubiubiu~" spinning={loading}>
+                example
+            </Spin>
+        )
+    }
+
+    function mapStateToProps(state) {
+        const { auth, global, members } = state;
+        return {
+            loading: members.isRequesting,
+            user: auth.user,
+            actions: global.actions,
+            members: members.data
+        };
+    }
+
+    export default connect(mapStateToProps)(Example);
+    ```
+
+- 一般路由配置
+    ```js
+    'use strict';
+    import { Example, } from './containers';
+
+    export default [{
+        type: 'inner',                // 是否在layout 内，如果为outer，则看不到 header、footer、sider等布局，比如登陆页面
+        route: {
+            path: '/example',
+            key: 'example',
+            breadcrumb: '栗子',
+                                      // 不设置 component 则面包屑禁止跳转
+            childRoutes: [{          
+                path: '/e1',          // 自路由不必复写父路由内容，会自动拼接； 则此处组件的实际路由为 /example/e1
+                key: 'e1',          
+                component: Example,
+                breadcrumb: '棒子',
+            }]
+        }
+    }];
+    ```
+- cross-env 的使用限制
+
+    cross-env 可以统一不同操作系统下环境变量的导出方式，不用再在 windows 下写 set；linux 下写 export； 可以统一以 cross-env NODE_ENV=DEV 代替；
+
+    但是这样的话就不能在同一条运行的命令中使用 && 切割，因为会把命令切割为两个环境，则最终拿不到我们设置的变量；
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/routes/attachment/index.js b/code/VideoAccess-VCMP/web/routes/attachment/index.js
new file mode 100644
index 0000000..65061e0
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/routes/attachment/index.js
@@ -0,0 +1,92 @@
+'use strict';
+const request = require('superagent');
+const parse = require('async-busboy');
+const path = require('path')
+const fs = require('fs');
+
+const ext = {
+    project: [".txt", ".dwg", ".doc", ".docx", ".xls", ".xlsx", ".pdf", ".png", ".jpg", ".svg"],
+    report: [".doc", ".docx", ".xls", ".xlsx", ".pdf"],
+    data: [".txt", ".xls", ".xlsx"],
+    image: [".png", ".jpg", ".svg"],
+    three: [".js"],
+    video: [".mp4"],
+    bpmn: [".bpmn", ".bpmn20.xml", ".zip", ".bar"],
+    app: [".apk"]
+}
+
+module.exports = {
+    entry: function (app, router, opts) {
+
+        const getApiRoot = async function (ctx) {
+            const { apiUrl } = opts;
+
+            ctx.status = 200;
+            ctx.body = { root: apiUrl };
+        };
+
+        let upload = async function (ctx, next) {
+            try {
+                const { files } = await parse(ctx.req);
+                const file = files[0];
+                const extname = path.extname(file.filename).toLowerCase();
+                const fileType = ctx.query.type || "image";
+                const fileFolder = ctx.query.fileFolder || 'common';
+                if (ext[fileType].indexOf(extname) < 0) {
+                    ctx.status = 400;
+                    ctx.body = JSON.stringify({ name: 'UploadFailed', message: '文件格式无效' });
+                    return;
+                }
+                const date = new Date().toLocaleDateString();
+                const time = new Date().getTime();
+                let fileName = time + '_' + file.filename;
+                let saveFile = path.join(__dirname, '../../', `/client/assets/files/${fileFolder}`, fileName);
+                const pathUrl = `./client/assets/files/${fileFolder}`;
+
+                const res1 = fs.existsSync(`./client/assets/files/${fileFolder}`);
+                !res1 && fs.mkdirSync(`./client/assets/files/${fileFolder}`);
+                const res = fs.existsSync(pathUrl);
+                !res && fs.mkdirSync(pathUrl);
+                let stream = fs.createWriteStream(saveFile);
+                fs.createReadStream(file.path).pipe(stream);
+                stream.on('error', function (err) {
+                    app.fs.logger.log('error', '[Upload Heatmap]', err);
+                });
+                ctx.status = 200;
+                ctx.body = { filename: path.join(`/assets/files/${fileFolder}`, fileName), name: 'UploadSuccess', message: '上传成功' };
+            } catch (err) {
+                ctx.status = 500;
+                ctx.fs.logger.error(err);
+                ctx.body = { err: 'upload error.' };
+            }
+        }
+
+        let remove = async function (ctx, next) {
+            try {
+                const fkeys = ctx.request.body;
+                let removeUrl = path.join(__dirname, '../../', './client', fkeys.url);
+                const res = fs.existsSync(removeUrl);
+                if (!res) {
+                    ctx.status = 400;
+                    ctx.body = JSON.stringify({ name: 'DeleteFailed', message: '文件地址不存在' });
+                    return;
+                }
+                fs.unlink(removeUrl, function (error) {
+                    if (error) {
+                        console.log(error);
+                    }
+                })
+                ctx.status = 200;
+                ctx.body = { name: 'DeleteSuccess.', message: '删除成功' };
+            } catch (err) {
+                ctx.status = 500;
+                ctx.fs.logger.error(err);
+                ctx.body = { err: 'upload cleanup error.' };
+            }
+        }
+
+        router.get('/api/root', getApiRoot);
+        router.post('/_upload/new', upload);
+        router.delete('/_upload/cleanup', remove);
+    }
+};
diff --git a/code/VideoAccess-VCMP/web/routes/index.js b/code/VideoAccess-VCMP/web/routes/index.js
new file mode 100644
index 0000000..e81bfaa
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/routes/index.js
@@ -0,0 +1,20 @@
+/**
+ * Created by liu.xinyi
+ * on 2016/7/7.
+ */
+'use strict';
+const path = require('path');
+const fs = require('fs');
+
+module.exports = {
+    entry: function (app, router, opts) {
+        fs.readdirSync(__dirname).forEach(function (dir) {
+            if(fs.lstatSync(path.join(__dirname, dir)).isDirectory()){
+                fs.readdirSync(path.join(__dirname, dir)).forEach(function (api) {
+                    require(`./${dir}/${api}`).entry(app, router, opts);
+                    app.fs.logger.log('info', '[Router]', 'Inject api:', dir + '/' + path.basename(api, '.js'));
+                });
+            }
+        });
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/server.js b/code/VideoAccess-VCMP/web/server.js
new file mode 100644
index 0000000..9e2474a
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/server.js
@@ -0,0 +1,8 @@
+'use strict';
+/*jslint node:true*/
+//from koa
+
+const scaffold = require('fs-web-server-scaffold');
+const config = require('./config.js');
+
+module.exports = scaffold(config);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/typings/node/node.d.ts b/code/VideoAccess-VCMP/web/typings/node/node.d.ts
new file mode 100644
index 0000000..bad534c
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/typings/node/node.d.ts
@@ -0,0 +1,2599 @@
+// Type definitions for Node.js v6.x
+// Project: http://nodejs.org/
+// Definitions by: Microsoft TypeScript <http://typescriptlang.org>, DefinitelyTyped <https://github.com/DefinitelyTyped/DefinitelyTyped>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/************************************************
+*                                               *
+*               Node.js v6.x API                *
+*                                               *
+************************************************/
+
+interface Error {
+    stack?: string;
+}
+
+interface ErrorConstructor {
+    captureStackTrace(targetObject: Object, constructorOpt?: Function): void;
+    stackTraceLimit: number;
+}
+
+// compat for TypeScript 1.8
+// if you use with --target es3 or --target es5 and use below definitions,
+// use the lib.es6.d.ts that is bundled with TypeScript 1.8.
+interface MapConstructor { }
+interface WeakMapConstructor { }
+interface SetConstructor { }
+interface WeakSetConstructor { }
+
+/************************************************
+*                                               *
+*                   GLOBAL                      *
+*                                               *
+************************************************/
+declare var process: NodeJS.Process;
+declare var global: NodeJS.Global;
+
+declare var __filename: string;
+declare var __dirname: string;
+
+declare function setTimeout(callback: (...args: any[]) => void, ms: number, ...args: any[]): NodeJS.Timer;
+declare function clearTimeout(timeoutId: NodeJS.Timer): void;
+declare function setInterval(callback: (...args: any[]) => void, ms: number, ...args: any[]): NodeJS.Timer;
+declare function clearInterval(intervalId: NodeJS.Timer): void;
+declare function setImmediate(callback: (...args: any[]) => void, ...args: any[]): any;
+declare function clearImmediate(immediateId: any): void;
+
+interface NodeRequireFunction {
+    (id: string): any;
+}
+
+interface NodeRequire extends NodeRequireFunction {
+    resolve(id: string): string;
+    cache: any;
+    extensions: any;
+    main: any;
+}
+
+declare var require: NodeRequire;
+
+interface NodeModule {
+    exports: any;
+    require: NodeRequireFunction;
+    id: string;
+    filename: string;
+    loaded: boolean;
+    parent: any;
+    children: any[];
+}
+
+declare var module: NodeModule;
+
+// Same as module.exports
+declare var exports: any;
+declare var SlowBuffer: {
+    new (str: string, encoding?: string): Buffer;
+    new (size: number): Buffer;
+    new (size: Uint8Array): Buffer;
+    new (array: any[]): Buffer;
+    prototype: Buffer;
+    isBuffer(obj: any): boolean;
+    byteLength(string: string, encoding?: string): number;
+    concat(list: Buffer[], totalLength?: number): Buffer;
+};
+
+
+// Buffer class
+type BufferEncoding = "ascii" | "utf8" | "utf16le" | "ucs2" | "binary" | "hex";
+interface Buffer extends NodeBuffer { }
+
+/**
+ * Raw data is stored in instances of the Buffer class.
+ * A Buffer is similar to an array of integers but corresponds to a raw memory allocation outside the V8 heap.  A Buffer cannot be resized.
+ * Valid string encodings: 'ascii'|'utf8'|'utf16le'|'ucs2'(alias of 'utf16le')|'base64'|'binary'(deprecated)|'hex'
+ */
+declare var Buffer: {
+    /**
+     * Allocates a new buffer containing the given {str}.
+     *
+     * @param str String to store in buffer.
+     * @param encoding encoding to use, optional.  Default is 'utf8'
+     */
+    new (str: string, encoding?: string): Buffer;
+    /**
+     * Allocates a new buffer of {size} octets.
+     *
+     * @param size count of octets to allocate.
+     */
+    new (size: number): Buffer;
+    /**
+     * Allocates a new buffer containing the given {array} of octets.
+     *
+     * @param array The octets to store.
+     */
+    new (array: Uint8Array): Buffer;
+    /**
+     * Produces a Buffer backed by the same allocated memory as
+     * the given {ArrayBuffer}.
+     *
+     *
+     * @param arrayBuffer The ArrayBuffer with which to share memory.
+     */
+    new (arrayBuffer: ArrayBuffer): Buffer;
+    /**
+     * Allocates a new buffer containing the given {array} of octets.
+     *
+     * @param array The octets to store.
+     */
+    new (array: any[]): Buffer;
+    /**
+     * Copies the passed {buffer} data onto a new {Buffer} instance.
+     *
+     * @param buffer The buffer to copy.
+     */
+    new (buffer: Buffer): Buffer;
+    prototype: Buffer;
+    /**
+     * Allocates a new Buffer using an {array} of octets.
+     *
+     * @param array
+     */
+    from(array: any[]): Buffer;
+    /**
+     * When passed a reference to the .buffer property of a TypedArray instance,
+     * the newly created Buffer will share the same allocated memory as the TypedArray.
+     * The optional {byteOffset} and {length} arguments specify a memory range
+     * within the {arrayBuffer} that will be shared by the Buffer.
+     *
+     * @param arrayBuffer The .buffer property of a TypedArray or a new ArrayBuffer()
+     * @param byteOffset
+     * @param length
+     */
+    from(arrayBuffer: ArrayBuffer, byteOffset?: number, length?: number): Buffer;
+    /**
+     * Copies the passed {buffer} data onto a new Buffer instance.
+     *
+     * @param buffer
+     */
+    from(buffer: Buffer): Buffer;
+    /**
+     * Creates a new Buffer containing the given JavaScript string {str}.
+     * If provided, the {encoding} parameter identifies the character encoding.
+     * If not provided, {encoding} defaults to 'utf8'.
+     *
+     * @param str
+     */
+    from(str: string, encoding?: string): Buffer;
+    /**
+     * Returns true if {obj} is a Buffer
+     *
+     * @param obj object to test.
+     */
+    isBuffer(obj: any): obj is Buffer;
+    /**
+     * Returns true if {encoding} is a valid encoding argument.
+     * Valid string encodings in Node 0.12: 'ascii'|'utf8'|'utf16le'|'ucs2'(alias of 'utf16le')|'base64'|'binary'(deprecated)|'hex'
+     *
+     * @param encoding string to test.
+     */
+    isEncoding(encoding: string): boolean;
+    /**
+     * Gives the actual byte length of a string. encoding defaults to 'utf8'.
+     * This is not the same as String.prototype.length since that returns the number of characters in a string.
+     *
+     * @param string string to test.
+     * @param encoding encoding used to evaluate (defaults to 'utf8')
+     */
+    byteLength(string: string, encoding?: string): number;
+    /**
+     * Returns a buffer which is the result of concatenating all the buffers in the list together.
+     *
+     * If the list has no items, or if the totalLength is 0, then it returns a zero-length buffer.
+     * If the list has exactly one item, then the first item of the list is returned.
+     * If the list has more than one item, then a new Buffer is created.
+     *
+     * @param list An array of Buffer objects to concatenate
+     * @param totalLength Total length of the buffers when concatenated.
+     *   If totalLength is not provided, it is read from the buffers in the list. However, this adds an additional loop to the function, so it is faster to provide the length explicitly.
+     */
+    concat(list: Buffer[], totalLength?: number): Buffer;
+    /**
+     * The same as buf1.compare(buf2).
+     */
+    compare(buf1: Buffer, buf2: Buffer): number;
+    /**
+     * Allocates a new buffer of {size} octets.
+     *
+     * @param size count of octets to allocate.
+     * @param fill if specified, buffer will be initialized by calling buf.fill(fill).
+     *    If parameter is omitted, buffer will be filled with zeros.
+     * @param encoding encoding used for call to buf.fill while initalizing
+     */
+    alloc(size: number, fill?: string | Buffer | number, encoding?: string): Buffer;
+    /**
+     * Allocates a new buffer of {size} octets, leaving memory not initialized, so the contents
+     * of the newly created Buffer are unknown and may contain sensitive data.
+     *
+     * @param size count of octets to allocate
+     */
+    allocUnsafe(size: number): Buffer;
+    /**
+     * Allocates a new non-pooled buffer of {size} octets, leaving memory not initialized, so the contents
+     * of the newly created Buffer are unknown and may contain sensitive data.
+     *
+     * @param size count of octets to allocate
+     */
+    allocUnsafeSlow(size: number): Buffer;
+};
+
+/************************************************
+*                                               *
+*               GLOBAL INTERFACES               *
+*                                               *
+************************************************/
+declare namespace NodeJS {
+    export interface ErrnoException extends Error {
+        errno?: number;
+        code?: string;
+        path?: string;
+        syscall?: string;
+        stack?: string;
+    }
+
+    export interface EventEmitter {
+        addListener(event: string, listener: Function): this;
+        on(event: string, listener: Function): this;
+        once(event: string, listener: Function): this;
+        removeListener(event: string, listener: Function): this;
+        removeAllListeners(event?: string): this;
+        setMaxListeners(n: number): this;
+        getMaxListeners(): number;
+        listeners(event: string): Function[];
+        emit(event: string, ...args: any[]): boolean;
+        listenerCount(type: string): number;
+    }
+
+    export interface ReadableStream extends EventEmitter {
+        readable: boolean;
+        read(size?: number): string | Buffer;
+        setEncoding(encoding: string): void;
+        pause(): void;
+        resume(): void;
+        pipe<T extends WritableStream>(destination: T, options?: { end?: boolean; }): T;
+        unpipe<T extends WritableStream>(destination?: T): void;
+        unshift(chunk: string): void;
+        unshift(chunk: Buffer): void;
+        wrap(oldStream: ReadableStream): ReadableStream;
+    }
+
+    export interface WritableStream extends EventEmitter {
+        writable: boolean;
+        write(buffer: Buffer | string, cb?: Function): boolean;
+        write(str: string, encoding?: string, cb?: Function): boolean;
+        end(): void;
+        end(buffer: Buffer, cb?: Function): void;
+        end(str: string, cb?: Function): void;
+        end(str: string, encoding?: string, cb?: Function): void;
+    }
+
+    export interface ReadWriteStream extends ReadableStream, WritableStream { }
+
+    export interface Events extends EventEmitter { }
+
+    export interface Domain extends Events {
+        run(fn: Function): void;
+        add(emitter: Events): void;
+        remove(emitter: Events): void;
+        bind(cb: (err: Error, data: any) => any): any;
+        intercept(cb: (data: any) => any): any;
+        dispose(): void;
+
+        addListener(event: string, listener: Function): this;
+        on(event: string, listener: Function): this;
+        once(event: string, listener: Function): this;
+        removeListener(event: string, listener: Function): this;
+        removeAllListeners(event?: string): this;
+    }
+
+    export interface MemoryUsage {
+        rss: number;
+        heapTotal: number;
+        heapUsed: number;
+    }
+
+    export interface Process extends EventEmitter {
+        stdout: WritableStream;
+        stderr: WritableStream;
+        stdin: ReadableStream;
+        argv: string[];
+        execArgv: string[];
+        execPath: string;
+        abort(): void;
+        chdir(directory: string): void;
+        cwd(): string;
+        env: any;
+        exit(code?: number): void;
+        getgid(): number;
+        setgid(id: number): void;
+        setgid(id: string): void;
+        getuid(): number;
+        setuid(id: number): void;
+        setuid(id: string): void;
+        version: string;
+        versions: {
+            http_parser: string;
+            node: string;
+            v8: string;
+            ares: string;
+            uv: string;
+            zlib: string;
+            modules: string;
+            openssl: string;
+        };
+        config: {
+            target_defaults: {
+                cflags: any[];
+                default_configuration: string;
+                defines: string[];
+                include_dirs: string[];
+                libraries: string[];
+            };
+            variables: {
+                clang: number;
+                host_arch: string;
+                node_install_npm: boolean;
+                node_install_waf: boolean;
+                node_prefix: string;
+                node_shared_openssl: boolean;
+                node_shared_v8: boolean;
+                node_shared_zlib: boolean;
+                node_use_dtrace: boolean;
+                node_use_etw: boolean;
+                node_use_openssl: boolean;
+                target_arch: string;
+                v8_no_strict_aliasing: number;
+                v8_use_snapshot: boolean;
+                visibility: string;
+            };
+        };
+        kill(pid: number, signal?: string | number): void;
+        pid: number;
+        title: string;
+        arch: string;
+        platform: string;
+        memoryUsage(): MemoryUsage;
+        nextTick(callback: Function): void;
+        umask(mask?: number): number;
+        uptime(): number;
+        hrtime(time?: number[]): number[];
+        domain: Domain;
+
+        // Worker
+        send?(message: any, sendHandle?: any): void;
+        disconnect(): void;
+        connected: boolean;
+    }
+
+    export interface Global {
+        Array: typeof Array;
+        ArrayBuffer: typeof ArrayBuffer;
+        Boolean: typeof Boolean;
+        Buffer: typeof Buffer;
+        DataView: typeof DataView;
+        Date: typeof Date;
+        Error: typeof Error;
+        EvalError: typeof EvalError;
+        Float32Array: typeof Float32Array;
+        Float64Array: typeof Float64Array;
+        Function: typeof Function;
+        GLOBAL: Global;
+        Infinity: typeof Infinity;
+        Int16Array: typeof Int16Array;
+        Int32Array: typeof Int32Array;
+        Int8Array: typeof Int8Array;
+        Intl: typeof Intl;
+        JSON: typeof JSON;
+        Map: MapConstructor;
+        Math: typeof Math;
+        NaN: typeof NaN;
+        Number: typeof Number;
+        Object: typeof Object;
+        Promise: Function;
+        RangeError: typeof RangeError;
+        ReferenceError: typeof ReferenceError;
+        RegExp: typeof RegExp;
+        Set: SetConstructor;
+        String: typeof String;
+        Symbol: Function;
+        SyntaxError: typeof SyntaxError;
+        TypeError: typeof TypeError;
+        URIError: typeof URIError;
+        Uint16Array: typeof Uint16Array;
+        Uint32Array: typeof Uint32Array;
+        Uint8Array: typeof Uint8Array;
+        Uint8ClampedArray: Function;
+        WeakMap: WeakMapConstructor;
+        WeakSet: WeakSetConstructor;
+        clearImmediate: (immediateId: any) => void;
+        clearInterval: (intervalId: NodeJS.Timer) => void;
+        clearTimeout: (timeoutId: NodeJS.Timer) => void;
+        console: typeof console;
+        decodeURI: typeof decodeURI;
+        decodeURIComponent: typeof decodeURIComponent;
+        encodeURI: typeof encodeURI;
+        encodeURIComponent: typeof encodeURIComponent;
+        escape: (str: string) => string;
+        eval: typeof eval;
+        global: Global;
+        isFinite: typeof isFinite;
+        isNaN: typeof isNaN;
+        parseFloat: typeof parseFloat;
+        parseInt: typeof parseInt;
+        process: Process;
+        root: Global;
+        setImmediate: (callback: (...args: any[]) => void, ...args: any[]) => any;
+        setInterval: (callback: (...args: any[]) => void, ms: number, ...args: any[]) => NodeJS.Timer;
+        setTimeout: (callback: (...args: any[]) => void, ms: number, ...args: any[]) => NodeJS.Timer;
+        undefined: typeof undefined;
+        unescape: (str: string) => string;
+        gc: () => void;
+        v8debug?: any;
+    }
+
+    export interface Timer {
+        ref(): void;
+        unref(): void;
+    }
+}
+
+/**
+ * @deprecated
+ */
+interface NodeBuffer extends Uint8Array {
+    write(string: string, offset?: number, length?: number, encoding?: string): number;
+    toString(encoding?: string, start?: number, end?: number): string;
+    toJSON(): any;
+    equals(otherBuffer: Buffer): boolean;
+    compare(otherBuffer: Buffer): number;
+    copy(targetBuffer: Buffer, targetStart?: number, sourceStart?: number, sourceEnd?: number): number;
+    slice(start?: number, end?: number): Buffer;
+    writeUIntLE(value: number, offset: number, byteLength: number, noAssert?: boolean): number;
+    writeUIntBE(value: number, offset: number, byteLength: number, noAssert?: boolean): number;
+    writeIntLE(value: number, offset: number, byteLength: number, noAssert?: boolean): number;
+    writeIntBE(value: number, offset: number, byteLength: number, noAssert?: boolean): number;
+    readUIntLE(offset: number, byteLength: number, noAssert?: boolean): number;
+    readUIntBE(offset: number, byteLength: number, noAssert?: boolean): number;
+    readIntLE(offset: number, byteLength: number, noAssert?: boolean): number;
+    readIntBE(offset: number, byteLength: number, noAssert?: boolean): number;
+    readUInt8(offset: number, noAssert?: boolean): number;
+    readUInt16LE(offset: number, noAssert?: boolean): number;
+    readUInt16BE(offset: number, noAssert?: boolean): number;
+    readUInt32LE(offset: number, noAssert?: boolean): number;
+    readUInt32BE(offset: number, noAssert?: boolean): number;
+    readInt8(offset: number, noAssert?: boolean): number;
+    readInt16LE(offset: number, noAssert?: boolean): number;
+    readInt16BE(offset: number, noAssert?: boolean): number;
+    readInt32LE(offset: number, noAssert?: boolean): number;
+    readInt32BE(offset: number, noAssert?: boolean): number;
+    readFloatLE(offset: number, noAssert?: boolean): number;
+    readFloatBE(offset: number, noAssert?: boolean): number;
+    readDoubleLE(offset: number, noAssert?: boolean): number;
+    readDoubleBE(offset: number, noAssert?: boolean): number;
+    writeUInt8(value: number, offset: number, noAssert?: boolean): number;
+    writeUInt16LE(value: number, offset: number, noAssert?: boolean): number;
+    writeUInt16BE(value: number, offset: number, noAssert?: boolean): number;
+    writeUInt32LE(value: number, offset: number, noAssert?: boolean): number;
+    writeUInt32BE(value: number, offset: number, noAssert?: boolean): number;
+    writeInt8(value: number, offset: number, noAssert?: boolean): number;
+    writeInt16LE(value: number, offset: number, noAssert?: boolean): number;
+    writeInt16BE(value: number, offset: number, noAssert?: boolean): number;
+    writeInt32LE(value: number, offset: number, noAssert?: boolean): number;
+    writeInt32BE(value: number, offset: number, noAssert?: boolean): number;
+    writeFloatLE(value: number, offset: number, noAssert?: boolean): number;
+    writeFloatBE(value: number, offset: number, noAssert?: boolean): number;
+    writeDoubleLE(value: number, offset: number, noAssert?: boolean): number;
+    writeDoubleBE(value: number, offset: number, noAssert?: boolean): number;
+    fill(value: any, offset?: number, end?: number): this;
+    // TODO: encoding param
+    indexOf(value: string | number | Buffer, byteOffset?: number): number;
+    // TODO: entries
+    // TODO: includes
+    // TODO: keys
+    // TODO: values
+}
+
+/************************************************
+*                                               *
+*                   MODULES                     *
+*                                               *
+************************************************/
+declare module "buffer" {
+    export var INSPECT_MAX_BYTES: number;
+    var BuffType: typeof Buffer;
+    var SlowBuffType: typeof SlowBuffer;
+    export { BuffType as Buffer, SlowBuffType as SlowBuffer };
+}
+
+declare module "querystring" {
+    export interface StringifyOptions {
+        encodeURIComponent?: Function;
+    }
+
+    export interface ParseOptions {
+        maxKeys?: number;
+        decodeURIComponent?: Function;
+    }
+
+    export function stringify<T>(obj: T, sep?: string, eq?: string, options?: StringifyOptions): string;
+    export function parse(str: string, sep?: string, eq?: string, options?: ParseOptions): any;
+    export function parse<T extends {}>(str: string, sep?: string, eq?: string, options?: ParseOptions): T;
+    export function escape(str: string): string;
+    export function unescape(str: string): string;
+}
+
+declare module "events" {
+    export class EventEmitter implements NodeJS.EventEmitter {
+        static EventEmitter: EventEmitter;
+        static listenerCount(emitter: EventEmitter, event: string): number; // deprecated
+        static defaultMaxListeners: number;
+
+        addListener(event: string, listener: Function): this;
+        on(event: string, listener: Function): this;
+        once(event: string, listener: Function): this;
+        prependListener(event: string, listener: Function): this;
+        prependOnceListener(event: string, listener: Function): this;
+        removeListener(event: string, listener: Function): this;
+        removeAllListeners(event?: string): this;
+        setMaxListeners(n: number): this;
+        getMaxListeners(): number;
+        listeners(event: string): Function[];
+        emit(event: string, ...args: any[]): boolean;
+        eventNames(): string[];
+        listenerCount(type: string): number;
+    }
+}
+
+declare module "http" {
+    import * as events from "events";
+    import * as net from "net";
+    import * as stream from "stream";
+
+    export interface RequestOptions {
+        protocol?: string;
+        host?: string;
+        hostname?: string;
+        family?: number;
+        port?: number;
+        localAddress?: string;
+        socketPath?: string;
+        method?: string;
+        path?: string;
+        headers?: { [key: string]: any };
+        auth?: string;
+        agent?: Agent | boolean;
+    }
+
+    export interface Server extends events.EventEmitter, net.Server {
+        setTimeout(msecs: number, callback: Function): void;
+        maxHeadersCount: number;
+        timeout: number;
+    }
+    /**
+     * @deprecated Use IncomingMessage
+     */
+    export interface ServerRequest extends IncomingMessage {
+        connection: net.Socket;
+    }
+    export interface ServerResponse extends events.EventEmitter, stream.Writable {
+        // Extended base methods
+        write(buffer: Buffer): boolean;
+        write(buffer: Buffer, cb?: Function): boolean;
+        write(str: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, fd?: string): boolean;
+
+        writeContinue(): void;
+        writeHead(statusCode: number, reasonPhrase?: string, headers?: any): void;
+        writeHead(statusCode: number, headers?: any): void;
+        statusCode: number;
+        statusMessage: string;
+        headersSent: boolean;
+        setHeader(name: string, value: string | string[]): void;
+        setTimeout(msecs: number, callback: Function): ServerResponse;
+        sendDate: boolean;
+        getHeader(name: string): string;
+        removeHeader(name: string): void;
+        write(chunk: any, encoding?: string): any;
+        addTrailers(headers: any): void;
+
+        // Extended base methods
+        end(): void;
+        end(buffer: Buffer, cb?: Function): void;
+        end(str: string, cb?: Function): void;
+        end(str: string, encoding?: string, cb?: Function): void;
+        end(data?: any, encoding?: string): void;
+    }
+    export interface ClientRequest extends events.EventEmitter, stream.Writable {
+        // Extended base methods
+        write(buffer: Buffer): boolean;
+        write(buffer: Buffer, cb?: Function): boolean;
+        write(str: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, fd?: string): boolean;
+
+        write(chunk: any, encoding?: string): void;
+        abort(): void;
+        setTimeout(timeout: number, callback?: Function): void;
+        setNoDelay(noDelay?: boolean): void;
+        setSocketKeepAlive(enable?: boolean, initialDelay?: number): void;
+
+        setHeader(name: string, value: string | string[]): void;
+        getHeader(name: string): string;
+        removeHeader(name: string): void;
+        addTrailers(headers: any): void;
+
+        // Extended base methods
+        end(): void;
+        end(buffer: Buffer, cb?: Function): void;
+        end(str: string, cb?: Function): void;
+        end(str: string, encoding?: string, cb?: Function): void;
+        end(data?: any, encoding?: string): void;
+    }
+    export interface IncomingMessage extends events.EventEmitter, stream.Readable {
+        httpVersion: string;
+        headers: any;
+        rawHeaders: string[];
+        trailers: any;
+        rawTrailers: any;
+        setTimeout(msecs: number, callback: Function): NodeJS.Timer;
+        /**
+         * Only valid for request obtained from http.Server.
+         */
+        method?: string;
+        /**
+         * Only valid for request obtained from http.Server.
+         */
+        url?: string;
+        /**
+         * Only valid for response obtained from http.ClientRequest.
+         */
+        statusCode?: number;
+        /**
+         * Only valid for response obtained from http.ClientRequest.
+         */
+        statusMessage?: string;
+        socket: net.Socket;
+    }
+    /**
+     * @deprecated Use IncomingMessage
+     */
+    export interface ClientResponse extends IncomingMessage { }
+
+    export interface AgentOptions {
+        /**
+         * Keep sockets around in a pool to be used by other requests in the future. Default = false
+         */
+        keepAlive?: boolean;
+        /**
+         * When using HTTP KeepAlive, how often to send TCP KeepAlive packets over sockets being kept alive. Default = 1000.
+         * Only relevant if keepAlive is set to true.
+         */
+        keepAliveMsecs?: number;
+        /**
+         * Maximum number of sockets to allow per host. Default for Node 0.10 is 5, default for Node 0.12 is Infinity
+         */
+        maxSockets?: number;
+        /**
+         * Maximum number of sockets to leave open in a free state. Only relevant if keepAlive is set to true. Default = 256.
+         */
+        maxFreeSockets?: number;
+    }
+
+    export class Agent {
+        maxSockets: number;
+        sockets: any;
+        requests: any;
+
+        constructor(opts?: AgentOptions);
+
+        /**
+         * Destroy any sockets that are currently in use by the agent.
+         * It is usually not necessary to do this. However, if you are using an agent with KeepAlive enabled,
+         * then it is best to explicitly shut down the agent when you know that it will no longer be used. Otherwise,
+         * sockets may hang open for quite a long time before the server terminates them.
+         */
+        destroy(): void;
+    }
+
+    export var METHODS: string[];
+
+    export var STATUS_CODES: {
+        [errorCode: number]: string;
+        [errorCode: string]: string;
+    };
+    export function createServer(requestListener?: (request: IncomingMessage, response: ServerResponse) => void): Server;
+    export function createClient(port?: number, host?: string): any;
+    export function request(options: RequestOptions, callback?: (res: IncomingMessage) => void): ClientRequest;
+    export function get(options: any, callback?: (res: IncomingMessage) => void): ClientRequest;
+    export var globalAgent: Agent;
+}
+
+declare module "cluster" {
+    import * as child from "child_process";
+    import * as events from "events";
+
+    export interface ClusterSettings {
+        exec?: string;
+        args?: string[];
+        silent?: boolean;
+    }
+
+    export interface Address {
+        address: string;
+        port: number;
+        addressType: string;
+    }
+
+    export class Worker extends events.EventEmitter {
+        id: string;
+        process: child.ChildProcess;
+        suicide: boolean;
+        send(message: any, sendHandle?: any): void;
+        kill(signal?: string): void;
+        destroy(signal?: string): void;
+        disconnect(): void;
+        isConnected(): boolean;
+        isDead(): boolean;
+    }
+
+    export var settings: ClusterSettings;
+    export var isMaster: boolean;
+    export var isWorker: boolean;
+    export function setupMaster(settings?: ClusterSettings): void;
+    export function fork(env?: any): Worker;
+    export function disconnect(callback?: Function): void;
+    export var worker: Worker;
+    export var workers: {
+        [index: string]: Worker
+    };
+
+    // Event emitter
+    export function addListener(event: string, listener: Function): void;
+    export function on(event: "disconnect", listener: (worker: Worker) => void): void;
+    export function on(event: "exit", listener: (worker: Worker, code: number, signal: string) => void): void;
+    export function on(event: "fork", listener: (worker: Worker) => void): void;
+    export function on(event: "listening", listener: (worker: Worker, address: any) => void): void;
+    export function on(event: "message", listener: (worker: Worker, message: any) => void): void;
+    export function on(event: "online", listener: (worker: Worker) => void): void;
+    export function on(event: "setup", listener: (settings: any) => void): void;
+    export function on(event: string, listener: Function): any;
+    export function once(event: string, listener: Function): void;
+    export function removeListener(event: string, listener: Function): void;
+    export function removeAllListeners(event?: string): void;
+    export function setMaxListeners(n: number): void;
+    export function listeners(event: string): Function[];
+    export function emit(event: string, ...args: any[]): boolean;
+}
+
+declare module "zlib" {
+    import * as stream from "stream";
+    export interface ZlibOptions { chunkSize?: number; windowBits?: number; level?: number; memLevel?: number; strategy?: number; dictionary?: any; }
+
+    export interface Gzip extends stream.Transform { }
+    export interface Gunzip extends stream.Transform { }
+    export interface Deflate extends stream.Transform { }
+    export interface Inflate extends stream.Transform { }
+    export interface DeflateRaw extends stream.Transform { }
+    export interface InflateRaw extends stream.Transform { }
+    export interface Unzip extends stream.Transform { }
+
+    export function createGzip(options?: ZlibOptions): Gzip;
+    export function createGunzip(options?: ZlibOptions): Gunzip;
+    export function createDeflate(options?: ZlibOptions): Deflate;
+    export function createInflate(options?: ZlibOptions): Inflate;
+    export function createDeflateRaw(options?: ZlibOptions): DeflateRaw;
+    export function createInflateRaw(options?: ZlibOptions): InflateRaw;
+    export function createUnzip(options?: ZlibOptions): Unzip;
+
+    export function deflate(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function deflateSync(buf: Buffer, options?: ZlibOptions): any;
+    export function deflateRaw(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function deflateRawSync(buf: Buffer, options?: ZlibOptions): any;
+    export function gzip(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function gzipSync(buf: Buffer, options?: ZlibOptions): any;
+    export function gunzip(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function gunzipSync(buf: Buffer, options?: ZlibOptions): any;
+    export function inflate(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function inflateSync(buf: Buffer, options?: ZlibOptions): any;
+    export function inflateRaw(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function inflateRawSync(buf: Buffer, options?: ZlibOptions): any;
+    export function unzip(buf: Buffer, callback: (error: Error, result: any) => void): void;
+    export function unzipSync(buf: Buffer, options?: ZlibOptions): any;
+
+    // Constants
+    export var Z_NO_FLUSH: number;
+    export var Z_PARTIAL_FLUSH: number;
+    export var Z_SYNC_FLUSH: number;
+    export var Z_FULL_FLUSH: number;
+    export var Z_FINISH: number;
+    export var Z_BLOCK: number;
+    export var Z_TREES: number;
+    export var Z_OK: number;
+    export var Z_STREAM_END: number;
+    export var Z_NEED_DICT: number;
+    export var Z_ERRNO: number;
+    export var Z_STREAM_ERROR: number;
+    export var Z_DATA_ERROR: number;
+    export var Z_MEM_ERROR: number;
+    export var Z_BUF_ERROR: number;
+    export var Z_VERSION_ERROR: number;
+    export var Z_NO_COMPRESSION: number;
+    export var Z_BEST_SPEED: number;
+    export var Z_BEST_COMPRESSION: number;
+    export var Z_DEFAULT_COMPRESSION: number;
+    export var Z_FILTERED: number;
+    export var Z_HUFFMAN_ONLY: number;
+    export var Z_RLE: number;
+    export var Z_FIXED: number;
+    export var Z_DEFAULT_STRATEGY: number;
+    export var Z_BINARY: number;
+    export var Z_TEXT: number;
+    export var Z_ASCII: number;
+    export var Z_UNKNOWN: number;
+    export var Z_DEFLATED: number;
+    export var Z_NULL: number;
+}
+
+declare module "os" {
+    export interface CpuInfo {
+        model: string;
+        speed: number;
+        times: {
+            user: number;
+            nice: number;
+            sys: number;
+            idle: number;
+            irq: number;
+        };
+    }
+
+    export interface NetworkInterfaceInfo {
+        address: string;
+        netmask: string;
+        family: string;
+        mac: string;
+        internal: boolean;
+    }
+
+    export function tmpdir(): string;
+    export function homedir(): string;
+    export function endianness(): "BE" | "LE";
+    export function hostname(): string;
+    export function type(): string;
+    export function platform(): string;
+    export function arch(): string;
+    export function release(): string;
+    export function uptime(): number;
+    export function loadavg(): number[];
+    export function totalmem(): number;
+    export function freemem(): number;
+    export function cpus(): CpuInfo[];
+    export function networkInterfaces(): { [index: string]: NetworkInterfaceInfo[] };
+    export var EOL: string;
+}
+
+declare module "https" {
+    import * as tls from "tls";
+    import * as events from "events";
+    import * as http from "http";
+
+    export interface ServerOptions {
+        pfx?: any;
+        key?: any;
+        passphrase?: string;
+        cert?: any;
+        ca?: any;
+        crl?: any;
+        ciphers?: string;
+        honorCipherOrder?: boolean;
+        requestCert?: boolean;
+        rejectUnauthorized?: boolean;
+        NPNProtocols?: any;
+        SNICallback?: (servername: string) => any;
+    }
+
+    export interface RequestOptions extends http.RequestOptions {
+        pfx?: any;
+        key?: any;
+        passphrase?: string;
+        cert?: any;
+        ca?: any;
+        ciphers?: string;
+        rejectUnauthorized?: boolean;
+        secureProtocol?: string;
+    }
+
+    export interface Agent extends http.Agent { }
+
+    export interface AgentOptions extends http.AgentOptions {
+        maxCachedSessions?: number;
+    }
+
+    export var Agent: {
+        new (options?: AgentOptions): Agent;
+    };
+    export interface Server extends tls.Server { }
+    export function createServer(options: ServerOptions, requestListener?: Function): Server;
+    export function request(options: RequestOptions, callback?: (res: http.IncomingMessage) => void): http.ClientRequest;
+    export function get(options: RequestOptions, callback?: (res: http.IncomingMessage) => void): http.ClientRequest;
+    export var globalAgent: Agent;
+}
+
+declare module "punycode" {
+    export function decode(string: string): string;
+    export function encode(string: string): string;
+    export function toUnicode(domain: string): string;
+    export function toASCII(domain: string): string;
+    export var ucs2: ucs2;
+    interface ucs2 {
+        decode(string: string): number[];
+        encode(codePoints: number[]): string;
+    }
+    export var version: any;
+}
+
+declare module "repl" {
+    import * as stream from "stream";
+    import * as events from "events";
+
+    export interface ReplOptions {
+        prompt?: string;
+        input?: NodeJS.ReadableStream;
+        output?: NodeJS.WritableStream;
+        terminal?: boolean;
+        eval?: Function;
+        useColors?: boolean;
+        useGlobal?: boolean;
+        ignoreUndefined?: boolean;
+        writer?: Function;
+    }
+    export function start(options: ReplOptions): events.EventEmitter;
+}
+
+declare module "readline" {
+    import * as events from "events";
+    import * as stream from "stream";
+
+    export interface Key {
+        sequence?: string;
+        name?: string;
+        ctrl?: boolean;
+        meta?: boolean;
+        shift?: boolean;
+    }
+
+    export interface ReadLine extends events.EventEmitter {
+        setPrompt(prompt: string): void;
+        prompt(preserveCursor?: boolean): void;
+        question(query: string, callback: (answer: string) => void): void;
+        pause(): ReadLine;
+        resume(): ReadLine;
+        close(): void;
+        write(data: string | Buffer, key?: Key): void;
+    }
+
+    export interface Completer {
+        (line: string): CompleterResult;
+        (line: string, callback: (err: any, result: CompleterResult) => void): any;
+    }
+
+    export interface CompleterResult {
+        completions: string[];
+        line: string;
+    }
+
+    export interface ReadLineOptions {
+        input: NodeJS.ReadableStream;
+        output?: NodeJS.WritableStream;
+        completer?: Completer;
+        terminal?: boolean;
+        historySize?: number;
+    }
+
+    export function createInterface(input: NodeJS.ReadableStream, output?: NodeJS.WritableStream, completer?: Completer, terminal?: boolean): ReadLine;
+    export function createInterface(options: ReadLineOptions): ReadLine;
+
+    export function cursorTo(stream: NodeJS.WritableStream, x: number, y: number): void;
+    export function moveCursor(stream: NodeJS.WritableStream, dx: number | string, dy: number | string): void;
+    export function clearLine(stream: NodeJS.WritableStream, dir: number): void;
+    export function clearScreenDown(stream: NodeJS.WritableStream): void;
+}
+
+declare module "vm" {
+    export interface Context { }
+    export interface ScriptOptions {
+        filename?: string;
+        lineOffset?: number;
+        columnOffset?: number;
+        displayErrors?: boolean;
+        timeout?: number;
+        cachedData?: Buffer;
+        produceCachedData?: boolean;
+    }
+    export interface RunningScriptOptions {
+        filename?: string;
+        lineOffset?: number;
+        columnOffset?: number;
+        displayErrors?: boolean;
+        timeout?: number;
+    }
+    export class Script {
+        constructor(code: string, options?: ScriptOptions);
+        runInContext(contextifiedSandbox: Context, options?: RunningScriptOptions): any;
+        runInNewContext(sandbox?: Context, options?: RunningScriptOptions): any;
+        runInThisContext(options?: RunningScriptOptions): any;
+    }
+    export function createContext(sandbox?: Context): Context;
+    export function isContext(sandbox: Context): boolean;
+    export function runInContext(code: string, contextifiedSandbox: Context, options?: RunningScriptOptions): any;
+    export function runInDebugContext(code: string): any;
+    export function runInNewContext(code: string, sandbox?: Context, options?: RunningScriptOptions): any;
+    export function runInThisContext(code: string, options?: RunningScriptOptions): any;
+}
+
+declare module "child_process" {
+    import * as events from "events";
+    import * as stream from "stream";
+
+    export interface ChildProcess extends events.EventEmitter {
+        stdin: stream.Writable;
+        stdout: stream.Readable;
+        stderr: stream.Readable;
+        stdio: [stream.Writable, stream.Readable, stream.Readable];
+        pid: number;
+        kill(signal?: string): void;
+        send(message: any, sendHandle?: any): void;
+        connected: boolean;
+        disconnect(): void;
+        unref(): void;
+        ref(): void;
+    }
+
+    export interface SpawnOptions {
+        cwd?: string;
+        env?: any;
+        stdio?: any;
+        detached?: boolean;
+        uid?: number;
+        gid?: number;
+        shell?: boolean | string;
+    }
+    export function spawn(command: string, args?: string[], options?: SpawnOptions): ChildProcess;
+
+    export interface ExecOptions {
+        cwd?: string;
+        env?: any;
+        shell?: string;
+        timeout?: number;
+        maxBuffer?: number;
+        killSignal?: string;
+        uid?: number;
+        gid?: number;
+    }
+    export interface ExecOptionsWithStringEncoding extends ExecOptions {
+        encoding: BufferEncoding;
+    }
+    export interface ExecOptionsWithBufferEncoding extends ExecOptions {
+        encoding: string; // specify `null`.
+    }
+    export function exec(command: string, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    export function exec(command: string, options: ExecOptionsWithStringEncoding, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    // usage. child_process.exec("tsc", {encoding: null as string}, (err, stdout, stderr) => {});
+    export function exec(command: string, options: ExecOptionsWithBufferEncoding, callback?: (error: Error, stdout: Buffer, stderr: Buffer) => void): ChildProcess;
+    export function exec(command: string, options: ExecOptions, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+
+    export interface ExecFileOptions {
+        cwd?: string;
+        env?: any;
+        timeout?: number;
+        maxBuffer?: number;
+        killSignal?: string;
+        uid?: number;
+        gid?: number;
+    }
+    export interface ExecFileOptionsWithStringEncoding extends ExecFileOptions {
+        encoding: BufferEncoding;
+    }
+    export interface ExecFileOptionsWithBufferEncoding extends ExecFileOptions {
+        encoding: string; // specify `null`.
+    }
+    export function execFile(file: string, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    export function execFile(file: string, options?: ExecFileOptionsWithStringEncoding, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    // usage. child_process.execFile("file.sh", {encoding: null as string}, (err, stdout, stderr) => {});
+    export function execFile(file: string, options?: ExecFileOptionsWithBufferEncoding, callback?: (error: Error, stdout: Buffer, stderr: Buffer) => void): ChildProcess;
+    export function execFile(file: string, options?: ExecFileOptions, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    export function execFile(file: string, args?: string[], callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    export function execFile(file: string, args?: string[], options?: ExecFileOptionsWithStringEncoding, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+    // usage. child_process.execFile("file.sh", ["foo"], {encoding: null as string}, (err, stdout, stderr) => {});
+    export function execFile(file: string, args?: string[], options?: ExecFileOptionsWithBufferEncoding, callback?: (error: Error, stdout: Buffer, stderr: Buffer) => void): ChildProcess;
+    export function execFile(file: string, args?: string[], options?: ExecFileOptions, callback?: (error: Error, stdout: string, stderr: string) => void): ChildProcess;
+
+    export interface ForkOptions {
+        cwd?: string;
+        env?: any;
+        execPath?: string;
+        execArgv?: string[];
+        silent?: boolean;
+        uid?: number;
+        gid?: number;
+    }
+    export function fork(modulePath: string, args?: string[], options?: ForkOptions): ChildProcess;
+
+    export interface SpawnSyncOptions {
+        cwd?: string;
+        input?: string | Buffer;
+        stdio?: any;
+        env?: any;
+        uid?: number;
+        gid?: number;
+        timeout?: number;
+        killSignal?: string;
+        maxBuffer?: number;
+        encoding?: string;
+        shell?: boolean | string;
+    }
+    export interface SpawnSyncOptionsWithStringEncoding extends SpawnSyncOptions {
+        encoding: BufferEncoding;
+    }
+    export interface SpawnSyncOptionsWithBufferEncoding extends SpawnSyncOptions {
+        encoding: string; // specify `null`.
+    }
+    export interface SpawnSyncReturns<T> {
+        pid: number;
+        output: string[];
+        stdout: T;
+        stderr: T;
+        status: number;
+        signal: string;
+        error: Error;
+    }
+    export function spawnSync(command: string): SpawnSyncReturns<Buffer>;
+    export function spawnSync(command: string, options?: SpawnSyncOptionsWithStringEncoding): SpawnSyncReturns<string>;
+    export function spawnSync(command: string, options?: SpawnSyncOptionsWithBufferEncoding): SpawnSyncReturns<Buffer>;
+    export function spawnSync(command: string, options?: SpawnSyncOptions): SpawnSyncReturns<Buffer>;
+    export function spawnSync(command: string, args?: string[], options?: SpawnSyncOptionsWithStringEncoding): SpawnSyncReturns<string>;
+    export function spawnSync(command: string, args?: string[], options?: SpawnSyncOptionsWithBufferEncoding): SpawnSyncReturns<Buffer>;
+    export function spawnSync(command: string, args?: string[], options?: SpawnSyncOptions): SpawnSyncReturns<Buffer>;
+
+    export interface ExecSyncOptions {
+        cwd?: string;
+        input?: string | Buffer;
+        stdio?: any;
+        env?: any;
+        shell?: string;
+        uid?: number;
+        gid?: number;
+        timeout?: number;
+        killSignal?: string;
+        maxBuffer?: number;
+        encoding?: string;
+    }
+    export interface ExecSyncOptionsWithStringEncoding extends ExecSyncOptions {
+        encoding: BufferEncoding;
+    }
+    export interface ExecSyncOptionsWithBufferEncoding extends ExecSyncOptions {
+        encoding: string; // specify `null`.
+    }
+    export function execSync(command: string): Buffer;
+    export function execSync(command: string, options?: ExecSyncOptionsWithStringEncoding): string;
+    export function execSync(command: string, options?: ExecSyncOptionsWithBufferEncoding): Buffer;
+    export function execSync(command: string, options?: ExecSyncOptions): Buffer;
+
+    export interface ExecFileSyncOptions {
+        cwd?: string;
+        input?: string | Buffer;
+        stdio?: any;
+        env?: any;
+        uid?: number;
+        gid?: number;
+        timeout?: number;
+        killSignal?: string;
+        maxBuffer?: number;
+        encoding?: string;
+    }
+    export interface ExecFileSyncOptionsWithStringEncoding extends ExecFileSyncOptions {
+        encoding: BufferEncoding;
+    }
+    export interface ExecFileSyncOptionsWithBufferEncoding extends ExecFileSyncOptions {
+        encoding: string; // specify `null`.
+    }
+    export function execFileSync(command: string): Buffer;
+    export function execFileSync(command: string, options?: ExecFileSyncOptionsWithStringEncoding): string;
+    export function execFileSync(command: string, options?: ExecFileSyncOptionsWithBufferEncoding): Buffer;
+    export function execFileSync(command: string, options?: ExecFileSyncOptions): Buffer;
+    export function execFileSync(command: string, args?: string[], options?: ExecFileSyncOptionsWithStringEncoding): string;
+    export function execFileSync(command: string, args?: string[], options?: ExecFileSyncOptionsWithBufferEncoding): Buffer;
+    export function execFileSync(command: string, args?: string[], options?: ExecFileSyncOptions): Buffer;
+}
+
+declare module "url" {
+    export interface Url {
+        href?: string;
+        protocol?: string;
+        auth?: string;
+        hostname?: string;
+        port?: string;
+        host?: string;
+        pathname?: string;
+        search?: string;
+        query?: string | any;
+        slashes?: boolean;
+        hash?: string;
+        path?: string;
+    }
+
+    export function parse(urlStr: string, parseQueryString?: boolean, slashesDenoteHost?: boolean): Url;
+    export function format(url: Url): string;
+    export function resolve(from: string, to: string): string;
+}
+
+declare module "dns" {
+    export function lookup(domain: string, family: number, callback: (err: Error, address: string, family: number) => void): string;
+    export function lookup(domain: string, callback: (err: Error, address: string, family: number) => void): string;
+    export function resolve(domain: string, rrtype: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolve(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolve4(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolve6(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolveMx(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolveTxt(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolveSrv(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolveNs(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function resolveCname(domain: string, callback: (err: Error, addresses: string[]) => void): string[];
+    export function reverse(ip: string, callback: (err: Error, domains: string[]) => void): string[];
+}
+
+declare module "net" {
+    import * as stream from "stream";
+
+    export interface Socket extends stream.Duplex {
+        // Extended base methods
+        write(buffer: Buffer): boolean;
+        write(buffer: Buffer, cb?: Function): boolean;
+        write(str: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, cb?: Function): boolean;
+        write(str: string, encoding?: string, fd?: string): boolean;
+
+        connect(port: number, host?: string, connectionListener?: Function): void;
+        connect(path: string, connectionListener?: Function): void;
+        bufferSize: number;
+        setEncoding(encoding?: string): void;
+        write(data: any, encoding?: string, callback?: Function): void;
+        destroy(): void;
+        pause(): void;
+        resume(): void;
+        setTimeout(timeout: number, callback?: Function): void;
+        setNoDelay(noDelay?: boolean): void;
+        setKeepAlive(enable?: boolean, initialDelay?: number): void;
+        address(): { port: number; family: string; address: string; };
+        unref(): void;
+        ref(): void;
+
+        remoteAddress: string;
+        remoteFamily: string;
+        remotePort: number;
+        localAddress: string;
+        localPort: number;
+        bytesRead: number;
+        bytesWritten: number;
+
+        // Extended base methods
+        end(): void;
+        end(buffer: Buffer, cb?: Function): void;
+        end(str: string, cb?: Function): void;
+        end(str: string, encoding?: string, cb?: Function): void;
+        end(data?: any, encoding?: string): void;
+    }
+
+    export var Socket: {
+        new (options?: { fd?: string; type?: string; allowHalfOpen?: boolean; }): Socket;
+    };
+
+    export interface ListenOptions {
+        port?: number;
+        host?: string;
+        backlog?: number;
+        path?: string;
+        exclusive?: boolean;
+    }
+
+    export interface Server extends Socket {
+        listen(port: number, hostname?: string, backlog?: number, listeningListener?: Function): Server;
+        listen(port: number, hostname?: string, listeningListener?: Function): Server;
+        listen(port: number, backlog?: number, listeningListener?: Function): Server;
+        listen(port: number, listeningListener?: Function): Server;
+        listen(path: string, backlog?: number, listeningListener?: Function): Server;
+        listen(path: string, listeningListener?: Function): Server;
+        listen(handle: any, backlog?: number, listeningListener?: Function): Server;
+        listen(handle: any, listeningListener?: Function): Server;
+        listen(options: ListenOptions, listeningListener?: Function): Server;
+        close(callback?: Function): Server;
+        address(): { port: number; family: string; address: string; };
+        getConnections(cb: (error: Error, count: number) => void): void;
+        ref(): Server;
+        unref(): Server;
+        maxConnections: number;
+        connections: number;
+    }
+    export function createServer(connectionListener?: (socket: Socket) => void): Server;
+    export function createServer(options?: { allowHalfOpen?: boolean; }, connectionListener?: (socket: Socket) => void): Server;
+    export function connect(options: { port: number, host?: string, localAddress?: string, localPort?: string, family?: number, allowHalfOpen?: boolean; }, connectionListener?: Function): Socket;
+    export function connect(port: number, host?: string, connectionListener?: Function): Socket;
+    export function connect(path: string, connectionListener?: Function): Socket;
+    export function createConnection(options: { port: number, host?: string, localAddress?: string, localPort?: string, family?: number, allowHalfOpen?: boolean; }, connectionListener?: Function): Socket;
+    export function createConnection(port: number, host?: string, connectionListener?: Function): Socket;
+    export function createConnection(path: string, connectionListener?: Function): Socket;
+    export function isIP(input: string): number;
+    export function isIPv4(input: string): boolean;
+    export function isIPv6(input: string): boolean;
+}
+
+declare module "dgram" {
+    import * as events from "events";
+
+    interface RemoteInfo {
+        address: string;
+        port: number;
+        size: number;
+    }
+
+    interface AddressInfo {
+        address: string;
+        family: string;
+        port: number;
+    }
+
+    export function createSocket(type: string, callback?: (msg: Buffer, rinfo: RemoteInfo) => void): Socket;
+
+    interface Socket extends events.EventEmitter {
+        send(buf: Buffer, offset: number, length: number, port: number, address: string, callback?: (error: Error, bytes: number) => void): void;
+        bind(port: number, address?: string, callback?: () => void): void;
+        close(): void;
+        address(): AddressInfo;
+        setBroadcast(flag: boolean): void;
+        setMulticastTTL(ttl: number): void;
+        setMulticastLoopback(flag: boolean): void;
+        addMembership(multicastAddress: string, multicastInterface?: string): void;
+        dropMembership(multicastAddress: string, multicastInterface?: string): void;
+    }
+}
+
+declare module "fs" {
+    import * as stream from "stream";
+    import * as events from "events";
+
+    interface Stats {
+        isFile(): boolean;
+        isDirectory(): boolean;
+        isBlockDevice(): boolean;
+        isCharacterDevice(): boolean;
+        isSymbolicLink(): boolean;
+        isFIFO(): boolean;
+        isSocket(): boolean;
+        dev: number;
+        ino: number;
+        mode: number;
+        nlink: number;
+        uid: number;
+        gid: number;
+        rdev: number;
+        size: number;
+        blksize: number;
+        blocks: number;
+        atime: Date;
+        mtime: Date;
+        ctime: Date;
+        birthtime: Date;
+    }
+
+    interface FSWatcher extends events.EventEmitter {
+        close(): void;
+    }
+
+    export interface ReadStream extends stream.Readable {
+        close(): void;
+        destroy(): void;
+    }
+    export interface WriteStream extends stream.Writable {
+        close(): void;
+        bytesWritten: number;
+    }
+
+    /**
+     * Asynchronous rename.
+     * @param oldPath
+     * @param newPath
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function rename(oldPath: string, newPath: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /**
+     * Synchronous rename
+     * @param oldPath
+     * @param newPath
+     */
+    export function renameSync(oldPath: string, newPath: string): void;
+    export function truncate(path: string | Buffer, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function truncate(path: string | Buffer, len: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function truncateSync(path: string | Buffer, len?: number): void;
+    export function ftruncate(fd: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function ftruncate(fd: number, len: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function ftruncateSync(fd: number, len?: number): void;
+    export function chown(path: string | Buffer, uid: number, gid: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function chownSync(path: string | Buffer, uid: number, gid: number): void;
+    export function fchown(fd: number, uid: number, gid: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function fchownSync(fd: number, uid: number, gid: number): void;
+    export function lchown(path: string | Buffer, uid: number, gid: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function lchownSync(path: string | Buffer, uid: number, gid: number): void;
+    export function chmod(path: string | Buffer, mode: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function chmod(path: string | Buffer, mode: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function chmodSync(path: string | Buffer, mode: number): void;
+    export function chmodSync(path: string | Buffer, mode: string): void;
+    export function fchmod(fd: number, mode: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function fchmod(fd: number, mode: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function fchmodSync(fd: number, mode: number): void;
+    export function fchmodSync(fd: number, mode: string): void;
+    export function lchmod(path: string | Buffer, mode: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function lchmod(path: string | Buffer, mode: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function lchmodSync(path: string | Buffer, mode: number): void;
+    export function lchmodSync(path: string | Buffer, mode: string): void;
+    export function stat(path: string | Buffer, callback?: (err: NodeJS.ErrnoException, stats: Stats) => any): void;
+    export function lstat(path: string | Buffer, callback?: (err: NodeJS.ErrnoException, stats: Stats) => any): void;
+    export function fstat(fd: number, callback?: (err: NodeJS.ErrnoException, stats: Stats) => any): void;
+    export function statSync(path: string | Buffer): Stats;
+    export function lstatSync(path: string | Buffer): Stats;
+    export function fstatSync(fd: number): Stats;
+    export function link(srcpath: string | Buffer, dstpath: string | Buffer, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function linkSync(srcpath: string | Buffer, dstpath: string | Buffer): void;
+    export function symlink(srcpath: string | Buffer, dstpath: string | Buffer, type?: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function symlinkSync(srcpath: string | Buffer, dstpath: string | Buffer, type?: string): void;
+    export function readlink(path: string | Buffer, callback?: (err: NodeJS.ErrnoException, linkString: string) => any): void;
+    export function readlinkSync(path: string | Buffer): string;
+    export function realpath(path: string | Buffer, callback?: (err: NodeJS.ErrnoException, resolvedPath: string) => any): void;
+    export function realpath(path: string | Buffer, cache: { [path: string]: string }, callback: (err: NodeJS.ErrnoException, resolvedPath: string) => any): void;
+    export function realpathSync(path: string | Buffer, cache?: { [path: string]: string }): string;
+    /*
+     * Asynchronous unlink - deletes the file specified in {path}
+     *
+     * @param path
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function unlink(path: string | Buffer, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /*
+     * Synchronous unlink - deletes the file specified in {path}
+     *
+     * @param path
+     */
+    export function unlinkSync(path: string | Buffer): void;
+    /*
+     * Asynchronous rmdir - removes the directory specified in {path}
+     *
+     * @param path
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function rmdir(path: string | Buffer, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /*
+     * Synchronous rmdir - removes the directory specified in {path}
+     *
+     * @param path
+     */
+    export function rmdirSync(path: string | Buffer): void;
+    /*
+     * Asynchronous mkdir - creates the directory specified in {path}.  Parameter {mode} defaults to 0777.
+     *
+     * @param path
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function mkdir(path: string | Buffer, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /*
+     * Asynchronous mkdir - creates the directory specified in {path}.  Parameter {mode} defaults to 0777.
+     *
+     * @param path
+     * @param mode
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function mkdir(path: string | Buffer, mode: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /*
+     * Asynchronous mkdir - creates the directory specified in {path}.  Parameter {mode} defaults to 0777.
+     *
+     * @param path
+     * @param mode
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function mkdir(path: string | Buffer, mode: string, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    /*
+     * Synchronous mkdir - creates the directory specified in {path}.  Parameter {mode} defaults to 0777.
+     *
+     * @param path
+     * @param mode
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function mkdirSync(path: string | Buffer, mode?: number): void;
+    /*
+     * Synchronous mkdir - creates the directory specified in {path}.  Parameter {mode} defaults to 0777.
+     *
+     * @param path
+     * @param mode
+     * @param callback No arguments other than a possible exception are given to the completion callback.
+     */
+    export function mkdirSync(path: string | Buffer, mode?: string): void;
+    /*
+     * Asynchronous mkdtemp - Creates a unique temporary directory. Generates six random characters to be appended behind a required prefix to create a unique temporary directory.
+     *
+     * @param prefix
+     * @param callback The created folder path is passed as a string to the callback's second parameter.
+     */
+    export function mkdtemp(prefix: string, callback?: (err: NodeJS.ErrnoException, folder: string) => void): void;
+    /*
+     * Synchronous mkdtemp - Creates a unique temporary directory. Generates six random characters to be appended behind a required prefix to create a unique temporary directory.
+     *
+     * @param prefix
+     * @returns Returns the created folder path.
+     */
+    export function mkdtempSync(prefix: string): string;
+    export function readdir(path: string | Buffer, callback?: (err: NodeJS.ErrnoException, files: string[]) => void): void;
+    export function readdirSync(path: string | Buffer): string[];
+    export function close(fd: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function closeSync(fd: number): void;
+    export function open(path: string | Buffer, flags: string | number, callback: (err: NodeJS.ErrnoException, fd: number) => void): void;
+    export function open(path: string | Buffer, flags: string | number, mode: number, callback: (err: NodeJS.ErrnoException, fd: number) => void): void;
+    export function openSync(path: string | Buffer, flags: string | number, mode?: number): number;
+    export function utimes(path: string | Buffer, atime: number, mtime: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function utimes(path: string | Buffer, atime: Date, mtime: Date, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function utimesSync(path: string | Buffer, atime: number, mtime: number): void;
+    export function utimesSync(path: string | Buffer, atime: Date, mtime: Date): void;
+    export function futimes(fd: number, atime: number, mtime: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function futimes(fd: number, atime: Date, mtime: Date, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function futimesSync(fd: number, atime: number, mtime: number): void;
+    export function futimesSync(fd: number, atime: Date, mtime: Date): void;
+    export function fsync(fd: number, callback?: (err?: NodeJS.ErrnoException) => void): void;
+    export function fsyncSync(fd: number): void;
+    export function write(fd: number, buffer: Buffer, offset: number, length: number, position: number, callback?: (err: NodeJS.ErrnoException, written: number, buffer: Buffer) => void): void;
+    export function write(fd: number, buffer: Buffer, offset: number, length: number, callback?: (err: NodeJS.ErrnoException, written: number, buffer: Buffer) => void): void;
+    export function write(fd: number, data: any, callback?: (err: NodeJS.ErrnoException, written: number, str: string) => void): void;
+    export function write(fd: number, data: any, offset: number, callback?: (err: NodeJS.ErrnoException, written: number, str: string) => void): void;
+    export function write(fd: number, data: any, offset: number, encoding: string, callback?: (err: NodeJS.ErrnoException, written: number, str: string) => void): void;
+    export function writeSync(fd: number, buffer: Buffer, offset: number, length: number, position?: number): number;
+    export function writeSync(fd: number, data: any, position?: number, enconding?: string): number;
+    export function read(fd: number, buffer: Buffer, offset: number, length: number, position: number, callback?: (err: NodeJS.ErrnoException, bytesRead: number, buffer: Buffer) => void): void;
+    export function readSync(fd: number, buffer: Buffer, offset: number, length: number, position: number): number;
+    /*
+     * Asynchronous readFile - Asynchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param encoding
+     * @param callback - The callback is passed two arguments (err, data), where data is the contents of the file.
+     */
+    export function readFile(filename: string, encoding: string, callback: (err: NodeJS.ErrnoException, data: string) => void): void;
+    /*
+     * Asynchronous readFile - Asynchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param options An object with optional {encoding} and {flag} properties.  If {encoding} is specified, readFile returns a string; otherwise it returns a Buffer.
+     * @param callback - The callback is passed two arguments (err, data), where data is the contents of the file.
+     */
+    export function readFile(filename: string, options: { encoding: string; flag?: string; }, callback: (err: NodeJS.ErrnoException, data: string) => void): void;
+    /*
+     * Asynchronous readFile - Asynchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param options An object with optional {encoding} and {flag} properties.  If {encoding} is specified, readFile returns a string; otherwise it returns a Buffer.
+     * @param callback - The callback is passed two arguments (err, data), where data is the contents of the file.
+     */
+    export function readFile(filename: string, options: { flag?: string; }, callback: (err: NodeJS.ErrnoException, data: Buffer) => void): void;
+    /*
+     * Asynchronous readFile - Asynchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param callback - The callback is passed two arguments (err, data), where data is the contents of the file.
+     */
+    export function readFile(filename: string, callback: (err: NodeJS.ErrnoException, data: Buffer) => void): void;
+    /*
+     * Synchronous readFile - Synchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param encoding
+     */
+    export function readFileSync(filename: string, encoding: string): string;
+    /*
+     * Synchronous readFile - Synchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param options An object with optional {encoding} and {flag} properties.  If {encoding} is specified, readFileSync returns a string; otherwise it returns a Buffer.
+     */
+    export function readFileSync(filename: string, options: { encoding: string; flag?: string; }): string;
+    /*
+     * Synchronous readFile - Synchronously reads the entire contents of a file.
+     *
+     * @param fileName
+     * @param options An object with optional {encoding} and {flag} properties.  If {encoding} is specified, readFileSync returns a string; otherwise it returns a Buffer.
+     */
+    export function readFileSync(filename: string, options?: { flag?: string; }): Buffer;
+    export function writeFile(filename: string, data: any, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function writeFile(filename: string, data: any, options: { encoding?: string; mode?: number; flag?: string; }, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function writeFile(filename: string, data: any, options: { encoding?: string; mode?: string; flag?: string; }, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function writeFileSync(filename: string, data: any, options?: { encoding?: string; mode?: number; flag?: string; }): void;
+    export function writeFileSync(filename: string, data: any, options?: { encoding?: string; mode?: string; flag?: string; }): void;
+    export function appendFile(filename: string, data: any, options: { encoding?: string; mode?: number; flag?: string; }, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function appendFile(filename: string, data: any, options: { encoding?: string; mode?: string; flag?: string; }, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function appendFile(filename: string, data: any, callback?: (err: NodeJS.ErrnoException) => void): void;
+    export function appendFileSync(filename: string, data: any, options?: { encoding?: string; mode?: number; flag?: string; }): void;
+    export function appendFileSync(filename: string, data: any, options?: { encoding?: string; mode?: string; flag?: string; }): void;
+    export function watchFile(filename: string, listener: (curr: Stats, prev: Stats) => void): void;
+    export function watchFile(filename: string, options: { persistent?: boolean; interval?: number; }, listener: (curr: Stats, prev: Stats) => void): void;
+    export function unwatchFile(filename: string, listener?: (curr: Stats, prev: Stats) => void): void;
+    export function watch(filename: string, listener?: (event: string, filename: string) => any): FSWatcher;
+    export function watch(filename: string, encoding: string, listener?: (event: string, filename: string | Buffer) => any): FSWatcher;
+    export function watch(filename: string, options: { persistent?: boolean; recursive?: boolean; encoding?: string }, listener?: (event: string, filename: string | Buffer) => any): FSWatcher;
+    export function exists(path: string | Buffer, callback?: (exists: boolean) => void): void;
+    export function existsSync(path: string | Buffer): boolean;
+    /** Constant for fs.access(). File is visible to the calling process. */
+    export var F_OK: number;
+    /** Constant for fs.access(). File can be read by the calling process. */
+    export var R_OK: number;
+    /** Constant for fs.access(). File can be written by the calling process. */
+    export var W_OK: number;
+    /** Constant for fs.access(). File can be executed by the calling process. */
+    export var X_OK: number;
+    /** Tests a user's permissions for the file specified by path. */
+    export function access(path: string | Buffer, callback: (err: NodeJS.ErrnoException) => void): void;
+    export function access(path: string | Buffer, mode: number, callback: (err: NodeJS.ErrnoException) => void): void;
+    /** Synchronous version of fs.access. This throws if any accessibility checks fail, and does nothing otherwise. */
+    export function accessSync(path: string | Buffer, mode?: number): void;
+    export function createReadStream(path: string | Buffer, options?: {
+        flags?: string;
+        encoding?: string;
+        fd?: number;
+        mode?: number;
+        autoClose?: boolean;
+        start?: number;
+        end?: number;
+    }): ReadStream;
+    export function createWriteStream(path: string | Buffer, options?: {
+        flags?: string;
+        encoding?: string;
+        fd?: number;
+        mode?: number;
+    }): WriteStream;
+}
+
+declare module "path" {
+
+    /**
+     * A parsed path object generated by path.parse() or consumed by path.format().
+     */
+    export interface ParsedPath {
+        /**
+         * The root of the path such as '/' or 'c:\'
+         */
+        root: string;
+        /**
+         * The full directory path such as '/home/user/dir' or 'c:\path\dir'
+         */
+        dir: string;
+        /**
+         * The file name including extension (if any) such as 'index.html'
+         */
+        base: string;
+        /**
+         * The file extension (if any) such as '.html'
+         */
+        ext: string;
+        /**
+         * The file name without extension (if any) such as 'index'
+         */
+        name: string;
+    }
+
+    /**
+     * Normalize a string path, reducing '..' and '.' parts.
+     * When multiple slashes are found, they're replaced by a single one; when the path contains a trailing slash, it is preserved. On Windows backslashes are used.
+     *
+     * @param p string path to normalize.
+     */
+    export function normalize(p: string): string;
+    /**
+     * Join all arguments together and normalize the resulting path.
+     * Arguments must be strings. In v0.8, non-string arguments were silently ignored. In v0.10 and up, an exception is thrown.
+     *
+     * @param paths string paths to join.
+     */
+    export function join(...paths: any[]): string;
+    /**
+     * Join all arguments together and normalize the resulting path.
+     * Arguments must be strings. In v0.8, non-string arguments were silently ignored. In v0.10 and up, an exception is thrown.
+     *
+     * @param paths string paths to join.
+     */
+    export function join(...paths: string[]): string;
+    /**
+     * The right-most parameter is considered {to}.  Other parameters are considered an array of {from}.
+     *
+     * Starting from leftmost {from} paramter, resolves {to} to an absolute path.
+     *
+     * If {to} isn't already absolute, {from} arguments are prepended in right to left order, until an absolute path is found. If after using all {from} paths still no absolute path is found, the current working directory is used as well. The resulting path is normalized, and trailing slashes are removed unless the path gets resolved to the root directory.
+     *
+     * @param pathSegments string paths to join.  Non-string arguments are ignored.
+     */
+    export function resolve(...pathSegments: any[]): string;
+    /**
+     * Determines whether {path} is an absolute path. An absolute path will always resolve to the same location, regardless of the working directory.
+     *
+     * @param path path to test.
+     */
+    export function isAbsolute(path: string): boolean;
+    /**
+     * Solve the relative path from {from} to {to}.
+     * At times we have two absolute paths, and we need to derive the relative path from one to the other. This is actually the reverse transform of path.resolve.
+     *
+     * @param from
+     * @param to
+     */
+    export function relative(from: string, to: string): string;
+    /**
+     * Return the directory name of a path. Similar to the Unix dirname command.
+     *
+     * @param p the path to evaluate.
+     */
+    export function dirname(p: string): string;
+    /**
+     * Return the last portion of a path. Similar to the Unix basename command.
+     * Often used to extract the file name from a fully qualified path.
+     *
+     * @param p the path to evaluate.
+     * @param ext optionally, an extension to remove from the result.
+     */
+    export function basename(p: string, ext?: string): string;
+    /**
+     * Return the extension of the path, from the last '.' to end of string in the last portion of the path.
+     * If there is no '.' in the last portion of the path or the first character of it is '.', then it returns an empty string
+     *
+     * @param p the path to evaluate.
+     */
+    export function extname(p: string): string;
+    /**
+     * The platform-specific file separator. '\\' or '/'.
+     */
+    export var sep: string;
+    /**
+     * The platform-specific file delimiter. ';' or ':'.
+     */
+    export var delimiter: string;
+    /**
+     * Returns an object from a path string - the opposite of format().
+     *
+     * @param pathString path to evaluate.
+     */
+    export function parse(pathString: string): ParsedPath;
+    /**
+     * Returns a path string from an object - the opposite of parse().
+     *
+     * @param pathString path to evaluate.
+     */
+    export function format(pathObject: ParsedPath): string;
+
+    export module posix {
+        export function normalize(p: string): string;
+        export function join(...paths: any[]): string;
+        export function resolve(...pathSegments: any[]): string;
+        export function isAbsolute(p: string): boolean;
+        export function relative(from: string, to: string): string;
+        export function dirname(p: string): string;
+        export function basename(p: string, ext?: string): string;
+        export function extname(p: string): string;
+        export var sep: string;
+        export var delimiter: string;
+        export function parse(p: string): ParsedPath;
+        export function format(pP: ParsedPath): string;
+    }
+
+    export module win32 {
+        export function normalize(p: string): string;
+        export function join(...paths: any[]): string;
+        export function resolve(...pathSegments: any[]): string;
+        export function isAbsolute(p: string): boolean;
+        export function relative(from: string, to: string): string;
+        export function dirname(p: string): string;
+        export function basename(p: string, ext?: string): string;
+        export function extname(p: string): string;
+        export var sep: string;
+        export var delimiter: string;
+        export function parse(p: string): ParsedPath;
+        export function format(pP: ParsedPath): string;
+    }
+}
+
+declare module "string_decoder" {
+    export interface NodeStringDecoder {
+        write(buffer: Buffer): string;
+        end(buffer?: Buffer): string;
+    }
+    export var StringDecoder: {
+        new (encoding?: string): NodeStringDecoder;
+    };
+}
+
+declare module "tls" {
+    import * as crypto from "crypto";
+    import * as net from "net";
+    import * as stream from "stream";
+
+    var CLIENT_RENEG_LIMIT: number;
+    var CLIENT_RENEG_WINDOW: number;
+
+    export interface Certificate {
+        /**
+         * Country code.
+         */
+        C: string;
+        /**
+         * Street.
+         */
+        ST: string;
+        /**
+         * Locality.
+         */
+        L: string;
+        /**
+         * Organization.
+         */
+        O: string;
+        /**
+         * Organizational unit.
+         */
+        OU: string;
+        /**
+         * Common name.
+         */
+        CN: string;
+    }
+
+    export interface CipherNameAndProtocol {
+        /**
+         * The cipher name.
+         */
+        name: string;
+        /**
+         * SSL/TLS protocol version.
+         */
+        version: string;
+    }
+
+    export class TLSSocket extends stream.Duplex {
+        /**
+         * Returns the bound address, the address family name and port of the underlying socket as reported by
+         * the operating system.
+         * @returns {any} - An object with three properties, e.g. { port: 12346, family: 'IPv4', address: '127.0.0.1' }.
+         */
+        address(): { port: number; family: string; address: string };
+        /**
+         * A boolean that is true if the peer certificate was signed by one of the specified CAs, otherwise false.
+         */
+        authorized: boolean;
+        /**
+         * The reason why the peer's certificate has not been verified.
+         * This property becomes available only when tlsSocket.authorized === false.
+         */
+        authorizationError: Error;
+        /**
+         * Static boolean value, always true.
+         * May be used to distinguish TLS sockets from regular ones.
+         */
+        encrypted: boolean;
+        /**
+         * Returns an object representing the cipher name and the SSL/TLS protocol version of the current connection.
+         * @returns {CipherNameAndProtocol} - Returns an object representing the cipher name
+         * and the SSL/TLS protocol version of the current connection.
+         */
+        getCipher(): CipherNameAndProtocol;
+        /**
+         * Returns an object representing the peer's certificate.
+         * The returned object has some properties corresponding to the field of the certificate.
+         * If detailed argument is true the full chain with issuer property will be returned,
+         * if false only the top certificate without issuer property.
+         * If the peer does not provide a certificate, it returns null or an empty object.
+         * @param {boolean} detailed - If true; the full chain with issuer property will be returned.
+         * @returns {any} - An object representing the peer's certificate.
+         */
+        getPeerCertificate(detailed?: boolean): {
+            subject: Certificate;
+            issuerInfo: Certificate;
+            issuer: Certificate;
+            raw: any;
+            valid_from: string;
+            valid_to: string;
+            fingerprint: string;
+            serialNumber: string;
+        };
+        /**
+         * Could be used to speed up handshake establishment when reconnecting to the server.
+         * @returns {any} - ASN.1 encoded TLS session or undefined if none was negotiated.
+         */
+        getSession(): any;
+        /**
+         * NOTE: Works only with client TLS sockets.
+         * Useful only for debugging, for session reuse provide session option to tls.connect().
+         * @returns {any} - TLS session ticket or undefined if none was negotiated.
+         */
+        getTLSTicket(): any;
+        /**
+         * The string representation of the local IP address.
+         */
+        localAddress: string;
+        /**
+         * The numeric representation of the local port.
+         */
+        localPort: string;
+        /**
+         * The string representation of the remote IP address.
+         * For example, '74.125.127.100' or '2001:4860:a005::68'.
+         */
+        remoteAddress: string;
+        /**
+         * The string representation of the remote IP family. 'IPv4' or 'IPv6'.
+         */
+        remoteFamily: string;
+        /**
+         * The numeric representation of the remote port. For example, 443.
+         */
+        remotePort: number;
+        /**
+         * Initiate TLS renegotiation process.
+         *
+         * NOTE: Can be used to request peer's certificate after the secure connection has been established.
+         * ANOTHER NOTE: When running as the server, socket will be destroyed with an error after handshakeTimeout timeout.
+         * @param {TlsOptions} options - The options may contain the following fields: rejectUnauthorized,
+         * requestCert (See tls.createServer() for details).
+         * @param {Function} callback - callback(err) will be executed with null as err, once the renegotiation
+         * is successfully completed.
+         */
+        renegotiate(options: TlsOptions, callback: (err: Error) => any): any;
+        /**
+         * Set maximum TLS fragment size (default and maximum value is: 16384, minimum is: 512).
+         * Smaller fragment size decreases buffering latency on the client: large fragments are buffered by
+         * the TLS layer until the entire fragment is received and its integrity is verified;
+         * large fragments can span multiple roundtrips, and their processing can be delayed due to packet
+         * loss or reordering. However, smaller fragments add extra TLS framing bytes and CPU overhead,
+         * which may decrease overall server throughput.
+         * @param {number} size - TLS fragment size (default and maximum value is: 16384, minimum is: 512).
+         * @returns {boolean} - Returns true on success, false otherwise.
+         */
+        setMaxSendFragment(size: number): boolean;
+    }
+
+    export interface TlsOptions {
+        host?: string;
+        port?: number;
+        pfx?: any;   //string or buffer
+        key?: any;   //string or buffer
+        passphrase?: string;
+        cert?: any;
+        ca?: any;    //string or buffer
+        crl?: any;   //string or string array
+        ciphers?: string;
+        honorCipherOrder?: any;
+        requestCert?: boolean;
+        rejectUnauthorized?: boolean;
+        NPNProtocols?: any;  //array or Buffer;
+        SNICallback?: (servername: string) => any;
+    }
+
+    export interface ConnectionOptions {
+        host?: string;
+        port?: number;
+        socket?: net.Socket;
+        pfx?: string | Buffer
+        key?: string | Buffer
+        passphrase?: string;
+        cert?: string | Buffer
+        ca?: (string | Buffer)[];
+        rejectUnauthorized?: boolean;
+        NPNProtocols?: (string | Buffer)[];
+        servername?: string;
+    }
+
+    export interface Server extends net.Server {
+        close(): Server;
+        address(): { port: number; family: string; address: string; };
+        addContext(hostName: string, credentials: {
+            key: string;
+            cert: string;
+            ca: string;
+        }): void;
+        maxConnections: number;
+        connections: number;
+    }
+
+    export interface ClearTextStream extends stream.Duplex {
+        authorized: boolean;
+        authorizationError: Error;
+        getPeerCertificate(): any;
+        getCipher: {
+            name: string;
+            version: string;
+        };
+        address: {
+            port: number;
+            family: string;
+            address: string;
+        };
+        remoteAddress: string;
+        remotePort: number;
+    }
+
+    export interface SecurePair {
+        encrypted: any;
+        cleartext: any;
+    }
+
+    export interface SecureContextOptions {
+        pfx?: string | Buffer;
+        key?: string | Buffer;
+        passphrase?: string;
+        cert?: string | Buffer;
+        ca?: string | Buffer;
+        crl?: string | string[]
+        ciphers?: string;
+        honorCipherOrder?: boolean;
+    }
+
+    export interface SecureContext {
+        context: any;
+    }
+
+    export function createServer(options: TlsOptions, secureConnectionListener?: (cleartextStream: ClearTextStream) => void): Server;
+    export function connect(options: TlsOptions, secureConnectionListener?: () => void): ClearTextStream;
+    export function connect(port: number, host?: string, options?: ConnectionOptions, secureConnectListener?: () => void): ClearTextStream;
+    export function connect(port: number, options?: ConnectionOptions, secureConnectListener?: () => void): ClearTextStream;
+    export function createSecurePair(credentials?: crypto.Credentials, isServer?: boolean, requestCert?: boolean, rejectUnauthorized?: boolean): SecurePair;
+    export function createSecureContext(details: SecureContextOptions): SecureContext;
+}
+
+declare module "crypto" {
+    export interface CredentialDetails {
+        pfx: string;
+        key: string;
+        passphrase: string;
+        cert: string;
+        ca: string | string[];
+        crl: string | string[];
+        ciphers: string;
+    }
+    export interface Credentials { context?: any; }
+    export function createCredentials(details: CredentialDetails): Credentials;
+    export function createHash(algorithm: string): Hash;
+    export function createHmac(algorithm: string, key: string): Hmac;
+    export function createHmac(algorithm: string, key: Buffer): Hmac;
+    export interface Hash {
+        update(data: any, input_encoding?: string): Hash;
+        digest(encoding: 'buffer'): Buffer;
+        digest(encoding: string): any;
+        digest(): Buffer;
+    }
+    export interface Hmac extends NodeJS.ReadWriteStream {
+        update(data: any, input_encoding?: string): Hmac;
+        digest(encoding: 'buffer'): Buffer;
+        digest(encoding: string): any;
+        digest(): Buffer;
+    }
+    export function createCipher(algorithm: string, password: any): Cipher;
+    export function createCipheriv(algorithm: string, key: any, iv: any): Cipher;
+    export interface Cipher extends NodeJS.ReadWriteStream {
+        update(data: Buffer): Buffer;
+        update(data: string, input_encoding: "utf8" | "ascii" | "binary"): Buffer;
+        update(data: Buffer, input_encoding: any, output_encoding: "binary" | "base64" | "hex"): string;
+        update(data: string, input_encoding: "utf8" | "ascii" | "binary", output_encoding: "binary" | "base64" | "hex"): string;
+        final(): Buffer;
+        final(output_encoding: string): string;
+        setAutoPadding(auto_padding: boolean): void;
+        getAuthTag(): Buffer;
+    }
+    export function createDecipher(algorithm: string, password: any): Decipher;
+    export function createDecipheriv(algorithm: string, key: any, iv: any): Decipher;
+    export interface Decipher extends NodeJS.ReadWriteStream {
+        update(data: Buffer): Buffer;
+        update(data: string, input_encoding: "binary" | "base64" | "hex"): Buffer;
+        update(data: Buffer, input_encoding: any, output_encoding: "utf8" | "ascii" | "binary"): string;
+        update(data: string, input_encoding: "binary" | "base64" | "hex", output_encoding: "utf8" | "ascii" | "binary"): string;
+        final(): Buffer;
+        final(output_encoding: string): string;
+        setAutoPadding(auto_padding: boolean): void;
+        setAuthTag(tag: Buffer): void;
+    }
+    export function createSign(algorithm: string): Signer;
+    export interface Signer extends NodeJS.WritableStream {
+        update(data: any): void;
+        sign(private_key: string, output_format: string): string;
+    }
+    export function createVerify(algorith: string): Verify;
+    export interface Verify extends NodeJS.WritableStream {
+        update(data: any): void;
+        verify(object: string, signature: string, signature_format?: string): boolean;
+    }
+    export function createDiffieHellman(prime_length: number): DiffieHellman;
+    export function createDiffieHellman(prime: number, encoding?: string): DiffieHellman;
+    export interface DiffieHellman {
+        generateKeys(encoding?: string): string;
+        computeSecret(other_public_key: string, input_encoding?: string, output_encoding?: string): string;
+        getPrime(encoding?: string): string;
+        getGenerator(encoding: string): string;
+        getPublicKey(encoding?: string): string;
+        getPrivateKey(encoding?: string): string;
+        setPublicKey(public_key: string, encoding?: string): void;
+        setPrivateKey(public_key: string, encoding?: string): void;
+    }
+    export function getDiffieHellman(group_name: string): DiffieHellman;
+    export function pbkdf2(password: string | Buffer, salt: string | Buffer, iterations: number, keylen: number, callback: (err: Error, derivedKey: Buffer) => any): void;
+    export function pbkdf2(password: string | Buffer, salt: string | Buffer, iterations: number, keylen: number, digest: string, callback: (err: Error, derivedKey: Buffer) => any): void;
+    export function pbkdf2Sync(password: string | Buffer, salt: string | Buffer, iterations: number, keylen: number): Buffer;
+    export function pbkdf2Sync(password: string | Buffer, salt: string | Buffer, iterations: number, keylen: number, digest: string): Buffer;
+    export function randomBytes(size: number): Buffer;
+    export function randomBytes(size: number, callback: (err: Error, buf: Buffer) => void): void;
+    export function pseudoRandomBytes(size: number): Buffer;
+    export function pseudoRandomBytes(size: number, callback: (err: Error, buf: Buffer) => void): void;
+    export interface RsaPublicKey {
+        key: string;
+        padding?: any;
+    }
+    export interface RsaPrivateKey {
+        key: string;
+        passphrase?: string,
+        padding?: any;
+    }
+    export function publicEncrypt(public_key: string | RsaPublicKey, buffer: Buffer): Buffer
+    export function privateDecrypt(private_key: string | RsaPrivateKey, buffer: Buffer): Buffer
+}
+
+declare module "stream" {
+    import * as events from "events";
+
+    export class Stream extends events.EventEmitter {
+        pipe<T extends NodeJS.WritableStream>(destination: T, options?: { end?: boolean; }): T;
+    }
+
+    export interface ReadableOptions {
+        highWaterMark?: number;
+        encoding?: string;
+        objectMode?: boolean;
+        read?: (size?: number) => any;
+    }
+
+    export class Readable extends events.EventEmitter implements NodeJS.ReadableStream {
+        readable: boolean;
+        constructor(opts?: ReadableOptions);
+        _read(size: number): void;
+        read(size?: number): any;
+        setEncoding(encoding: string): void;
+        pause(): void;
+        resume(): void;
+        pipe<T extends NodeJS.WritableStream>(destination: T, options?: { end?: boolean; }): T;
+        unpipe<T extends NodeJS.WritableStream>(destination?: T): void;
+        unshift(chunk: any): void;
+        wrap(oldStream: NodeJS.ReadableStream): NodeJS.ReadableStream;
+        push(chunk: any, encoding?: string): boolean;
+    }
+
+    export interface WritableOptions {
+        highWaterMark?: number;
+        decodeStrings?: boolean;
+        objectMode?: boolean;
+        write?: (chunk: string|Buffer, encoding: string, callback: Function) => any;
+        writev?: (chunks: {chunk: string|Buffer, encoding: string}[], callback: Function) => any;
+    }
+
+    export class Writable extends events.EventEmitter implements NodeJS.WritableStream {
+        writable: boolean;
+        constructor(opts?: WritableOptions);
+        _write(chunk: any, encoding: string, callback: Function): void;
+        write(chunk: any, cb?: Function): boolean;
+        write(chunk: any, encoding?: string, cb?: Function): boolean;
+        end(): void;
+        end(chunk: any, cb?: Function): void;
+        end(chunk: any, encoding?: string, cb?: Function): void;
+    }
+
+    export interface DuplexOptions extends ReadableOptions, WritableOptions {
+        allowHalfOpen?: boolean;
+        readableObjectMode?: boolean;
+        writableObjectMode?: boolean;
+    }
+
+    // Note: Duplex extends both Readable and Writable.
+    export class Duplex extends Readable implements NodeJS.ReadWriteStream {
+        writable: boolean;
+        constructor(opts?: DuplexOptions);
+        _write(chunk: any, encoding: string, callback: Function): void;
+        write(chunk: any, cb?: Function): boolean;
+        write(chunk: any, encoding?: string, cb?: Function): boolean;
+        end(): void;
+        end(chunk: any, cb?: Function): void;
+        end(chunk: any, encoding?: string, cb?: Function): void;
+    }
+
+    export interface TransformOptions extends ReadableOptions, WritableOptions {
+        transform?: (chunk: string|Buffer, encoding: string, callback: Function) => any;
+        flush?: (callback: Function) => any;
+    }
+
+    // Note: Transform lacks the _read and _write methods of Readable/Writable.
+    export class Transform extends events.EventEmitter implements NodeJS.ReadWriteStream {
+        readable: boolean;
+        writable: boolean;
+        constructor(opts?: TransformOptions);
+        _transform(chunk: any, encoding: string, callback: Function): void;
+        _flush(callback: Function): void;
+        read(size?: number): any;
+        setEncoding(encoding: string): void;
+        pause(): void;
+        resume(): void;
+        pipe<T extends NodeJS.WritableStream>(destination: T, options?: { end?: boolean; }): T;
+        unpipe<T extends NodeJS.WritableStream>(destination?: T): void;
+        unshift(chunk: any): void;
+        wrap(oldStream: NodeJS.ReadableStream): NodeJS.ReadableStream;
+        push(chunk: any, encoding?: string): boolean;
+        write(chunk: any, cb?: Function): boolean;
+        write(chunk: any, encoding?: string, cb?: Function): boolean;
+        end(): void;
+        end(chunk: any, cb?: Function): void;
+        end(chunk: any, encoding?: string, cb?: Function): void;
+    }
+
+    export class PassThrough extends Transform { }
+}
+
+declare module "util" {
+    export interface InspectOptions {
+        showHidden?: boolean;
+        depth?: number;
+        colors?: boolean;
+        customInspect?: boolean;
+    }
+
+    export function format(format: any, ...param: any[]): string;
+    export function debug(string: string): void;
+    export function error(...param: any[]): void;
+    export function puts(...param: any[]): void;
+    export function print(...param: any[]): void;
+    export function log(string: string): void;
+    export function inspect(object: any, showHidden?: boolean, depth?: number, color?: boolean): string;
+    export function inspect(object: any, options: InspectOptions): string;
+    export function isArray(object: any): boolean;
+    export function isRegExp(object: any): boolean;
+    export function isDate(object: any): boolean;
+    export function isError(object: any): boolean;
+    export function inherits(constructor: any, superConstructor: any): void;
+    export function debuglog(key: string): (msg: string, ...param: any[]) => void;
+}
+
+declare module "assert" {
+    function internal(value: any, message?: string): void;
+    namespace internal {
+        export class AssertionError implements Error {
+            name: string;
+            message: string;
+            actual: any;
+            expected: any;
+            operator: string;
+            generatedMessage: boolean;
+
+            constructor(options?: {
+                message?: string; actual?: any; expected?: any;
+                operator?: string; stackStartFunction?: Function
+            });
+        }
+
+        export function fail(actual?: any, expected?: any, message?: string, operator?: string): void;
+        export function ok(value: any, message?: string): void;
+        export function equal(actual: any, expected: any, message?: string): void;
+        export function notEqual(actual: any, expected: any, message?: string): void;
+        export function deepEqual(actual: any, expected: any, message?: string): void;
+        export function notDeepEqual(acutal: any, expected: any, message?: string): void;
+        export function strictEqual(actual: any, expected: any, message?: string): void;
+        export function notStrictEqual(actual: any, expected: any, message?: string): void;
+        export function deepStrictEqual(actual: any, expected: any, message?: string): void;
+        export function notDeepStrictEqual(actual: any, expected: any, message?: string): void;
+        export var throws: {
+            (block: Function, message?: string): void;
+            (block: Function, error: Function, message?: string): void;
+            (block: Function, error: RegExp, message?: string): void;
+            (block: Function, error: (err: any) => boolean, message?: string): void;
+        };
+
+        export var doesNotThrow: {
+            (block: Function, message?: string): void;
+            (block: Function, error: Function, message?: string): void;
+            (block: Function, error: RegExp, message?: string): void;
+            (block: Function, error: (err: any) => boolean, message?: string): void;
+        };
+
+        export function ifError(value: any): void;
+    }
+
+    export = internal;
+}
+
+declare module "tty" {
+    import * as net from "net";
+
+    export function isatty(fd: number): boolean;
+    export interface ReadStream extends net.Socket {
+        isRaw: boolean;
+        setRawMode(mode: boolean): void;
+        isTTY: boolean;
+    }
+    export interface WriteStream extends net.Socket {
+        columns: number;
+        rows: number;
+        isTTY: boolean;
+    }
+}
+
+declare module "domain" {
+    import * as events from "events";
+
+    export class Domain extends events.EventEmitter implements NodeJS.Domain {
+        run(fn: Function): void;
+        add(emitter: events.EventEmitter): void;
+        remove(emitter: events.EventEmitter): void;
+        bind(cb: (err: Error, data: any) => any): any;
+        intercept(cb: (data: any) => any): any;
+        dispose(): void;
+    }
+
+    export function create(): Domain;
+}
+
+declare module "constants" {
+    export var E2BIG: number;
+    export var EACCES: number;
+    export var EADDRINUSE: number;
+    export var EADDRNOTAVAIL: number;
+    export var EAFNOSUPPORT: number;
+    export var EAGAIN: number;
+    export var EALREADY: number;
+    export var EBADF: number;
+    export var EBADMSG: number;
+    export var EBUSY: number;
+    export var ECANCELED: number;
+    export var ECHILD: number;
+    export var ECONNABORTED: number;
+    export var ECONNREFUSED: number;
+    export var ECONNRESET: number;
+    export var EDEADLK: number;
+    export var EDESTADDRREQ: number;
+    export var EDOM: number;
+    export var EEXIST: number;
+    export var EFAULT: number;
+    export var EFBIG: number;
+    export var EHOSTUNREACH: number;
+    export var EIDRM: number;
+    export var EILSEQ: number;
+    export var EINPROGRESS: number;
+    export var EINTR: number;
+    export var EINVAL: number;
+    export var EIO: number;
+    export var EISCONN: number;
+    export var EISDIR: number;
+    export var ELOOP: number;
+    export var EMFILE: number;
+    export var EMLINK: number;
+    export var EMSGSIZE: number;
+    export var ENAMETOOLONG: number;
+    export var ENETDOWN: number;
+    export var ENETRESET: number;
+    export var ENETUNREACH: number;
+    export var ENFILE: number;
+    export var ENOBUFS: number;
+    export var ENODATA: number;
+    export var ENODEV: number;
+    export var ENOENT: number;
+    export var ENOEXEC: number;
+    export var ENOLCK: number;
+    export var ENOLINK: number;
+    export var ENOMEM: number;
+    export var ENOMSG: number;
+    export var ENOPROTOOPT: number;
+    export var ENOSPC: number;
+    export var ENOSR: number;
+    export var ENOSTR: number;
+    export var ENOSYS: number;
+    export var ENOTCONN: number;
+    export var ENOTDIR: number;
+    export var ENOTEMPTY: number;
+    export var ENOTSOCK: number;
+    export var ENOTSUP: number;
+    export var ENOTTY: number;
+    export var ENXIO: number;
+    export var EOPNOTSUPP: number;
+    export var EOVERFLOW: number;
+    export var EPERM: number;
+    export var EPIPE: number;
+    export var EPROTO: number;
+    export var EPROTONOSUPPORT: number;
+    export var EPROTOTYPE: number;
+    export var ERANGE: number;
+    export var EROFS: number;
+    export var ESPIPE: number;
+    export var ESRCH: number;
+    export var ETIME: number;
+    export var ETIMEDOUT: number;
+    export var ETXTBSY: number;
+    export var EWOULDBLOCK: number;
+    export var EXDEV: number;
+    export var WSAEINTR: number;
+    export var WSAEBADF: number;
+    export var WSAEACCES: number;
+    export var WSAEFAULT: number;
+    export var WSAEINVAL: number;
+    export var WSAEMFILE: number;
+    export var WSAEWOULDBLOCK: number;
+    export var WSAEINPROGRESS: number;
+    export var WSAEALREADY: number;
+    export var WSAENOTSOCK: number;
+    export var WSAEDESTADDRREQ: number;
+    export var WSAEMSGSIZE: number;
+    export var WSAEPROTOTYPE: number;
+    export var WSAENOPROTOOPT: number;
+    export var WSAEPROTONOSUPPORT: number;
+    export var WSAESOCKTNOSUPPORT: number;
+    export var WSAEOPNOTSUPP: number;
+    export var WSAEPFNOSUPPORT: number;
+    export var WSAEAFNOSUPPORT: number;
+    export var WSAEADDRINUSE: number;
+    export var WSAEADDRNOTAVAIL: number;
+    export var WSAENETDOWN: number;
+    export var WSAENETUNREACH: number;
+    export var WSAENETRESET: number;
+    export var WSAECONNABORTED: number;
+    export var WSAECONNRESET: number;
+    export var WSAENOBUFS: number;
+    export var WSAEISCONN: number;
+    export var WSAENOTCONN: number;
+    export var WSAESHUTDOWN: number;
+    export var WSAETOOMANYREFS: number;
+    export var WSAETIMEDOUT: number;
+    export var WSAECONNREFUSED: number;
+    export var WSAELOOP: number;
+    export var WSAENAMETOOLONG: number;
+    export var WSAEHOSTDOWN: number;
+    export var WSAEHOSTUNREACH: number;
+    export var WSAENOTEMPTY: number;
+    export var WSAEPROCLIM: number;
+    export var WSAEUSERS: number;
+    export var WSAEDQUOT: number;
+    export var WSAESTALE: number;
+    export var WSAEREMOTE: number;
+    export var WSASYSNOTREADY: number;
+    export var WSAVERNOTSUPPORTED: number;
+    export var WSANOTINITIALISED: number;
+    export var WSAEDISCON: number;
+    export var WSAENOMORE: number;
+    export var WSAECANCELLED: number;
+    export var WSAEINVALIDPROCTABLE: number;
+    export var WSAEINVALIDPROVIDER: number;
+    export var WSAEPROVIDERFAILEDINIT: number;
+    export var WSASYSCALLFAILURE: number;
+    export var WSASERVICE_NOT_FOUND: number;
+    export var WSATYPE_NOT_FOUND: number;
+    export var WSA_E_NO_MORE: number;
+    export var WSA_E_CANCELLED: number;
+    export var WSAEREFUSED: number;
+    export var SIGHUP: number;
+    export var SIGINT: number;
+    export var SIGILL: number;
+    export var SIGABRT: number;
+    export var SIGFPE: number;
+    export var SIGKILL: number;
+    export var SIGSEGV: number;
+    export var SIGTERM: number;
+    export var SIGBREAK: number;
+    export var SIGWINCH: number;
+    export var SSL_OP_ALL: number;
+    export var SSL_OP_ALLOW_UNSAFE_LEGACY_RENEGOTIATION: number;
+    export var SSL_OP_CIPHER_SERVER_PREFERENCE: number;
+    export var SSL_OP_CISCO_ANYCONNECT: number;
+    export var SSL_OP_COOKIE_EXCHANGE: number;
+    export var SSL_OP_CRYPTOPRO_TLSEXT_BUG: number;
+    export var SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS: number;
+    export var SSL_OP_EPHEMERAL_RSA: number;
+    export var SSL_OP_LEGACY_SERVER_CONNECT: number;
+    export var SSL_OP_MICROSOFT_BIG_SSLV3_BUFFER: number;
+    export var SSL_OP_MICROSOFT_SESS_ID_BUG: number;
+    export var SSL_OP_MSIE_SSLV2_RSA_PADDING: number;
+    export var SSL_OP_NETSCAPE_CA_DN_BUG: number;
+    export var SSL_OP_NETSCAPE_CHALLENGE_BUG: number;
+    export var SSL_OP_NETSCAPE_DEMO_CIPHER_CHANGE_BUG: number;
+    export var SSL_OP_NETSCAPE_REUSE_CIPHER_CHANGE_BUG: number;
+    export var SSL_OP_NO_COMPRESSION: number;
+    export var SSL_OP_NO_QUERY_MTU: number;
+    export var SSL_OP_NO_SESSION_RESUMPTION_ON_RENEGOTIATION: number;
+    export var SSL_OP_NO_SSLv2: number;
+    export var SSL_OP_NO_SSLv3: number;
+    export var SSL_OP_NO_TICKET: number;
+    export var SSL_OP_NO_TLSv1: number;
+    export var SSL_OP_NO_TLSv1_1: number;
+    export var SSL_OP_NO_TLSv1_2: number;
+    export var SSL_OP_PKCS1_CHECK_1: number;
+    export var SSL_OP_PKCS1_CHECK_2: number;
+    export var SSL_OP_SINGLE_DH_USE: number;
+    export var SSL_OP_SINGLE_ECDH_USE: number;
+    export var SSL_OP_SSLEAY_080_CLIENT_DH_BUG: number;
+    export var SSL_OP_SSLREF2_REUSE_CERT_TYPE_BUG: number;
+    export var SSL_OP_TLS_BLOCK_PADDING_BUG: number;
+    export var SSL_OP_TLS_D5_BUG: number;
+    export var SSL_OP_TLS_ROLLBACK_BUG: number;
+    export var ENGINE_METHOD_DSA: number;
+    export var ENGINE_METHOD_DH: number;
+    export var ENGINE_METHOD_RAND: number;
+    export var ENGINE_METHOD_ECDH: number;
+    export var ENGINE_METHOD_ECDSA: number;
+    export var ENGINE_METHOD_CIPHERS: number;
+    export var ENGINE_METHOD_DIGESTS: number;
+    export var ENGINE_METHOD_STORE: number;
+    export var ENGINE_METHOD_PKEY_METHS: number;
+    export var ENGINE_METHOD_PKEY_ASN1_METHS: number;
+    export var ENGINE_METHOD_ALL: number;
+    export var ENGINE_METHOD_NONE: number;
+    export var DH_CHECK_P_NOT_SAFE_PRIME: number;
+    export var DH_CHECK_P_NOT_PRIME: number;
+    export var DH_UNABLE_TO_CHECK_GENERATOR: number;
+    export var DH_NOT_SUITABLE_GENERATOR: number;
+    export var NPN_ENABLED: number;
+    export var RSA_PKCS1_PADDING: number;
+    export var RSA_SSLV23_PADDING: number;
+    export var RSA_NO_PADDING: number;
+    export var RSA_PKCS1_OAEP_PADDING: number;
+    export var RSA_X931_PADDING: number;
+    export var RSA_PKCS1_PSS_PADDING: number;
+    export var POINT_CONVERSION_COMPRESSED: number;
+    export var POINT_CONVERSION_UNCOMPRESSED: number;
+    export var POINT_CONVERSION_HYBRID: number;
+    export var O_RDONLY: number;
+    export var O_WRONLY: number;
+    export var O_RDWR: number;
+    export var S_IFMT: number;
+    export var S_IFREG: number;
+    export var S_IFDIR: number;
+    export var S_IFCHR: number;
+    export var S_IFBLK: number;
+    export var S_IFIFO: number;
+    export var S_IFSOCK: number;
+    export var S_IRWXU: number;
+    export var S_IRUSR: number;
+    export var S_IWUSR: number;
+    export var S_IXUSR: number;
+    export var S_IRWXG: number;
+    export var S_IRGRP: number;
+    export var S_IWGRP: number;
+    export var S_IXGRP: number;
+    export var S_IRWXO: number;
+    export var S_IROTH: number;
+    export var S_IWOTH: number;
+    export var S_IXOTH: number;
+    export var S_IFLNK: number;
+    export var O_CREAT: number;
+    export var O_EXCL: number;
+    export var O_NOCTTY: number;
+    export var O_DIRECTORY: number;
+    export var O_NOATIME: number;
+    export var O_NOFOLLOW: number;
+    export var O_SYNC: number;
+    export var O_SYMLINK: number;
+    export var O_DIRECT: number;
+    export var O_NONBLOCK: number;
+    export var O_TRUNC: number;
+    export var O_APPEND: number;
+    export var F_OK: number;
+    export var R_OK: number;
+    export var W_OK: number;
+    export var X_OK: number;
+    export var UV_UDP_REUSEADDR: number;
+}
diff --git a/code/VideoAccess-VCMP/web/typings/react/react.d.ts b/code/VideoAccess-VCMP/web/typings/react/react.d.ts
new file mode 100644
index 0000000..57ef054
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/typings/react/react.d.ts
@@ -0,0 +1,2517 @@
+// Type definitions for React v0.14
+// Project: http://facebook.github.io/react/
+// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare namespace __React {
+
+    //
+    // React Elements
+    // ----------------------------------------------------------------------
+
+    type ReactType = string | ComponentClass<any> | StatelessComponent<any>;
+
+    type Key = string | number;
+    type Ref<T> = string | ((instance: T) => any);
+    type ComponentState = {} | void;
+
+    interface Attributes {
+        key?: Key;
+    }
+    interface ClassAttributes<T> extends Attributes {
+        ref?: Ref<T>;
+    }
+
+    interface ReactElement<P> {
+        type: string | ComponentClass<P> | SFC<P>;
+        props: P;
+        key?: Key;
+    }
+
+    interface SFCElement<P> extends ReactElement<P> {
+        type: SFC<P>;
+    }
+
+    type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;
+    interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P> {
+        type: ComponentClass<P>;
+        ref?: Ref<T>;
+    }
+
+    type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;
+
+    interface DOMElement<P extends DOMAttributes, T extends Element> extends ReactElement<P> {
+        type: string;
+        ref: Ref<T>;
+    }
+
+    interface ReactHTMLElement<T extends HTMLElement> extends DOMElement<HTMLAttributes, T> {
+    }
+
+    interface ReactSVGElement extends DOMElement<SVGAttributes, SVGElement> {
+    }
+
+    //
+    // Factories
+    // ----------------------------------------------------------------------
+
+    interface Factory<P> {
+        (props?: P & Attributes, ...children: ReactNode[]): ReactElement<P>;
+    }
+
+    interface SFCFactory<P> {
+        (props?: P & Attributes, ...children: ReactNode[]): SFCElement<P>;
+    }
+
+    interface ComponentFactory<P, T extends Component<P, ComponentState>> {
+        (props?: P & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>;
+    }
+
+    type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory<P, T>;
+    type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>;
+
+    interface DOMFactory<P extends DOMAttributes, T extends Element> {
+        (props?: P & ClassAttributes<T>, ...children: ReactNode[]): DOMElement<P, T>;
+    }
+
+    interface HTMLFactory<T extends HTMLElement> extends DOMFactory<HTMLAttributes, T> {
+    }
+
+    interface SVGFactory extends DOMFactory<SVGAttributes, SVGElement> {
+    }
+
+    //
+    // React Nodes
+    // http://facebook.github.io/react/docs/glossary.html
+    // ----------------------------------------------------------------------
+
+    type ReactText = string | number;
+    type ReactChild = ReactElement<any> | ReactText;
+
+    // Should be Array<ReactNode> but type aliases cannot be recursive
+    type ReactFragment = {} | Array<ReactChild | any[] | boolean>;
+    type ReactNode = ReactChild | ReactFragment | boolean;
+
+    //
+    // Top Level API
+    // ----------------------------------------------------------------------
+
+    function createClass<P, S>(spec: ComponentSpec<P, S>): ClassicComponentClass<P>;
+
+    function createFactory<P extends DOMAttributes, T extends Element>(
+        type: string): DOMFactory<P, T>;
+    function createFactory<P>(type: SFC<P>): SFCFactory<P>;
+    function createFactory<P>(
+        type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>): CFactory<P, ClassicComponent<P, ComponentState>>;
+    function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
+        type: ClassType<P, T, C>): CFactory<P, T>;
+    function createFactory<P>(type: ComponentClass<P> | SFC<P>): Factory<P>;
+
+    function createElement<P extends DOMAttributes, T extends Element>(
+        type: string,
+        props?: P & ClassAttributes<T>,
+        ...children: ReactNode[]): DOMElement<P, T>;
+    function createElement<P>(
+        type: SFC<P>,
+        props?: P & Attributes,
+        ...children: ReactNode[]): SFCElement<P>;
+    function createElement<P>(
+        type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass<P>>,
+        props?: P & ClassAttributes<ClassicComponent<P, ComponentState>>,
+        ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>;
+    function createElement<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(
+        type: ClassType<P, T, C>,
+        props?: P & ClassAttributes<T>,
+        ...children: ReactNode[]): CElement<P, T>;
+    function createElement<P>(
+        type: ComponentClass<P> | SFC<P>,
+        props?: P & Attributes,
+        ...children: ReactNode[]): ReactElement<P>;
+
+    function cloneElement<P extends DOMAttributes, T extends Element>(
+        element: DOMElement<P, T>,
+        props?: P & ClassAttributes<T>,
+        ...children: ReactNode[]): DOMElement<P, T>;
+    function cloneElement<P extends Q, Q>(
+        element: SFCElement<P>,
+        props?: Q, // should be Q & Attributes, but then Q is inferred as {}
+        ...children: ReactNode[]): SFCElement<P>;
+    function cloneElement<P extends Q, Q, T extends Component<P, ComponentState>>(
+        element: CElement<P, T>,
+        props?: Q, // should be Q & ClassAttributes<T>
+        ...children: ReactNode[]): CElement<P, T>;
+    function cloneElement<P extends Q, Q>(
+        element: ReactElement<P>,
+        props?: Q, // should be Q & Attributes
+        ...children: ReactNode[]): ReactElement<P>;
+
+    function isValidElement<P>(object: {}): object is ReactElement<P>;
+
+    var DOM: ReactDOM;
+    var PropTypes: ReactPropTypes;
+    var Children: ReactChildren;
+    var version: string;
+
+    //
+    // Component API
+    // ----------------------------------------------------------------------
+
+    type ReactInstance = Component<any, any> | Element;
+
+    // Base component for plain JS classes
+    class Component<P, S> implements ComponentLifecycle<P, S> {
+        constructor(props?: P, context?: any);
+        setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
+        setState(state: S, callback?: () => any): void;
+        forceUpdate(callback?: () => any): void;
+        render(): JSX.Element;
+
+        // React.Props<T> is now deprecated, which means that the `children`
+        // property is not available on `P` by default, even though you can
+        // always pass children as variadic arguments to `createElement`.
+        // In the future, if we can define its call signature conditionally
+        // on the existence of `children` in `P`, then we should remove this.
+        props: P & { children?: ReactNode };
+        state: S;
+        context: {};
+        refs: {
+            [key: string]: ReactInstance
+        };
+    }
+
+    interface ClassicComponent<P, S> extends Component<P, S> {
+        replaceState(nextState: S, callback?: () => any): void;
+        isMounted(): boolean;
+        getInitialState?(): S;
+    }
+
+    interface ChildContextProvider<CC> {
+        getChildContext(): CC;
+    }
+
+    //
+    // Class Interfaces
+    // ----------------------------------------------------------------------
+
+    type SFC<P> = StatelessComponent<P>;
+    interface StatelessComponent<P> {
+        (props?: P, context?: any): ReactElement<any>;
+        propTypes?: ValidationMap<P>;
+        contextTypes?: ValidationMap<any>;
+        defaultProps?: P;
+        displayName?: string;
+    }
+
+    interface ComponentClass<P> {
+        new(props?: P, context?: any): Component<P, ComponentState>;
+        propTypes?: ValidationMap<P>;
+        contextTypes?: ValidationMap<any>;
+        childContextTypes?: ValidationMap<any>;
+        defaultProps?: P;
+        displayName?: string;
+    }
+
+    interface ClassicComponentClass<P> extends ComponentClass<P> {
+        new(props?: P, context?: any): ClassicComponent<P, ComponentState>;
+        getDefaultProps?(): P;
+    }
+
+    /**
+     * We use an intersection type to infer multiple type parameters from
+     * a single argument, which is useful for many top-level API defs.
+     * See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
+     */
+    type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
+        C &
+        (new() => T) &
+        (new() => { props: P });
+
+    //
+    // Component Specs and Lifecycle
+    // ----------------------------------------------------------------------
+
+    interface ComponentLifecycle<P, S> {
+        componentWillMount?(): void;
+        componentDidMount?(): void;
+        componentWillReceiveProps?(nextProps: P, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void;
+        componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void;
+        componentWillUnmount?(): void;
+    }
+
+    interface Mixin<P, S> extends ComponentLifecycle<P, S> {
+        mixins?: Mixin<P, S>;
+        statics?: {
+            [key: string]: any;
+        };
+
+        displayName?: string;
+        propTypes?: ValidationMap<any>;
+        contextTypes?: ValidationMap<any>;
+        childContextTypes?: ValidationMap<any>;
+
+        getDefaultProps?(): P;
+        getInitialState?(): S;
+    }
+
+    interface ComponentSpec<P, S> extends Mixin<P, S> {
+        render(): ReactElement<any>;
+
+        [propertyName: string]: any;
+    }
+
+    //
+    // Event System
+    // ----------------------------------------------------------------------
+
+    interface SyntheticEvent {
+        bubbles: boolean;
+        cancelable: boolean;
+        currentTarget: EventTarget;
+        defaultPrevented: boolean;
+        eventPhase: number;
+        isTrusted: boolean;
+        nativeEvent: Event;
+        preventDefault(): void;
+        stopPropagation(): void;
+        target: EventTarget;
+        timeStamp: Date;
+        type: string;
+    }
+
+    interface ClipboardEvent extends SyntheticEvent {
+        clipboardData: DataTransfer;
+    }
+
+    interface CompositionEvent extends SyntheticEvent {
+        data: string;
+    }
+
+    interface DragEvent extends MouseEvent {
+        dataTransfer: DataTransfer;
+    }
+
+    interface FocusEvent extends SyntheticEvent {
+        relatedTarget: EventTarget;
+    }
+
+    interface FormEvent extends SyntheticEvent {
+    }
+
+    interface KeyboardEvent extends SyntheticEvent {
+        altKey: boolean;
+        charCode: number;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        key: string;
+        keyCode: number;
+        locale: string;
+        location: number;
+        metaKey: boolean;
+        repeat: boolean;
+        shiftKey: boolean;
+        which: number;
+    }
+
+    interface MouseEvent extends SyntheticEvent {
+        altKey: boolean;
+        button: number;
+        buttons: number;
+        clientX: number;
+        clientY: number;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        metaKey: boolean;
+        pageX: number;
+        pageY: number;
+        relatedTarget: EventTarget;
+        screenX: number;
+        screenY: number;
+        shiftKey: boolean;
+    }
+
+    interface TouchEvent extends SyntheticEvent {
+        altKey: boolean;
+        changedTouches: TouchList;
+        ctrlKey: boolean;
+        getModifierState(key: string): boolean;
+        metaKey: boolean;
+        shiftKey: boolean;
+        targetTouches: TouchList;
+        touches: TouchList;
+    }
+
+    interface UIEvent extends SyntheticEvent {
+        detail: number;
+        view: AbstractView;
+    }
+
+    interface WheelEvent extends MouseEvent {
+        deltaMode: number;
+        deltaX: number;
+        deltaY: number;
+        deltaZ: number;
+    }
+
+    interface AnimationEvent extends SyntheticEvent {
+        animationName: string;
+        pseudoElement: string;
+        elapsedTime: number;
+    }
+
+    interface TransitionEvent extends SyntheticEvent {
+        propertyName: string;
+        pseudoElement: string;
+        elapsedTime: number;
+    }
+
+    //
+    // Event Handler Types
+    // ----------------------------------------------------------------------
+
+    interface EventHandler<E extends SyntheticEvent> {
+        (event: E): void;
+    }
+
+    type ReactEventHandler = EventHandler<SyntheticEvent>;
+
+    type ClipboardEventHandler = EventHandler<ClipboardEvent>;
+    type CompositionEventHandler = EventHandler<CompositionEvent>;
+    type DragEventHandler = EventHandler<DragEvent>;
+    type FocusEventHandler = EventHandler<FocusEvent>;
+    type FormEventHandler = EventHandler<FormEvent>;
+    type KeyboardEventHandler = EventHandler<KeyboardEvent>;
+    type MouseEventHandler = EventHandler<MouseEvent>;
+    type TouchEventHandler = EventHandler<TouchEvent>;
+    type UIEventHandler = EventHandler<UIEvent>;
+    type WheelEventHandler = EventHandler<WheelEvent>;
+    type AnimationEventHandler = EventHandler<AnimationEvent>;
+    type TransitionEventHandler = EventHandler<TransitionEvent>;
+
+    //
+    // Props / DOM Attributes
+    // ----------------------------------------------------------------------
+
+    /**
+     * @deprecated. This was used to allow clients to pass `ref` and `key`
+     * to `createElement`, which is no longer necessary due to intersection
+     * types. If you need to declare a props object before passing it to
+     * `createElement` or a factory, use `ClassAttributes<T>`:
+     *
+     * ```ts
+     * var b: Button;
+     * var props: ButtonProps & ClassAttributes<Button> = {
+     *     ref: b => button = b, // ok!
+     *     label: "I'm a Button"
+     * };
+     * ```
+     */
+    interface Props<T> {
+        children?: ReactNode;
+        key?: Key;
+        ref?: Ref<T>;
+    }
+
+    interface HTMLProps<T> extends HTMLAttributes, ClassAttributes<T> {
+    }
+
+    interface SVGProps extends SVGAttributes, ClassAttributes<SVGElement> {
+    }
+
+    interface DOMAttributes {
+        children?: ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        };
+
+        // Clipboard Events
+        onCopy?: ClipboardEventHandler;
+        onCut?: ClipboardEventHandler;
+        onPaste?: ClipboardEventHandler;
+
+        // Composition Events
+        onCompositionEnd?: CompositionEventHandler;
+        onCompositionStart?: CompositionEventHandler;
+        onCompositionUpdate?: CompositionEventHandler;
+
+        // Focus Events
+        onFocus?: FocusEventHandler;
+        onBlur?: FocusEventHandler;
+
+        // Form Events
+        onChange?: FormEventHandler;
+        onInput?: FormEventHandler;
+        onSubmit?: FormEventHandler;
+
+        // Image Events
+        onLoad?: ReactEventHandler;
+        onError?: ReactEventHandler; // also a Media Event
+
+        // Keyboard Events
+        onKeyDown?: KeyboardEventHandler;
+        onKeyPress?: KeyboardEventHandler;
+        onKeyUp?: KeyboardEventHandler;
+
+        // Media Events
+        onAbort?: ReactEventHandler;
+        onCanPlay?: ReactEventHandler;
+        onCanPlayThrough?: ReactEventHandler;
+        onDurationChange?: ReactEventHandler;
+        onEmptied?: ReactEventHandler;
+        onEncrypted?: ReactEventHandler;
+        onEnded?: ReactEventHandler;
+        onLoadedData?: ReactEventHandler;
+        onLoadedMetadata?: ReactEventHandler;
+        onLoadStart?: ReactEventHandler;
+        onPause?: ReactEventHandler;
+        onPlay?: ReactEventHandler;
+        onPlaying?: ReactEventHandler;
+        onProgress?: ReactEventHandler;
+        onRateChange?: ReactEventHandler;
+        onSeeked?: ReactEventHandler;
+        onSeeking?: ReactEventHandler;
+        onStalled?: ReactEventHandler;
+        onSuspend?: ReactEventHandler;
+        onTimeUpdate?: ReactEventHandler;
+        onVolumeChange?: ReactEventHandler;
+        onWaiting?: ReactEventHandler;
+
+        // MouseEvents
+        onClick?: MouseEventHandler;
+        onContextMenu?: MouseEventHandler;
+        onDoubleClick?: MouseEventHandler;
+        onDrag?: DragEventHandler;
+        onDragEnd?: DragEventHandler;
+        onDragEnter?: DragEventHandler;
+        onDragExit?: DragEventHandler;
+        onDragLeave?: DragEventHandler;
+        onDragOver?: DragEventHandler;
+        onDragStart?: DragEventHandler;
+        onDrop?: DragEventHandler;
+        onMouseDown?: MouseEventHandler;
+        onMouseEnter?: MouseEventHandler;
+        onMouseLeave?: MouseEventHandler;
+        onMouseMove?: MouseEventHandler;
+        onMouseOut?: MouseEventHandler;
+        onMouseOver?: MouseEventHandler;
+        onMouseUp?: MouseEventHandler;
+
+        // Selection Events
+        onSelect?: ReactEventHandler;
+
+        // Touch Events
+        onTouchCancel?: TouchEventHandler;
+        onTouchEnd?: TouchEventHandler;
+        onTouchMove?: TouchEventHandler;
+        onTouchStart?: TouchEventHandler;
+
+        // UI Events
+        onScroll?: UIEventHandler;
+
+        // Wheel Events
+        onWheel?: WheelEventHandler;
+
+        // Animation Events
+        onAnimationStart?: AnimationEventHandler;
+        onAnimationEnd?: AnimationEventHandler;
+        onAnimationIteration?: AnimationEventHandler;
+
+        // Transition Events
+        onTransitionEnd?: TransitionEventHandler;
+    }
+
+    // This interface is not complete. Only properties accepting
+    // unitless numbers are listed here (see CSSProperty.js in React)
+    interface CSSProperties {
+
+        /**
+         * Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
+         */
+        alignContent?: any;
+
+        /**
+         * Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis.
+         */
+        alignItems?: any;
+
+        /**
+         * Allows the default alignment to be overridden for individual flex items.
+         */
+        alignSelf?: any;
+
+        /**
+         * This property allows precise alignment of elements, such as graphics, that do not have a baseline-table or lack the desired baseline in their baseline-table. With the alignment-adjust property, the position of the baseline identified by the alignment-baseline can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element.
+         */
+        alignmentAdjust?: any;
+
+        alignmentBaseline?: any;
+
+        /**
+         * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied.
+         */
+        animationDelay?: any;
+
+        /**
+         * Defines whether an animation should run in reverse on some or all cycles.
+         */
+        animationDirection?: any;
+
+        /**
+         * Specifies how many times an animation cycle should play.
+         */
+        animationIterationCount?: any;
+
+        /**
+         * Defines the list of animations that apply to the element.
+         */
+        animationName?: any;
+
+        /**
+         * Defines whether an animation is running or paused.
+         */
+        animationPlayState?: any;
+
+        /**
+         * Allows changing the style of any element to platform-based interface elements or vice versa.
+         */
+        appearance?: any;
+
+        /**
+         * Determines whether or not the “back” side of a transformed element is visible when facing the viewer.
+         */
+        backfaceVisibility?: any;
+
+        /**
+         * Shorthand property to set the values for one or more of:
+         * background-clip, background-color, background-image,
+         * background-origin, background-position, background-repeat,
+         * background-size, and background-attachment.
+         */
+        background?: any;
+
+        /**
+         * If a background-image is specified, this property determines
+         * whether that image's position is fixed within the viewport,
+         * or scrolls along with its containing block.
+         */
+        backgroundAttachment?: "scroll" | "fixed" | "local";
+
+        /**
+         * This property describes how the element's background images should blend with each other and the element's background color.
+         * The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
+         */
+        backgroundBlendMode?: any;
+
+        /**
+         * Sets the background color of an element.
+         */
+        backgroundColor?: any;
+
+        backgroundComposite?: any;
+
+        /**
+         * Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients.
+         */
+        backgroundImage?: any;
+
+        /**
+         * Specifies what the background-position property is relative to.
+         */
+        backgroundOrigin?: any;
+
+        /**
+         * Sets the position of a background image.
+         */
+        backgroundPosition?: any;
+
+        /**
+         * Background-repeat defines if and how background images will be repeated after they have been sized and positioned
+         */
+        backgroundRepeat?: any;
+
+        /**
+         * Obsolete - spec retired, not implemented.
+         */
+        baselineShift?: any;
+
+        /**
+         * Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior.
+         */
+        behavior?: any;
+
+        /**
+         * Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. It can be used to set border-width, border-style and border-color, or a subset of these.
+         */
+        border?: any;
+
+        /**
+         * Shorthand that sets the values of border-bottom-color,
+         * border-bottom-style, and border-bottom-width.
+         */
+        borderBottom?: any;
+
+        /**
+         * Sets the color of the bottom border of an element.
+         */
+        borderBottomColor?: any;
+
+        /**
+         * Defines the shape of the border of the bottom-left corner.
+         */
+        borderBottomLeftRadius?: any;
+
+        /**
+         * Defines the shape of the border of the bottom-right corner.
+         */
+        borderBottomRightRadius?: any;
+
+        /**
+         * Sets the line style of the bottom border of a box.
+         */
+        borderBottomStyle?: any;
+
+        /**
+         * Sets the width of an element's bottom border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
+         */
+        borderBottomWidth?: any;
+
+        /**
+         * Border-collapse can be used for collapsing the borders between table cells
+         */
+        borderCollapse?: any;
+
+        /**
+         * The CSS border-color property sets the color of an element's four borders. This property can have from one to four values, made up of the elementary properties:     •       border-top-color
+         *      •       border-right-color
+         *      •       border-bottom-color
+         *      •       border-left-color The default color is the currentColor of each of these values.
+         * If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order.
+         */
+        borderColor?: any;
+
+        /**
+         * Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect.
+         */
+        borderCornerShape?: any;
+
+        /**
+         * The property border-image-source is used to set the image to be used instead of the border style. If this is set to none the border-style is used instead.
+         */
+        borderImageSource?: any;
+
+        /**
+         * The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.
+         */
+        borderImageWidth?: any;
+
+        /**
+         * Shorthand property that defines the border-width, border-style and border-color of an element's left border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the left border — border-left-width, border-left-style and border-left-color.
+         */
+        borderLeft?: any;
+
+        /**
+         * The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, but often you will find it more convenient to fix the border's left color as part of a shorthand set, either border-left or border-color.
+         * Colors can be defined several ways. For more information, see Usage.
+         */
+        borderLeftColor?: any;
+
+        /**
+         * Sets the style of an element's left border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.
+         */
+        borderLeftStyle?: any;
+
+        /**
+         * Sets the width of an element's left border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
+         */
+        borderLeftWidth?: any;
+
+        /**
+         * Shorthand property that defines the border-width, border-style and border-color of an element's right border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the right border — border-right-width, border-right-style and border-right-color.
+         */
+        borderRight?: any;
+
+        /**
+         * Sets the color of an element's right border. This page explains the border-right-color value, but often you will find it more convenient to fix the border's right color as part of a shorthand set, either border-right or border-color.
+         * Colors can be defined several ways. For more information, see Usage.
+         */
+        borderRightColor?: any;
+
+        /**
+         * Sets the style of an element's right border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.
+         */
+        borderRightStyle?: any;
+
+        /**
+         * Sets the width of an element's right border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
+         */
+        borderRightWidth?: any;
+
+        /**
+         * Specifies the distance between the borders of adjacent cells.
+         */
+        borderSpacing?: any;
+
+        /**
+         * Sets the style of an element's four borders. This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of border-top-style, border-right-style, border-bottom-style, border-left-style, where each border style may be assigned a separate value.
+         */
+        borderStyle?: any;
+
+        /**
+         * Shorthand property that defines the border-width, border-style and border-color of an element's top border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the top border — border-top-width, border-top-style and border-top-color.
+         */
+        borderTop?: any;
+
+        /**
+         * Sets the color of an element's top border. This page explains the border-top-color value, but often you will find it more convenient to fix the border's top color as part of a shorthand set, either border-top or border-color.
+         * Colors can be defined several ways. For more information, see Usage.
+         */
+        borderTopColor?: any;
+
+        /**
+         * Sets the rounding of the top-left corner of the element.
+         */
+        borderTopLeftRadius?: any;
+
+        /**
+         * Sets the rounding of the top-right corner of the element.
+         */
+        borderTopRightRadius?: any;
+
+        /**
+         * Sets the style of an element's top border. To set all four borders, use the shorthand property, border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style.
+         */
+        borderTopStyle?: any;
+
+        /**
+         * Sets the width of an element's top border. To set all four borders, use the border-width shorthand property which sets the values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
+         */
+        borderTopWidth?: any;
+
+        /**
+         * Sets the width of an element's four borders. This property can have from one to four values. This is a shorthand property for setting values simultaneously for border-top-width, border-right-width, border-bottom-width, and border-left-width.
+         */
+        borderWidth?: any;
+
+        /**
+         * This property specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the bottom edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
+         */
+        bottom?: any;
+
+        /**
+         * Obsolete.
+         */
+        boxAlign?: any;
+
+        /**
+         * Breaks a box into fragments creating new borders, padding and repeating backgrounds or lets it stay as a continuous box on a page break, column break, or, for inline elements, at a line break.
+         */
+        boxDecorationBreak?: any;
+
+        /**
+         * Deprecated
+         */
+        boxDirection?: any;
+
+        /**
+         * Do not use. This property has been replaced by the flex-wrap property.
+         * Gets or sets a value that specifies the direction to add successive rows or columns when the value of box-lines is set to multiple.
+         */
+        boxLineProgression?: any;
+
+        /**
+         * Do not use. This property has been replaced by the flex-wrap property.
+         * Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object.
+         */
+        boxLines?: any;
+
+        /**
+         * Do not use. This property has been replaced by flex-order.
+         * Specifies the ordinal group that a child element of the object belongs to. This ordinal value identifies the display order (along the axis defined by the box-orient property) for the group.
+         */
+        boxOrdinalGroup?: any;
+
+        /**
+         * Deprecated.
+         */
+        boxFlex?: number;
+
+        /**
+         * Deprecated.
+         */
+        boxFlexGroup?: number;
+
+        /**
+         * The CSS break-after property allows you to force a break on multi-column layouts. More specifically, it allows you to force a break after an element. It allows you to determine if a break should occur, and what type of break it should be. The break-after CSS property describes how the page, column or region break behaves after the generated box. If there is no generated box, the property is ignored.
+         */
+        breakAfter?: any;
+
+        /**
+         * Control page/column/region breaks that fall above a block of content
+         */
+        breakBefore?: any;
+
+        /**
+         * Control page/column/region breaks that fall within a block of content
+         */
+        breakInside?: any;
+
+        /**
+         * The clear CSS property specifies if an element can be positioned next to or must be positioned below the floating elements that precede it in the markup.
+         */
+        clear?: any;
+
+        /**
+         * Deprecated; see clip-path.
+         * Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.
+         */
+        clip?: any;
+
+        /**
+         * Clipping crops an graphic, so that only a portion of the graphic is rendered, or filled. This clip-rule property, when used with the clip-path property, defines which clip rule, or algorithm, to use when filling the different parts of a graphics.
+         */
+        clipRule?: any;
+
+        /**
+         * The color property sets the color of an element's foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a).
+         */
+        color?: any;
+
+        /**
+         * Describes the number of columns of the element.
+         */
+        columnCount?: number;
+
+        /**
+         * Specifies how to fill columns (balanced or sequential).
+         */
+        columnFill?: any;
+
+        /**
+         * The column-gap property controls the width of the gap between columns in multi-column elements.
+         */
+        columnGap?: any;
+
+        /**
+         * Sets the width, style, and color of the rule between columns.
+         */
+        columnRule?: any;
+
+        /**
+         * Specifies the color of the rule between columns.
+         */
+        columnRuleColor?: any;
+
+        /**
+         * Specifies the width of the rule between columns.
+         */
+        columnRuleWidth?: any;
+
+        /**
+         * The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.
+         */
+        columnSpan?: any;
+
+        /**
+         * Specifies the width of columns in multi-column elements.
+         */
+        columnWidth?: any;
+
+        /**
+         * This property is a shorthand property for setting column-width and/or column-count.
+         */
+        columns?: any;
+
+        /**
+         * The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked).
+         */
+        counterIncrement?: any;
+
+        /**
+         * The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.) Each time the given element is invoked, the counters specified by the property are set to the given integer.
+         */
+        counterReset?: any;
+
+        /**
+         * The cue property specifies sound files (known as an "auditory icon") to be played by speech media agents before and after presenting an element's content; if only one file is specified, it is played both before and after. The volume at which the file(s) should be played, relative to the volume of the main element, may also be specified. The icon files may also be set separately with the cue-before and cue-after properties.
+         */
+        cue?: any;
+
+        /**
+         * The cue-after property specifies a sound file (known as an "auditory icon") to be played by speech media agents after presenting an element's content; the volume at which the file should be played may also be specified. The shorthand property cue sets cue sounds for both before and after the element is presented.
+         */
+        cueAfter?: any;
+
+        /**
+         * Specifies the mouse cursor displayed when the mouse pointer is over an element.
+         */
+        cursor?: any;
+
+        /**
+         * The direction CSS property specifies the text direction/writing direction. The rtl is used for Hebrew or Arabic text, the ltr is for other languages.
+         */
+        direction?: any;
+
+        /**
+         * This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties.
+         */
+        display?: any;
+
+        /**
+         * The ‘fill’ property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. The zero-width geometric outline of a shape is included in the area to be painted.
+         */
+        fill?: any;
+
+        /**
+         * SVG: Specifies the opacity of the color or the content the current object is filled with.
+         */
+        fillOpacity?: number;
+
+        /**
+         * The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.
+         * The ‘fill-rule’ property provides two options for how the inside of a shape is determined:
+         */
+        fillRule?: any;
+
+        /**
+         * Applies various image processing effects. This property is largely unsupported. See Compatibility section for more information.
+         */
+        filter?: any;
+
+        /**
+         * Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.
+         */
+        flex?: number | string;
+
+        /**
+         * Obsolete, do not use. This property has been renamed to align-items.
+         * Specifies the alignment (perpendicular to the layout axis defined by the flex-direction property) of child elements of the object.
+         */
+        flexAlign?: any;
+
+        /**
+         * The flex-basis CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink).
+         */
+        flexBasis?: any;
+
+        /**
+         * The flex-direction CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis.
+         */
+        flexDirection?: any;
+
+        /**
+         * The flex-flow CSS property defines the flex container's main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties.
+         */
+        flexFlow?: any;
+
+        /**
+         * Specifies the flex grow factor of a flex item.
+         */
+        flexGrow?: number;
+
+        /**
+         * Do not use. This property has been renamed to align-self
+         * Specifies the alignment (perpendicular to the layout axis defined by flex-direction) of child elements of the object.
+         */
+        flexItemAlign?: any;
+
+        /**
+         * Do not use. This property has been renamed to align-content.
+         * Specifies how a flexbox's lines align within the flexbox when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property.
+         */
+        flexLinePack?: any;
+
+        /**
+         * Gets or sets a value that specifies the ordinal group that a flexbox element belongs to. This ordinal value identifies the display order for the group.
+         */
+        flexOrder?: any;
+
+        /**
+         * Specifies the flex shrink factor of a flex item.
+         */
+        flexShrink?: number;
+
+        /**
+         * Elements which have the style float are floated horizontally. These elements can move as far to the left or right of the containing element. All elements after the floating element will flow around it, but elements before the floating element are not impacted. If several floating elements are placed after each other, they will float next to each other as long as there is room.
+         */
+        float?: any;
+
+        /**
+         * Flows content from a named flow (specified by a corresponding flow-into) through selected elements to form a dynamic chain of layout regions.
+         */
+        flowFrom?: any;
+
+        /**
+         * The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting.
+         */
+        font?: any;
+
+        /**
+         * The font-family property allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character.
+         */
+        fontFamily?: any;
+
+        /**
+         * The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text. This property controls <bold>metric kerning</bold> - that utilizes adjustment data contained in the font. Optical Kerning is not supported as yet.
+         */
+        fontKerning?: any;
+
+        /**
+         * Specifies the size of the font. Used to compute em and ex units.
+         */
+        fontSize?: number | string;
+
+        /**
+         * The font-size-adjust property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used. This preserves the readability of the text when fallback happens.
+         */
+        fontSizeAdjust?: any;
+
+        /**
+         * Allows you to expand or condense the widths for a normal, condensed, or expanded font face.
+         */
+        fontStretch?: any;
+
+        /**
+         * The font-style property allows normal, italic, or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face.
+         */
+        fontStyle?: any;
+
+        /**
+         * This value specifies whether the user agent is allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces.
+         */
+        fontSynthesis?: any;
+
+        /**
+         * The font-variant property enables you to select the small-caps font within a font family.
+         */
+        fontVariant?: any;
+
+        /**
+         * Fonts can provide alternate glyphs in addition to default glyph for a character. This property provides control over the selection of these alternate glyphs.
+         */
+        fontVariantAlternates?: any;
+
+        /**
+         * Specifies the weight or boldness of the font.
+         */
+        fontWeight?: "normal" | "bold" | "lighter" | "bolder" | number;
+
+        /**
+         * Lays out one or more grid items bound by 4 grid lines. Shorthand for setting grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single declaration.
+         */
+        gridArea?: any;
+
+        /**
+         * Controls a grid item's placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration.
+         */
+        gridColumn?: any;
+
+        /**
+         * Controls a grid item's placement in a grid area as well as grid position and a grid span. The grid-column-end property (with grid-row-start, grid-row-end, and grid-column-start) determines a grid item's placement by specifying the grid lines of a grid item's grid area.
+         */
+        gridColumnEnd?: any;
+
+        /**
+         * Determines a grid item's placement by specifying the starting grid lines of a grid item's grid area . A grid item's placement in a grid area consists of a grid position and a grid span. See also ( grid-row-start, grid-row-end, and grid-column-end)
+         */
+        gridColumnStart?: any;
+
+        /**
+         * Gets or sets a value that indicates which row an element within a Grid should appear in. Shorthand for setting grid-row-start and grid-row-end in a single declaration.
+         */
+        gridRow?: any;
+
+        /**
+         * Determines a grid item’s placement by specifying the block-end. A grid item's placement in a grid area consists of a grid position and a grid span. The grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end) determines a grid item's placement by specifying the grid lines of a grid item's grid area.
+         */
+        gridRowEnd?: any;
+
+        /**
+         * Specifies a row position based upon an integer location, string value, or desired row size.
+         * css/properties/grid-row is used as short-hand for grid-row-position and grid-row-position
+         */
+        gridRowPosition?: any;
+
+        gridRowSpan?: any;
+
+        /**
+         * Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.
+         */
+        gridTemplateAreas?: any;
+
+        /**
+         * Specifies (with grid-template-rows) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid.
+         */
+        gridTemplateColumns?: any;
+
+        /**
+         * Specifies (with grid-template-columns) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid.
+         */
+        gridTemplateRows?: any;
+
+        /**
+         * Sets the height of an element. The content area of the element height does not include the padding, border, and margin of the element.
+         */
+        height?: any;
+
+        /**
+         * Specifies the minimum number of characters in a hyphenated word
+         */
+        hyphenateLimitChars?: any;
+
+        /**
+         * Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit.
+         */
+        hyphenateLimitLines?: any;
+
+        /**
+         * Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered to pull part of a word from the next line back up into the current one.
+         */
+        hyphenateLimitZone?: any;
+
+        /**
+         * Specifies whether or not words in a sentence can be split by the use of a manual or automatic hyphenation mechanism.
+         */
+        hyphens?: any;
+
+        imeMode?: any;
+
+        layoutGrid?: any;
+
+        layoutGridChar?: any;
+
+        layoutGridLine?: any;
+
+        layoutGridMode?: any;
+
+        layoutGridType?: any;
+
+        /**
+         * Sets the left edge of an element
+         */
+        left?: any;
+
+        /**
+         * The letter-spacing CSS property specifies the spacing behavior between text characters.
+         */
+        letterSpacing?: any;
+
+        /**
+         * Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean.
+         */
+        lineBreak?: any;
+
+        lineClamp?: number;
+
+        /**
+         * Specifies the height of an inline block level element.
+         */
+        lineHeight?: number | string;
+
+        /**
+         * Shorthand property that sets the list-style-type, list-style-position and list-style-image properties in one declaration.
+         */
+        listStyle?: any;
+
+        /**
+         * This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker. That also means that if the image is not available, it will show the style specified by list-style-property
+         */
+        listStyleImage?: any;
+
+        /**
+         * Specifies if the list-item markers should appear inside or outside the content flow.
+         */
+        listStylePosition?: any;
+
+        /**
+         * Specifies the type of list-item marker in a list.
+         */
+        listStyleType?: any;
+
+        /**
+         * The margin property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed.
+         */
+        margin?: any;
+
+        /**
+         * margin-bottom sets the bottom margin of an element.
+         */
+        marginBottom?: any;
+
+        /**
+         * margin-left sets the left margin of an element.
+         */
+        marginLeft?: any;
+
+        /**
+         * margin-right sets the right margin of an element.
+         */
+        marginRight?: any;
+
+        /**
+         * margin-top sets the top margin of an element.
+         */
+        marginTop?: any;
+
+        /**
+         * The marquee-direction determines the initial direction in which the marquee content moves.
+         */
+        marqueeDirection?: any;
+
+        /**
+         * The 'marquee-style' property determines a marquee's scrolling behavior.
+         */
+        marqueeStyle?: any;
+
+        /**
+         * This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. Omitted values are set to their original properties' initial values.
+         */
+        mask?: any;
+
+        /**
+         * This property is shorthand for setting mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat. Omitted values are set to their original properties' initial values.
+         */
+        maskBorder?: any;
+
+        /**
+         * This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. The first keyword applies to the horizontal sides, the second one applies to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first, similar to the CSS border-image-repeat property.
+         */
+        maskBorderRepeat?: any;
+
+        /**
+         * This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, dividing it into nine regions: four corners, four edges, and a middle. The middle image part is discarded and treated as fully transparent black unless the fill keyword is present. The four values set the top, right, bottom and left offsets in that order, similar to the CSS border-image-slice property.
+         */
+        maskBorderSlice?: any;
+
+        /**
+         * Specifies an image to be used as a mask. An image that is empty, fails to download, is non-existent, or cannot be displayed is ignored and does not mask the element.
+         */
+        maskBorderSource?: any;
+
+        /**
+         * This property sets the width of the mask box image, similar to the CSS border-image-width property.
+         */
+        maskBorderWidth?: any;
+
+        /**
+         * Determines the mask painting area, which defines the area that is affected by the mask. The painted content of an element may be restricted to this area.
+         */
+        maskClip?: any;
+
+        /**
+         * For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes box-decoration-break operates on to determine the mask positioning area(s).
+         */
+        maskOrigin?: any;
+
+        /**
+         * This property must not be used. It is no longer included in any standard or standard track specification, nor is it implemented in any browser. It is only used when the text-align-last property is set to size. It controls allowed adjustments of font-size to fit line content.
+         */
+        maxFontSize?: any;
+
+        /**
+         * Sets the maximum height for an element. It prevents the height of the element to exceed the specified value. If min-height is specified and is greater than max-height, max-height is overridden.
+         */
+        maxHeight?: any;
+
+        /**
+         * Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width.
+         */
+        maxWidth?: any;
+
+        /**
+         * Sets the minimum height for an element. It prevents the height of the element to be smaller than the specified value. The value of min-height overrides both max-height and height.
+         */
+        minHeight?: any;
+
+        /**
+         * Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width.
+         */
+        minWidth?: any;
+
+        /**
+         * Specifies the transparency of an element.
+         */
+        opacity?: number;
+
+        /**
+         * Specifies the order used to lay out flex items in their flex container.
+         * Elements are laid out in the ascending order of the order value.
+         */
+        order?: number;
+
+        /**
+         * In paged media, this property defines the minimum number of lines in
+         * a block container that must be left at the bottom of the page.
+         */
+        orphans?: number;
+
+        /**
+         * The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.
+         * Outlines differ from borders in the following ways:  •       Outlines do not take up space, they are drawn above the content.
+         *      •       Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. Internet Explorer attempts to place the smallest contiguous outline around all elements or shapes that are indicated to have an outline. Opera draws a non-rectangular shape around a construct.
+         */
+        outline?: any;
+
+        /**
+         * The outline-color property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.
+         */
+        outlineColor?: any;
+
+        /**
+         * The outline-offset property offsets the outline and draw it beyond the border edge.
+         */
+        outlineOffset?: any;
+
+        /**
+         * The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion.
+         */
+        overflow?: any;
+
+        /**
+         * Specifies the preferred scrolling methods for elements that overflow.
+         */
+        overflowStyle?: any;
+
+        /**
+         * Controls how extra content exceeding the x-axis of the bounding box of an element is rendered.
+         */
+        overflowX?: any;
+
+        /**
+         * Controls how extra content exceeding the y-axis of the bounding box of an element is rendered.
+         */
+        overflowY?: any;
+
+        /**
+         * The padding optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased.
+         * The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).
+         */
+        padding?: any;
+
+        /**
+         * The padding-bottom CSS property of an element sets the padding space required on the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.
+         */
+        paddingBottom?: any;
+
+        /**
+         * The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and its border. Contrary to margin-left values, negative values of padding-left are invalid.
+         */
+        paddingLeft?: any;
+
+        /**
+         * The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Contrary to margin-right values, negative values of padding-right are invalid.
+         */
+        paddingRight?: any;
+
+        /**
+         * The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.
+         */
+        paddingTop?: any;
+
+        /**
+         * The page-break-after property is supported in all major browsers. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation.
+         */
+        pageBreakAfter?: any;
+
+        /**
+         * The page-break-before property sets the page-breaking behavior before an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation.
+         */
+        pageBreakBefore?: any;
+
+        /**
+         * Sets the page-breaking behavior inside an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation.
+         */
+        pageBreakInside?: any;
+
+        /**
+         * The pause property determines how long a speech media agent should pause before and after presenting an element. It is a shorthand for the pause-before and pause-after properties.
+         */
+        pause?: any;
+
+        /**
+         * The pause-after property determines how long a speech media agent should pause after presenting an element. It may be replaced by the shorthand property pause, which sets pause time before and after.
+         */
+        pauseAfter?: any;
+
+        /**
+         * The pause-before property determines how long a speech media agent should pause before presenting an element. It may be replaced by the shorthand property pause, which sets pause time before and after.
+         */
+        pauseBefore?: any;
+
+        /**
+         * The perspective property defines how far an element is placed from the view on the z-axis, from the screen to the viewer.
+         * Perspective defines how an object is viewed. In graphic arts, perspective is the representation on a flat surface of what the viewer's eye would see in a 3D space. (See Wikipedia for more information about graphical perspective and for related illustrations.)
+         * The illusion of perspective on a flat surface, such as a computer screen, is created by projecting points on the flat surface as they would appear if the flat surface were a window through which the viewer was looking at the object. In discussion of virtual environments, this flat surface is called a projection plane.
+         */
+        perspective?: any;
+
+        /**
+         * The perspective-origin property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
+         * When used with perspective, perspective-origin changes the appearance of an object, as if a viewer were looking at it from a different origin. An object appears differently if a viewer is looking directly at it versus looking at it from below, above, or from the side. Thus, the perspective-origin is like a vanishing point.
+         * The default value of perspective-origin is 50% 50%. This displays an object as if the viewer's eye were positioned directly at the center of the screen, both top-to-bottom and left-to-right. A value of 0% 0% changes the object as if the viewer was looking toward the top left angle. A value of 100% 100% changes the appearance as if viewed toward the bottom right angle.
+         */
+        perspectiveOrigin?: any;
+
+        /**
+         * The pointer-events property allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events.
+         */
+        pointerEvents?: any;
+
+        /**
+         * The position property controls the type of positioning used by an element within its parent elements. The effect of the position property depends on a lot of factors, for example the position property of parent elements.
+         */
+        position?: any;
+
+        /**
+         * Obsolete: unsupported.
+         * This property determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its "ink" lines up with the first glyph in the line above and below.
+         */
+        punctuationTrim?: any;
+
+        /**
+         * Sets the type of quotation marks for embedded quotations.
+         */
+        quotes?: any;
+
+        /**
+         * Controls whether the last region in a chain displays additional 'overset' content according its default overflow property, or if it displays a fragment of content as if it were flowing into a subsequent region.
+         */
+        regionFragment?: any;
+
+        /**
+         * The rest-after property determines how long a speech media agent should pause after presenting an element's main content, before presenting that element's exit cue sound. It may be replaced by the shorthand property rest, which sets rest time before and after.
+         */
+        restAfter?: any;
+
+        /**
+         * The rest-before property determines how long a speech media agent should pause after presenting an intro cue sound for an element, before presenting that element's main content. It may be replaced by the shorthand property rest, which sets rest time before and after.
+         */
+        restBefore?: any;
+
+        /**
+         * Specifies the position an element in relation to the right side of the containing element.
+         */
+        right?: any;
+
+        rubyAlign?: any;
+
+        rubyPosition?: any;
+
+        /**
+         * Defines the alpha channel threshold used to extract a shape from an image. Can be thought of as a "minimum opacity" threshold; that is, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.
+         */
+        shapeImageThreshold?: any;
+
+        /**
+         * A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element. See Editor's Draft <http://dev.w3.org/csswg/css-shapes/> and CSSWG wiki page on next-level plans <http://wiki.csswg.org/spec/css-shapes>
+         */
+        shapeInside?: any;
+
+        /**
+         * Adds a margin to a shape-outside. In effect, defines a new shape that is the smallest contour around all the points that are the shape-margin distance outward perpendicular to each point on the underlying shape. For points where a perpendicular direction is not defined (e.g., a triangle corner), takes all points on a circle centered at the point and with a radius of the shape-margin distance. This property accepts only non-negative values.
+         */
+        shapeMargin?: any;
+
+        /**
+         * Declares a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area.
+         */
+        shapeOutside?: any;
+
+        /**
+         * The speak property determines whether or not a speech synthesizer will read aloud the contents of an element.
+         */
+        speak?: any;
+
+        /**
+         * The speak-as property determines how the speech synthesizer interprets the content: words as whole words or as a sequence of letters, numbers as a numerical value or a sequence of digits, punctuation as pauses in speech or named punctuation characters.
+         */
+        speakAs?: any;
+
+        /**
+         * SVG: Specifies the opacity of the outline on the current object.
+         */
+        strokeOpacity?: number;
+
+        /**
+         * SVG: Specifies the width of the outline on the current object.
+         */
+        strokeWidth?: number;
+
+        /**
+         * The tab-size CSS property is used to customise the width of a tab (U+0009) character.
+         */
+        tabSize?: any;
+
+        /**
+         * The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns.
+         */
+        tableLayout?: any;
+
+        /**
+         * The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
+         */
+        textAlign?: any;
+
+        /**
+         * The text-align-last CSS property describes how the last line of a block element or a line before line break is aligned in its parent block element.
+         */
+        textAlignLast?: any;
+
+        /**
+         * The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.
+         * underline and overline decorations are positioned under the text, line-through over it.
+         */
+        textDecoration?: any;
+
+        /**
+         * Sets the color of any text decoration, such as underlines, overlines, and strike throughs.
+         */
+        textDecorationColor?: any;
+
+        /**
+         * Sets what kind of line decorations are added to an element, such as underlines, overlines, etc.
+         */
+        textDecorationLine?: any;
+
+        textDecorationLineThrough?: any;
+
+        textDecorationNone?: any;
+
+        textDecorationOverline?: any;
+
+        /**
+         * Specifies what parts of an element’s content are skipped over when applying any text decoration.
+         */
+        textDecorationSkip?: any;
+
+        /**
+         * This property specifies the style of the text decoration line drawn on the specified element. The intended meaning for the values are the same as those of the border-style-properties.
+         */
+        textDecorationStyle?: any;
+
+        textDecorationUnderline?: any;
+
+        /**
+         * The text-emphasis property will apply special emphasis marks to the elements text. Slightly similar to the text-decoration property only that this property can have affect on the line-height. It also is noted that this is shorthand for text-emphasis-style and for text-emphasis-color.
+         */
+        textEmphasis?: any;
+
+        /**
+         * The text-emphasis-color property specifies the foreground color of the emphasis marks.
+         */
+        textEmphasisColor?: any;
+
+        /**
+         * The text-emphasis-style property applies special emphasis marks to an element's text.
+         */
+        textEmphasisStyle?: any;
+
+        /**
+         * This property helps determine an inline box's block-progression dimension, derived from the text-height and font-size properties for non-replaced elements, the height or the width for replaced elements, and the stacked block-progression dimension for inline-block elements. The block-progression dimension determines the position of the padding, border and margin for the element.
+         */
+        textHeight?: any;
+
+        /**
+         * Specifies the amount of space horizontally that should be left on the first line of the text of an element. This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box.
+         */
+        textIndent?: any;
+
+        textJustifyTrim?: any;
+
+        textKashidaSpace?: any;
+
+        /**
+         * The text-line-through property is a shorthand property for text-line-through-style, text-line-through-color and text-line-through-mode. (Considered obsolete; use text-decoration instead.)
+         */
+        textLineThrough?: any;
+
+        /**
+         * Specifies the line colors for the line-through text decoration.
+         * (Considered obsolete; use text-decoration-color instead.)
+         */
+        textLineThroughColor?: any;
+
+        /**
+         * Sets the mode for the line-through text decoration, determining whether the text decoration affects the space characters or not.
+         * (Considered obsolete; use text-decoration-skip instead.)
+         */
+        textLineThroughMode?: any;
+
+        /**
+         * Specifies the line style for line-through text decoration.
+         * (Considered obsolete; use text-decoration-style instead.)
+         */
+        textLineThroughStyle?: any;
+
+        /**
+         * Specifies the line width for the line-through text decoration.
+         */
+        textLineThroughWidth?: any;
+
+        /**
+         * The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-mode and text-overflow-ellipsis
+         */
+        textOverflow?: any;
+
+        /**
+         * The text-overline property is the shorthand for the text-overline-style, text-overline-width, text-overline-color, and text-overline-mode properties.
+         */
+        textOverline?: any;
+
+        /**
+         * Specifies the line color for the overline text decoration.
+         */
+        textOverlineColor?: any;
+
+        /**
+         * Sets the mode for the overline text decoration, determining whether the text decoration affects the space characters or not.
+         */
+        textOverlineMode?: any;
+
+        /**
+         * Specifies the line style for overline text decoration.
+         */
+        textOverlineStyle?: any;
+
+        /**
+         * Specifies the line width for the overline text decoration.
+         */
+        textOverlineWidth?: any;
+
+        /**
+         * The text-rendering CSS property provides information to the browser about how to optimize when rendering text. Options are: legibility, speed or geometric precision.
+         */
+        textRendering?: any;
+
+        /**
+         * Obsolete: unsupported.
+         */
+        textScript?: any;
+
+        /**
+         * The CSS text-shadow property applies one or more drop shadows to the text and <text-decorations> of an element. Each shadow is specified as an offset from the text, along with optional color and blur radius values.
+         */
+        textShadow?: any;
+
+        /**
+         * This property transforms text for styling purposes. (It has no effect on the underlying content.)
+         */
+        textTransform?: any;
+
+        /**
+         * Unsupported.
+         * This property will add a underline position value to the element that has an underline defined.
+         */
+        textUnderlinePosition?: any;
+
+        /**
+         * After review this should be replaced by text-decoration should it not?
+         * This property will set the underline style for text with a line value for underline, overline, and line-through.
+         */
+        textUnderlineStyle?: any;
+
+        /**
+         * This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
+         */
+        top?: any;
+
+        /**
+         * Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming.
+         */
+        touchAction?: any;
+
+        /**
+         * CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values.
+         */
+        transform?: any;
+
+        /**
+         * This property defines the origin of the transformation axes relative to the element to which the transformation is applied.
+         */
+        transformOrigin?: any;
+
+        /**
+         * This property allows you to define the relative position of the origin of the transformation grid along the z-axis.
+         */
+        transformOriginZ?: any;
+
+        /**
+         * This property specifies how nested elements are rendered in 3D space relative to their parent.
+         */
+        transformStyle?: any;
+
+        /**
+         * The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element.
+         */
+        transition?: any;
+
+        /**
+         * Defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
+         */
+        transitionDelay?: any;
+
+        /**
+         * The 'transition-duration' property specifies the length of time a transition animation takes to complete.
+         */
+        transitionDuration?: any;
+
+        /**
+         * The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
+         */
+        transitionProperty?: any;
+
+        /**
+         * Sets the pace of action within a transition
+         */
+        transitionTimingFunction?: any;
+
+        /**
+         * The unicode-bidi CSS property specifies the level of embedding with respect to the bidirectional algorithm.
+         */
+        unicodeBidi?: any;
+
+        /**
+         * unicode-range allows you to set a specific range of characters to be downloaded from a font (embedded using @font-face) and made available for use on the current page.
+         */
+        unicodeRange?: any;
+
+        /**
+         * This is for all the high level UX stuff.
+         */
+        userFocus?: any;
+
+        /**
+         * For inputing user content
+         */
+        userInput?: any;
+
+        /**
+         * The vertical-align property controls how inline elements or text are vertically aligned compared to the baseline. If this property is used on table-cells it controls the vertical alignment of content of the table cell.
+         */
+        verticalAlign?: any;
+
+        /**
+         * The visibility property specifies whether the boxes generated by an element are rendered.
+         */
+        visibility?: any;
+
+        /**
+         * The voice-balance property sets the apparent position (in stereo sound) of the synthesized voice for spoken media.
+         */
+        voiceBalance?: any;
+
+        /**
+         * The voice-duration property allows the author to explicitly set the amount of time it should take a speech synthesizer to read an element's content, for example to allow the speech to be synchronized with other media. With a value of auto (the default) the length of time it takes to read the content is determined by the content itself and the voice-rate property.
+         */
+        voiceDuration?: any;
+
+        /**
+         * The voice-family property sets the speaker's voice used by a speech media agent to read an element. The speaker may be specified as a named character (to match a voice option in the speech reading software) or as a generic description of the age and gender of the voice. Similar to the font-family property for visual media, a comma-separated list of fallback options may be given in case the speech reader does not recognize the character name or cannot synthesize the requested combination of generic properties.
+         */
+        voiceFamily?: any;
+
+        /**
+         * The voice-pitch property sets pitch or tone (high or low) for the synthesized speech when reading an element; the pitch may be specified absolutely or relative to the normal pitch for the voice-family used to read the text.
+         */
+        voicePitch?: any;
+
+        /**
+         * The voice-range property determines how much variation in pitch or tone will be created by the speech synthesize when reading an element. Emphasized text, grammatical structures and punctuation may all be rendered as changes in pitch, this property determines how strong or obvious those changes are; large ranges are associated with enthusiastic or emotional speech, while small ranges are associated with flat or mechanical speech.
+         */
+        voiceRange?: any;
+
+        /**
+         * The voice-rate property sets the speed at which the voice synthesized by a speech media agent will read content.
+         */
+        voiceRate?: any;
+
+        /**
+         * The voice-stress property sets the level of vocal emphasis to be used for synthesized speech reading the element.
+         */
+        voiceStress?: any;
+
+        /**
+         * The voice-volume property sets the volume for spoken content in speech media. It replaces the deprecated volume property.
+         */
+        voiceVolume?: any;
+
+        /**
+         * The white-space property controls whether and how white space inside the element is collapsed, and whether lines may wrap at unforced "soft wrap" opportunities.
+         */
+        whiteSpace?: any;
+
+        /**
+         * Obsolete: unsupported.
+         */
+        whiteSpaceTreatment?: any;
+
+        /**
+         * In paged media, this property defines the mimimum number of lines
+         * that must be left at the top of the second page.
+         */
+        widows?: number;
+
+        /**
+         * Specifies the width of the content area of an element. The content area of the element width does not include the padding, border, and margin of the element.
+         */
+        width?: any;
+
+        /**
+         * The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element.
+         */
+        wordBreak?: any;
+
+        /**
+         * The word-spacing CSS property specifies the spacing behavior between "words".
+         */
+        wordSpacing?: any;
+
+        /**
+         * An alias of css/properties/overflow-wrap, word-wrap defines whether to break words when the content exceeds the boundaries of its container.
+         */
+        wordWrap?: any;
+
+        /**
+         * Specifies how exclusions affect inline content within block-level elements. Elements lay out their inline content in their content area but wrap around exclusion areas.
+         */
+        wrapFlow?: any;
+
+        /**
+         * Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin.
+         */
+        wrapMargin?: any;
+
+        /**
+         * Obsolete and unsupported. Do not use.
+         * This CSS property controls the text when it reaches the end of the block in which it is enclosed.
+         */
+        wrapOption?: any;
+
+        /**
+         * writing-mode specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress.
+         */
+        writingMode?: any;
+
+        /**
+         * The z-index property specifies the z-order of an element and its descendants.
+         * When elements overlap, z-order determines which one covers the other.
+         */
+        zIndex?: "auto" | number;
+
+        /**
+         * Sets the initial zoom factor of a document defined by @viewport.
+         */
+        zoom?: "auto" | number;
+
+        [propertyName: string]: any;
+    }
+
+    interface HTMLAttributes extends DOMAttributes {
+        // React-specific Attributes
+        defaultChecked?: boolean;
+        defaultValue?: string | string[];
+
+        // Standard HTML Attributes
+        accept?: string;
+        acceptCharset?: string;
+        accessKey?: string;
+        action?: string;
+        allowFullScreen?: boolean;
+        allowTransparency?: boolean;
+        alt?: string;
+        async?: boolean;
+        autoComplete?: string;
+        autoFocus?: boolean;
+        autoPlay?: boolean;
+        capture?: boolean;
+        cellPadding?: number | string;
+        cellSpacing?: number | string;
+        charSet?: string;
+        challenge?: string;
+        checked?: boolean;
+        classID?: string;
+        className?: string;
+        cols?: number;
+        colSpan?: number;
+        content?: string;
+        contentEditable?: boolean;
+        contextMenu?: string;
+        controls?: boolean;
+        coords?: string;
+        crossOrigin?: string;
+        data?: string;
+        dateTime?: string;
+        default?: boolean;
+        defer?: boolean;
+        dir?: string;
+        disabled?: boolean;
+        download?: any;
+        draggable?: boolean;
+        encType?: string;
+        form?: string;
+        formAction?: string;
+        formEncType?: string;
+        formMethod?: string;
+        formNoValidate?: boolean;
+        formTarget?: string;
+        frameBorder?: number | string;
+        headers?: string;
+        height?: number | string;
+        hidden?: boolean;
+        high?: number;
+        href?: string;
+        hrefLang?: string;
+        htmlFor?: string;
+        httpEquiv?: string;
+        icon?: string;
+        id?: string;
+        inputMode?: string;
+        integrity?: string;
+        is?: string;
+        keyParams?: string;
+        keyType?: string;
+        kind?: string;
+        label?: string;
+        lang?: string;
+        list?: string;
+        loop?: boolean;
+        low?: number;
+        manifest?: string;
+        marginHeight?: number;
+        marginWidth?: number;
+        max?: number | string;
+        maxLength?: number;
+        media?: string;
+        mediaGroup?: string;
+        method?: string;
+        min?: number | string;
+        minLength?: number;
+        multiple?: boolean;
+        muted?: boolean;
+        name?: string;
+        nonce?: string;
+        noValidate?: boolean;
+        open?: boolean;
+        optimum?: number;
+        pattern?: string;
+        placeholder?: string;
+        poster?: string;
+        preload?: string;
+        radioGroup?: string;
+        readOnly?: boolean;
+        rel?: string;
+        required?: boolean;
+        reversed?: boolean;
+        role?: string;
+        rows?: number;
+        rowSpan?: number;
+        sandbox?: string;
+        scope?: string;
+        scoped?: boolean;
+        scrolling?: string;
+        seamless?: boolean;
+        selected?: boolean;
+        shape?: string;
+        size?: number;
+        sizes?: string;
+        span?: number;
+        spellCheck?: boolean;
+        src?: string;
+        srcDoc?: string;
+        srcLang?: string;
+        srcSet?: string;
+        start?: number;
+        step?: number | string;
+        style?: CSSProperties;
+        summary?: string;
+        tabIndex?: number;
+        target?: string;
+        title?: string;
+        type?: string;
+        useMap?: string;
+        value?: string | string[];
+        width?: number | string;
+        wmode?: string;
+        wrap?: string;
+
+        // RDFa Attributes
+        about?: string;
+        datatype?: string;
+        inlist?: any;
+        prefix?: string;
+        property?: string;
+        resource?: string;
+        typeof?: string;
+        vocab?: string;
+
+        // Non-standard Attributes
+        autoCapitalize?: string;
+        autoCorrect?: string;
+        autoSave?: string;
+        color?: string;
+        itemProp?: string;
+        itemScope?: boolean;
+        itemType?: string;
+        itemID?: string;
+        itemRef?: string;
+        results?: number;
+        security?: string;
+        unselectable?: boolean;
+
+        // Allows aria- and data- Attributes
+        [key: string]: any;
+    }
+
+    interface SVGAttributes extends HTMLAttributes {
+        clipPath?: string;
+        cx?: number | string;
+        cy?: number | string;
+        d?: string;
+        dx?: number | string;
+        dy?: number | string;
+        fill?: string;
+        fillOpacity?: number | string;
+        fontFamily?: string;
+        fontSize?: number | string;
+        fx?: number | string;
+        fy?: number | string;
+        gradientTransform?: string;
+        gradientUnits?: string;
+        markerEnd?: string;
+        markerMid?: string;
+        markerStart?: string;
+        offset?: number | string;
+        opacity?: number | string;
+        patternContentUnits?: string;
+        patternUnits?: string;
+        points?: string;
+        preserveAspectRatio?: string;
+        r?: number | string;
+        rx?: number | string;
+        ry?: number | string;
+        spreadMethod?: string;
+        stopColor?: string;
+        stopOpacity?: number | string;
+        stroke?: string;
+        strokeDasharray?: string;
+        strokeLinecap?: string;
+        strokeMiterlimit?: string;
+        strokeOpacity?: number | string;
+        strokeWidth?: number | string;
+        textAnchor?: string;
+        transform?: string;
+        version?: string;
+        viewBox?: string;
+        x1?: number | string;
+        x2?: number | string;
+        x?: number | string;
+        xlinkActuate?: string;
+        xlinkArcrole?: string;
+        xlinkHref?: string;
+        xlinkRole?: string;
+        xlinkShow?: string;
+        xlinkTitle?: string;
+        xlinkType?: string;
+        xmlBase?: string;
+        xmlLang?: string;
+        xmlSpace?: string;
+        y1?: number | string;
+        y2?: number | string;
+        y?: number | string;
+    }
+
+    //
+    // React.DOM
+    // ----------------------------------------------------------------------
+
+    interface ReactDOM {
+        // HTML
+        a: HTMLFactory<HTMLAnchorElement>;
+        abbr: HTMLFactory<HTMLElement>;
+        address: HTMLFactory<HTMLElement>;
+        area: HTMLFactory<HTMLAreaElement>;
+        article: HTMLFactory<HTMLElement>;
+        aside: HTMLFactory<HTMLElement>;
+        audio: HTMLFactory<HTMLAudioElement>;
+        b: HTMLFactory<HTMLElement>;
+        base: HTMLFactory<HTMLBaseElement>;
+        bdi: HTMLFactory<HTMLElement>;
+        bdo: HTMLFactory<HTMLElement>;
+        big: HTMLFactory<HTMLElement>;
+        blockquote: HTMLFactory<HTMLElement>;
+        body: HTMLFactory<HTMLBodyElement>;
+        br: HTMLFactory<HTMLBRElement>;
+        button: HTMLFactory<HTMLButtonElement>;
+        canvas: HTMLFactory<HTMLCanvasElement>;
+        caption: HTMLFactory<HTMLElement>;
+        cite: HTMLFactory<HTMLElement>;
+        code: HTMLFactory<HTMLElement>;
+        col: HTMLFactory<HTMLTableColElement>;
+        colgroup: HTMLFactory<HTMLTableColElement>;
+        data: HTMLFactory<HTMLElement>;
+        datalist: HTMLFactory<HTMLDataListElement>;
+        dd: HTMLFactory<HTMLElement>;
+        del: HTMLFactory<HTMLElement>;
+        details: HTMLFactory<HTMLElement>;
+        dfn: HTMLFactory<HTMLElement>;
+        dialog: HTMLFactory<HTMLElement>;
+        div: HTMLFactory<HTMLDivElement>;
+        dl: HTMLFactory<HTMLDListElement>;
+        dt: HTMLFactory<HTMLElement>;
+        em: HTMLFactory<HTMLElement>;
+        embed: HTMLFactory<HTMLEmbedElement>;
+        fieldset: HTMLFactory<HTMLFieldSetElement>;
+        figcaption: HTMLFactory<HTMLElement>;
+        figure: HTMLFactory<HTMLElement>;
+        footer: HTMLFactory<HTMLElement>;
+        form: HTMLFactory<HTMLFormElement>;
+        h1: HTMLFactory<HTMLHeadingElement>;
+        h2: HTMLFactory<HTMLHeadingElement>;
+        h3: HTMLFactory<HTMLHeadingElement>;
+        h4: HTMLFactory<HTMLHeadingElement>;
+        h5: HTMLFactory<HTMLHeadingElement>;
+        h6: HTMLFactory<HTMLHeadingElement>;
+        head: HTMLFactory<HTMLHeadElement>;
+        header: HTMLFactory<HTMLElement>;
+        hgroup: HTMLFactory<HTMLElement>;
+        hr: HTMLFactory<HTMLHRElement>;
+        html: HTMLFactory<HTMLHtmlElement>;
+        i: HTMLFactory<HTMLElement>;
+        iframe: HTMLFactory<HTMLIFrameElement>;
+        img: HTMLFactory<HTMLImageElement>;
+        input: HTMLFactory<HTMLInputElement>;
+        ins: HTMLFactory<HTMLModElement>;
+        kbd: HTMLFactory<HTMLElement>;
+        keygen: HTMLFactory<HTMLElement>;
+        label: HTMLFactory<HTMLLabelElement>;
+        legend: HTMLFactory<HTMLLegendElement>;
+        li: HTMLFactory<HTMLLIElement>;
+        link: HTMLFactory<HTMLLinkElement>;
+        main: HTMLFactory<HTMLElement>;
+        map: HTMLFactory<HTMLMapElement>;
+        mark: HTMLFactory<HTMLElement>;
+        menu: HTMLFactory<HTMLElement>;
+        menuitem: HTMLFactory<HTMLElement>;
+        meta: HTMLFactory<HTMLMetaElement>;
+        meter: HTMLFactory<HTMLElement>;
+        nav: HTMLFactory<HTMLElement>;
+        noscript: HTMLFactory<HTMLElement>;
+        object: HTMLFactory<HTMLObjectElement>;
+        ol: HTMLFactory<HTMLOListElement>;
+        optgroup: HTMLFactory<HTMLOptGroupElement>;
+        option: HTMLFactory<HTMLOptionElement>;
+        output: HTMLFactory<HTMLElement>;
+        p: HTMLFactory<HTMLParagraphElement>;
+        param: HTMLFactory<HTMLParamElement>;
+        picture: HTMLFactory<HTMLElement>;
+        pre: HTMLFactory<HTMLPreElement>;
+        progress: HTMLFactory<HTMLProgressElement>;
+        q: HTMLFactory<HTMLQuoteElement>;
+        rp: HTMLFactory<HTMLElement>;
+        rt: HTMLFactory<HTMLElement>;
+        ruby: HTMLFactory<HTMLElement>;
+        s: HTMLFactory<HTMLElement>;
+        samp: HTMLFactory<HTMLElement>;
+        script: HTMLFactory<HTMLElement>;
+        section: HTMLFactory<HTMLElement>;
+        select: HTMLFactory<HTMLSelectElement>;
+        small: HTMLFactory<HTMLElement>;
+        source: HTMLFactory<HTMLSourceElement>;
+        span: HTMLFactory<HTMLSpanElement>;
+        strong: HTMLFactory<HTMLElement>;
+        style: HTMLFactory<HTMLStyleElement>;
+        sub: HTMLFactory<HTMLElement>;
+        summary: HTMLFactory<HTMLElement>;
+        sup: HTMLFactory<HTMLElement>;
+        table: HTMLFactory<HTMLTableElement>;
+        tbody: HTMLFactory<HTMLTableSectionElement>;
+        td: HTMLFactory<HTMLTableDataCellElement>;
+        textarea: HTMLFactory<HTMLTextAreaElement>;
+        tfoot: HTMLFactory<HTMLTableSectionElement>;
+        th: HTMLFactory<HTMLTableHeaderCellElement>;
+        thead: HTMLFactory<HTMLTableSectionElement>;
+        time: HTMLFactory<HTMLElement>;
+        title: HTMLFactory<HTMLTitleElement>;
+        tr: HTMLFactory<HTMLTableRowElement>;
+        track: HTMLFactory<HTMLTrackElement>;
+        u: HTMLFactory<HTMLElement>;
+        ul: HTMLFactory<HTMLUListElement>;
+        "var": HTMLFactory<HTMLElement>;
+        video: HTMLFactory<HTMLVideoElement>;
+        wbr: HTMLFactory<HTMLElement>;
+
+        // SVG
+        svg: SVGFactory;
+        circle: SVGFactory;
+        defs: SVGFactory;
+        ellipse: SVGFactory;
+        g: SVGFactory;
+        image: SVGFactory;
+        line: SVGFactory;
+        linearGradient: SVGFactory;
+        mask: SVGFactory;
+        path: SVGFactory;
+        pattern: SVGFactory;
+        polygon: SVGFactory;
+        polyline: SVGFactory;
+        radialGradient: SVGFactory;
+        rect: SVGFactory;
+        stop: SVGFactory;
+        symbol: SVGFactory;
+        text: SVGFactory;
+        tspan: SVGFactory;
+        use: SVGFactory;
+    }
+
+    //
+    // React.PropTypes
+    // ----------------------------------------------------------------------
+
+    interface Validator<T> {
+        (object: T, key: string, componentName: string): Error;
+    }
+
+    interface Requireable<T> extends Validator<T> {
+        isRequired: Validator<T>;
+    }
+
+    interface ValidationMap<T> {
+        [key: string]: Validator<T>;
+    }
+
+    interface ReactPropTypes {
+        any: Requireable<any>;
+        array: Requireable<any>;
+        bool: Requireable<any>;
+        func: Requireable<any>;
+        number: Requireable<any>;
+        object: Requireable<any>;
+        string: Requireable<any>;
+        node: Requireable<any>;
+        element: Requireable<any>;
+        instanceOf(expectedClass: {}): Requireable<any>;
+        oneOf(types: any[]): Requireable<any>;
+        oneOfType(types: Validator<any>[]): Requireable<any>;
+        arrayOf(type: Validator<any>): Requireable<any>;
+        objectOf(type: Validator<any>): Requireable<any>;
+        shape(type: ValidationMap<any>): Requireable<any>;
+    }
+
+    //
+    // React.Children
+    // ----------------------------------------------------------------------
+
+    interface ReactChildren {
+        map<T>(children: ReactNode, fn: (child: ReactChild, index: number) => T): T[];
+        forEach(children: ReactNode, fn: (child: ReactChild, index: number) => any): void;
+        count(children: ReactNode): number;
+        only(children: ReactNode): ReactElement<any>;
+        toArray(children: ReactNode): ReactChild[];
+    }
+
+    //
+    // Browser Interfaces
+    // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts
+    // ----------------------------------------------------------------------
+
+    interface AbstractView {
+        styleMedia: StyleMedia;
+        document: Document;
+    }
+
+    interface Touch {
+        identifier: number;
+        target: EventTarget;
+        screenX: number;
+        screenY: number;
+        clientX: number;
+        clientY: number;
+        pageX: number;
+        pageY: number;
+    }
+
+    interface TouchList {
+        [index: number]: Touch;
+        length: number;
+        item(index: number): Touch;
+        identifiedTouch(identifier: number): Touch;
+    }
+}
+
+declare module "react" {
+    export = __React;
+}
+
+declare namespace JSX {
+    import React = __React;
+
+    interface Element extends React.ReactElement<any> { }
+    interface ElementClass extends React.Component<any, any> {
+        render(): JSX.Element;
+    }
+    interface ElementAttributesProperty { props: {}; }
+
+    interface IntrinsicAttributes extends React.Attributes { }
+    interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { }
+
+    interface IntrinsicElements {
+        // HTML
+        a: React.HTMLProps<HTMLAnchorElement>;
+        abbr: React.HTMLProps<HTMLElement>;
+        address: React.HTMLProps<HTMLElement>;
+        area: React.HTMLProps<HTMLAreaElement>;
+        article: React.HTMLProps<HTMLElement>;
+        aside: React.HTMLProps<HTMLElement>;
+        audio: React.HTMLProps<HTMLAudioElement>;
+        b: React.HTMLProps<HTMLElement>;
+        base: React.HTMLProps<HTMLBaseElement>;
+        bdi: React.HTMLProps<HTMLElement>;
+        bdo: React.HTMLProps<HTMLElement>;
+        big: React.HTMLProps<HTMLElement>;
+        blockquote: React.HTMLProps<HTMLElement>;
+        body: React.HTMLProps<HTMLBodyElement>;
+        br: React.HTMLProps<HTMLBRElement>;
+        button: React.HTMLProps<HTMLButtonElement>;
+        canvas: React.HTMLProps<HTMLCanvasElement>;
+        caption: React.HTMLProps<HTMLElement>;
+        cite: React.HTMLProps<HTMLElement>;
+        code: React.HTMLProps<HTMLElement>;
+        col: React.HTMLProps<HTMLTableColElement>;
+        colgroup: React.HTMLProps<HTMLTableColElement>;
+        data: React.HTMLProps<HTMLElement>;
+        datalist: React.HTMLProps<HTMLDataListElement>;
+        dd: React.HTMLProps<HTMLElement>;
+        del: React.HTMLProps<HTMLElement>;
+        details: React.HTMLProps<HTMLElement>;
+        dfn: React.HTMLProps<HTMLElement>;
+        dialog: React.HTMLProps<HTMLElement>;
+        div: React.HTMLProps<HTMLDivElement>;
+        dl: React.HTMLProps<HTMLDListElement>;
+        dt: React.HTMLProps<HTMLElement>;
+        em: React.HTMLProps<HTMLElement>;
+        embed: React.HTMLProps<HTMLEmbedElement>;
+        fieldset: React.HTMLProps<HTMLFieldSetElement>;
+        figcaption: React.HTMLProps<HTMLElement>;
+        figure: React.HTMLProps<HTMLElement>;
+        footer: React.HTMLProps<HTMLElement>;
+        form: React.HTMLProps<HTMLFormElement>;
+        h1: React.HTMLProps<HTMLHeadingElement>;
+        h2: React.HTMLProps<HTMLHeadingElement>;
+        h3: React.HTMLProps<HTMLHeadingElement>;
+        h4: React.HTMLProps<HTMLHeadingElement>;
+        h5: React.HTMLProps<HTMLHeadingElement>;
+        h6: React.HTMLProps<HTMLHeadingElement>;
+        head: React.HTMLProps<HTMLHeadElement>;
+        header: React.HTMLProps<HTMLElement>;
+        hgroup: React.HTMLProps<HTMLElement>;
+        hr: React.HTMLProps<HTMLHRElement>;
+        html: React.HTMLProps<HTMLHtmlElement>;
+        i: React.HTMLProps<HTMLElement>;
+        iframe: React.HTMLProps<HTMLIFrameElement>;
+        img: React.HTMLProps<HTMLImageElement>;
+        input: React.HTMLProps<HTMLInputElement>;
+        ins: React.HTMLProps<HTMLModElement>;
+        kbd: React.HTMLProps<HTMLElement>;
+        keygen: React.HTMLProps<HTMLElement>;
+        label: React.HTMLProps<HTMLLabelElement>;
+        legend: React.HTMLProps<HTMLLegendElement>;
+        li: React.HTMLProps<HTMLLIElement>;
+        link: React.HTMLProps<HTMLLinkElement>;
+        main: React.HTMLProps<HTMLElement>;
+        map: React.HTMLProps<HTMLMapElement>;
+        mark: React.HTMLProps<HTMLElement>;
+        menu: React.HTMLProps<HTMLElement>;
+        menuitem: React.HTMLProps<HTMLElement>;
+        meta: React.HTMLProps<HTMLMetaElement>;
+        meter: React.HTMLProps<HTMLElement>;
+        nav: React.HTMLProps<HTMLElement>;
+        noscript: React.HTMLProps<HTMLElement>;
+        object: React.HTMLProps<HTMLObjectElement>;
+        ol: React.HTMLProps<HTMLOListElement>;
+        optgroup: React.HTMLProps<HTMLOptGroupElement>;
+        option: React.HTMLProps<HTMLOptionElement>;
+        output: React.HTMLProps<HTMLElement>;
+        p: React.HTMLProps<HTMLParagraphElement>;
+        param: React.HTMLProps<HTMLParamElement>;
+        picture: React.HTMLProps<HTMLElement>;
+        pre: React.HTMLProps<HTMLPreElement>;
+        progress: React.HTMLProps<HTMLProgressElement>;
+        q: React.HTMLProps<HTMLQuoteElement>;
+        rp: React.HTMLProps<HTMLElement>;
+        rt: React.HTMLProps<HTMLElement>;
+        ruby: React.HTMLProps<HTMLElement>;
+        s: React.HTMLProps<HTMLElement>;
+        samp: React.HTMLProps<HTMLElement>;
+        script: React.HTMLProps<HTMLElement>;
+        section: React.HTMLProps<HTMLElement>;
+        select: React.HTMLProps<HTMLSelectElement>;
+        small: React.HTMLProps<HTMLElement>;
+        source: React.HTMLProps<HTMLSourceElement>;
+        span: React.HTMLProps<HTMLSpanElement>;
+        strong: React.HTMLProps<HTMLElement>;
+        style: React.HTMLProps<HTMLStyleElement>;
+        sub: React.HTMLProps<HTMLElement>;
+        summary: React.HTMLProps<HTMLElement>;
+        sup: React.HTMLProps<HTMLElement>;
+        table: React.HTMLProps<HTMLTableElement>;
+        tbody: React.HTMLProps<HTMLTableSectionElement>;
+        td: React.HTMLProps<HTMLTableDataCellElement>;
+        textarea: React.HTMLProps<HTMLTextAreaElement>;
+        tfoot: React.HTMLProps<HTMLTableSectionElement>;
+        th: React.HTMLProps<HTMLTableHeaderCellElement>;
+        thead: React.HTMLProps<HTMLTableSectionElement>;
+        time: React.HTMLProps<HTMLElement>;
+        title: React.HTMLProps<HTMLTitleElement>;
+        tr: React.HTMLProps<HTMLTableRowElement>;
+        track: React.HTMLProps<HTMLTrackElement>;
+        u: React.HTMLProps<HTMLElement>;
+        ul: React.HTMLProps<HTMLUListElement>;
+        "var": React.HTMLProps<HTMLElement>;
+        video: React.HTMLProps<HTMLVideoElement>;
+        wbr: React.HTMLProps<HTMLElement>;
+
+        // SVG
+        svg: React.SVGProps;
+
+        circle: React.SVGProps;
+        clipPath: React.SVGProps;
+        defs: React.SVGProps;
+        ellipse: React.SVGProps;
+        feBlend: React.SVGProps;
+        feColorMatrix: React.SVGProps;
+        feComponentTransfer: React.SVGProps;
+        feComposite: React.SVGProps;
+        feConvolveMatrix: React.SVGProps;
+        feDiffuseLighting: React.SVGProps;
+        feDisplacementMap: React.SVGProps;
+        feFlood: React.SVGProps;
+        feGaussianBlur: React.SVGProps;
+        feImage: React.SVGProps;
+        feMerge: React.SVGProps;
+        feMergeNode: React.SVGProps;
+        feMorphology: React.SVGProps;
+        feOffset: React.SVGProps;
+        feSpecularLighting: React.SVGProps;
+        feTile: React.SVGProps;
+        feTurbulence: React.SVGProps;
+        filter: React.SVGProps;
+        foreignObject: React.SVGProps;
+        g: React.SVGProps;
+        image: React.SVGProps;
+        line: React.SVGProps;
+        linearGradient: React.SVGProps;
+        marker: React.SVGProps;
+        mask: React.SVGProps;
+        path: React.SVGProps;
+        pattern: React.SVGProps;
+        polygon: React.SVGProps;
+        polyline: React.SVGProps;
+        radialGradient: React.SVGProps;
+        rect: React.SVGProps;
+        stop: React.SVGProps;
+        symbol: React.SVGProps;
+        text: React.SVGProps;
+        tspan: React.SVGProps;
+        use: React.SVGProps;
+    }
+}
diff --git a/code/VideoAccess-VCMP/web/vite.config.js b/code/VideoAccess-VCMP/web/vite.config.js
new file mode 100644
index 0000000..f9d7d8f
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/vite.config.js
@@ -0,0 +1,30 @@
+import path from 'path';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    root: './client/',
+    plugins: [react({})],
+    // plugins: [reactRefresh({})],
+    resolve: {
+        alias: [
+            {
+                find: '$utils', replacement: path.join('/src/utils'),
+            },
+            // 针对以 ~/[包名称]开头的，替换为 node_modules/@[包名称]
+            {
+                find: /^(~)(?!\/)(.+)/, replacement: path.join('node_modules/$2'),
+            },
+        ],
+    },
+    cors: true,
+    server: {
+        hmr: {
+            protocol: 'ws',
+            host: 'localhost'
+        },
+        middlewareMode: 'html',
+    }
+})
diff --git a/code/VideoAccess-VCMP/web/webpack.config.js b/code/VideoAccess-VCMP/web/webpack.config.js
new file mode 100644
index 0000000..970509e
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/webpack.config.js
@@ -0,0 +1,67 @@
+const path = require('path');
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const PATHS = {
+    app: path.join(__dirname, 'client/src'),
+    build: path.join(__dirname, 'client/build')
+};
+
+module.exports = {
+    mode: "development",
+    devtool: 'source-map',
+    devServer: {
+        historyApiFallback: true,
+    },
+    entry: {
+        app: ["@babel/polyfill", PATHS.app]
+    },
+    output: {
+        publicPath: '/client/build/',
+        path: PATHS.build,
+        filename: '[name].js'
+    },
+    resolve: {
+        modules: [path.resolve(__dirname, 'client/src'), path.resolve(__dirname, 'node_modules')],
+        extensions: ['.js', '.jsx'],
+        alias: {
+            crypto: false,
+            $utils: path.resolve(__dirname, 'client/src/utils/'),
+            $components: path.resolve(__dirname, 'client/src/components/'),
+        }
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new BundleAnalyzerPlugin(),
+    ],
+    module: {
+        rules: [{
+            test: /\.css$/,
+            use: ['style-loader', {
+                loader: 'css-loader',
+                options: {
+                    modules: true
+                }
+            }]
+        },
+        {
+            test: /\.less$/,
+            use: ['style-loader', 'css-loader', {
+                loader: 'less-loader',
+                options: {
+                    lessOptions: {
+                        javascriptEnabled: true
+                    }
+                }
+            }]
+        },
+        {
+            test: /\.(js|jsx)$/,
+            use: 'babel-loader',
+            include: [PATHS.app, path.resolve(__dirname, 'node_modules', '@peace')],
+        }, {
+            test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
+            loader: "file-loader"
+        }]
+    }
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/webpack.config.prod.js b/code/VideoAccess-VCMP/web/webpack.config.prod.js
new file mode 100644
index 0000000..af8ef36
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/webpack.config.prod.js
@@ -0,0 +1,76 @@
+var path = require('path');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const PATHS = {
+    app: path.join(__dirname, 'client/src'),
+    build: path.join(__dirname, 'client/build')
+};
+
+module.exports = {
+    mode: "production",
+    entry: {
+        app: ["babel-polyfill", PATHS.app]
+    },
+    output: {
+        path: PATHS.build,
+        publicPath: '/build',
+        filename: '[name].[hash:5].js'
+    },
+    resolve: {
+        modules: [path.resolve(__dirname, 'client/src'), path.resolve(__dirname, 'node_modules')],
+        extensions: ['.js', '.jsx'],
+        alias: {
+            crypto: false,
+            $utils: path.resolve(__dirname, 'client/src/utils/'),
+            $components: path.resolve(__dirname, 'client/src/components/'),
+        }
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: '../index.html',
+            template: './client/index.ejs'
+        })
+    ],
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: "vendors",
+                    chunks: "all"
+                }
+            }
+        }
+    },
+    module: {
+        rules: [{
+            test: /\.css$/,
+            use: ['style-loader', {
+                loader: 'css-loader',
+                options: {
+                    modules: true
+                }
+            }]
+        },
+        {
+            test: /\.less$/,
+            use: ['style-loader', 'css-loader',
+                {
+                    loader: 'less-loader', options: {
+                        lessOptions: {
+                            javascriptEnabled: true
+                        }
+                    }
+                }]
+        },
+        {
+            test: /\.jsx?$/,
+            use: 'babel-loader',
+            include: [PATHS.app, path.resolve(__dirname, 'node_modules', '@peace')],
+        },{
+            test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
+            loader: "file-loader"
+        }]
+    }
+};