11/17

src/components/Index.vue

@@ -21,10 +21,22 @@
 
     <el-container style="overflow: auto">
       <el-aside width="200px">
-        <div>
-          <i :class="iconObj[20]"></i>
-          <span slot="title">可视农业应用系统</span>
-        </div>
+        <el-menu
+          :default-active="$route.path"
+          :collapse-transition="false"
+          class="el-menu-vertical-demo"
+          :router="isRouter"
+          active-text-color="rgb(57, 249, 190)"
+        >
+          <el-menu-item index="/index/list1">
+            <i :class="iconObj[22]"></i>
+            <span slot="title">监控列表</span>
+          </el-menu-item>
+          <el-menu-item index="/index/monitor1">
+            <i :class="iconObj[20]"></i>
+            <span slot="title">可视农业应用系统</span>
+          </el-menu-item>
+        </el-menu>
       </el-aside>
       <el-main>
         <router-view></router-view>
@@ -39,11 +51,12 @@ export default {
       isRouter: true,
       iconObj: {
         20: "iconfont icon-jiankong",
-        22: "iconfont icon-jiankong",
+        22: "iconfont icon-shebei",
       },
       flag: true,
       header: "",
       logo: "",
+      active: 1,
     };
   },
   created: function () {
@@ -55,7 +68,7 @@ export default {
     getUserInfo() {
       this.$axios({
         method: "POST",
-        url: "logoheader",
+        url: "/api/logoheader",
       }).then((res) => {
         this.header = res.data.header;
         this.logo = res.data.logo;
@@ -125,15 +138,24 @@ export default {
 
 .el-aside {
   background: #474e60;
-  div {
+  .el-menu {
     background: #232735;
-    font-size: 14px;
-    line-height: 44px;
-    text-align: center;
-    color: #fff;
+    .el-menu-item {
+      color: #909399;
+    }
+    .is-active{
+      background-color: rgba(45, 111, 102, 0.4);
+    }
+    .el-menu-item:focus,
+    .el-menu-item:hover {
+      color: #39f9be;
+      background-color: rgba(45, 111, 102, 0.4);
+      i{color: #39f9be;}
+    }
   }
 }
 .el-main {
   padding: 0;
+  background-color: #f6f6f6;
 }
 </style>

src/components/Login.vue

@@ -71,7 +71,7 @@ export default {
 			}
 			this.$axios({
 				method: 'POST',
-				url: 'login',
+				url: '/api/login',
 				data: this.qs.stringify({
 					username: this.username,
 					password: this.pass

src/main.js

@@ -14,11 +14,11 @@ Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
 
 Vue.use(ElementUI);
 
-axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-axios.defaults.timeout = 30000;
-axios.defaults.baseURL = 'http://47.104.218.216:8006/' //线下杨明明
-axios.defaults.withCredentials = true //axios请求时携带session
-axios.defaults.crossDomain = true 
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+// axios.defaults.timeout = 30000;
+// axios.defaults.baseURL = 'http://47.104.218.216:8006/' //线下杨明明
+// axios.defaults.withCredentials = true //axios请求时携带session
+// axios.defaults.crossDomain = true 
 
 Vue.config.productionTip = false
 

src/pages/EquipList.vue

@@ -0,0 +1,219 @@
+<template>
+  <div style="cursor: default">
+    <div class="search-box">
+      <el-input
+        style="cursor: pointer"
+        size="small"
+        clearable
+        @change="searchChange()"
+        placeholder="请输入设备ID"
+        v-model="queryInfo.f_id"
+      >
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+    </div>
+    <el-row :gutter="10" v-if="dataList.length > 0">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="6"
+        :xl="4"
+        v-for="item in dataList"
+        :key="item.id"
+      >
+        <el-card class="box-card pad0">
+          <div class="img-box">
+            <img src="@/assets/images/monitor/jkIconOn.png" />
+            <p>监控设备</p>
+          </div>
+          <div class="detail">
+            <p>
+              设备ID
+              <span>{{ item.device_id }}</span>
+            </p>
+            <p>
+              适配用户
+              <span>{{ item.device_user || "无" }}</span>
+            </p>
+            <p>
+              设备名称
+              <span>{{ item.device_name || "无" }}</span>
+            </p>
+          </div>
+          <div class="bottom">
+            <span @click="modifyName(item.device_id, item.device_name)">
+              <i class="el-icon-edit-outline"></i> 修改名称
+            </span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-else>
+      <img :src="zanwu" alt class="expertDiagnosis_referral_units_notImg" />
+    </div>
+    <el-pagination
+      v-if="dataList.length > 0"
+      background
+      layout="prev, pager, next"
+      :page-size="12"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      zanwu: require("@/assets/images/monitor/zanwu.png"),
+      queryInfo: {
+        f_id: "",
+        page: 1,
+      },
+      dataList: [],
+      totalNum: 0,
+      device_id: "",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  beforeMount() {},
+  methods: {
+    //获取设备列表
+    getList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/list_camera",
+        data: this.qs.stringify({
+          f_id: this.queryInfo.f_id,
+          page: this.queryInfo.page,
+        }),
+      }).then((res) => {
+        if (res.data.data) {
+          this.dataList = res.data.data;
+          this.totalNum = res.data.counts;
+        }
+      });
+    },
+    searchChange() {
+      console.log(111);
+      this.queryInfo.page = 1;
+      this.getList();
+    },
+    // 修改设备名称
+    modifyName(id, device_name) {
+      let value = device_name;
+      this.$prompt("", "修改名字", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPlaceholder: device_name,
+      })
+        .then(({ value }) => {
+          if (value) {
+            this.$axios({
+              method: "POST",
+              url: "/api/equiplist",
+              data: this.qs.stringify({
+                req: "rename",
+                eid: id,
+                ename: value,
+              }),
+            }).then((res) => {
+              if (res.data == 0) {
+                this.getList();
+                this.$message({
+                  type: "success",
+                  message: "修改成功",
+                });
+              }
+            });
+          } else {
+            this.$message({
+              type: "info",
+              message: "内容不能为空",
+            });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    changePage(val) {
+      this.queryInfo.page = val;
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  padding: 15px 20px;
+  .el-input {
+    width: 200px;
+  }
+}
+.el-card {
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #e1e1e1;
+    padding: 20px 0;
+    img {
+      height: 55px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    border-bottom: 1px solid #e1e1e1;
+    padding: 10px 0;
+    padding: 0 20px;
+    p {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      line-height: 34px;
+      color: #666;
+    }
+  }
+  .bottom {
+    font-size: 13px;
+    color: #666;
+    line-height: 50px;
+    text-align: center;
+    span {
+      cursor: pointer;
+      i {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+// 暂无数据
+.expertDiagnosis_referral_units_not {
+  width: 272px;
+  margin: 0 auto;
+}
+
+.el-row {
+  padding: 0 20px;
+  /deep/.el-card__body {
+    padding: 0 20px;
+  }
+}
+.el-pagination {
+  padding: 20px;
+  text-align: center;
+}
+</style>

src/pages/Monitor.vue

@@ -14,7 +14,6 @@
         >
           <!-- 非插件播放 ，默认非插件播放-->
           <div
-            v-show="playType == 0"
             :class="{
               videoItem: true,
               a1: divNum == 1,
@@ -81,7 +80,7 @@
             ></div>
           </div>
         </div>
-        <div v-show="playType == 0" class="split-screen">
+        <div class="split-screen">
           <span
             :class="divNum == 1 ? 'sp0 sp' : 'sp00 sp'"
             @click="splitView(1)"
@@ -193,10 +192,16 @@
     <el-dialog
       title="查看回放"
       :visible.sync="playBackDialogVisible"
-      width="30%"
+      width="600px"
+      @close="palyBackClose"
     >
-      <el-form ref="backFormRef" :model="backForm" label-width="80px">
-        <el-form-item label="时间范围">
+      <el-form
+        ref="backFormRef"
+        :model="backForm"
+        :rules="backFormRules"
+        label-width="80px"
+      >
+        <el-form-item label="时间范围" prop="time">
           <el-date-picker
             v-model="backForm.time"
             type="datetimerange"
@@ -206,7 +211,7 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="通道">
+        <el-form-item label="通道" prop="aisle">
           <el-select v-model="backForm.aisle" placeholder="请选择">
             <el-option label="通道一" value="1"> </el-option>
             <el-option label="通道二" value="2"> </el-option>
@@ -221,7 +226,9 @@
           <el-button type="primary" @click="playBackSubmit">确定</el-button>
         </el-form-item>
       </el-form>
-      <div id="videoBack"></div>
+      <div id="videoBack">
+        <div id="playWind"></div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -245,7 +252,6 @@ export default {
       divMainHeight: "", //视频盒子高度
       selected: "", //默认不选中视频窗口
       divName: "", //选中的监控的id
-      playType: 0, //0:直播 ; 1：插件
       html: "", //插件播放内容
       picUrl: "", //视频拍照地址
       playBackDialogVisible: false,
@@ -258,6 +264,14 @@ export default {
         end: "",
         aisle: "",
       },
+      backFormRules: {
+        time: [
+          { required: true, message: "请选择时间范围", trigger: "change" },
+        ],
+        aisle: [{ required: true, message: "请选择通道", trigger: "change" }],
+      },
+      playback: {}, //回放
+      videoObj: {},
     };
   },
   filters: {
@@ -273,13 +287,12 @@ export default {
   created() {
     this.getJkList();
   },
-  watch: {},
   methods: {
     //获取视频列表
     getJkList() {
       this.$axios({
         method: "POST",
-        url: "camera",
+        url: "/api/list_camera",
         data: this.qs.stringify({ page: this.currPage }),
       }).then((res) => {
         this.Idlist = res.data.data;
@@ -290,7 +303,7 @@ export default {
     getJkList2() {
       this.$axios({
         method: "POST",
-        url: "camera",
+        url: "/api/list_camera",
         data: this.qs.stringify({ page: this.currPage }),
       }).then((res) => {
         this.Idlist = res.data.data;
@@ -318,7 +331,7 @@ export default {
         if (ctrl == "takephoto") {
           this.$axios({
             method: "POST",
-            url: "a_takephoto",
+            url: "/api/camera_takephoto",
             data: this.qs.stringify({
               device_id: id,
               ctrl: ctrl,
@@ -336,7 +349,7 @@ export default {
           //上下左右、放大、缩小
           this.$axios({
             method: "POST",
-            url: "camera",
+            url: "/api/ctrl_camera",
             data: this.qs.stringify({
               device_id: id,
               ctrl: ctrl,
@@ -359,7 +372,7 @@ export default {
       if (id != "") {
         this.$axios({
           method: "POST",
-          url: "camera",
+          url: "/api/ctrl_camera",
           data: this.qs.stringify({
             device_id: id,
             ctrl: "stop",
@@ -375,14 +388,13 @@ export default {
         if (this.Idlist[item]) {
           //避免右侧监控数量少于divNum
           this.$axios({
-            url: "camera",
+            url: "/api/addr_camera",
             method: "POST",
             data: this.qs.stringify({ device_id: this.Idlist[item].device_id }),
           }).then((res) => {
             var data = eval("(" + res.data + ")");
             var hlsHdSrc = data.hlsHd;
             var rtmpHdSrc = data.rtmp;
-            let index = "my-video" + this.divNum + (item + 1);
             this.$nextTick(() => {
               let playHtml = `<video id="videoitem${this.divNum}${item}"
 								 style='width: 100%;height: 100%;' src="${hlsHdSrc}" autoplay  poster='' muted controls playsInline  webkit-playsinline>
@@ -390,9 +402,10 @@ export default {
               document.getElementById(
                 "my-video" + this.divNum + (item + 1)
               ).innerHTML = playHtml;
-              console.log("videoitem" + this.divNum + item);
               this.$nextTick(() => {
-                new EZUIKit.EZUIPlayer("videoitem" + this.divNum + item);
+                this.videoObj[
+                  "videoitem" + this.divNum + item
+                ] = new EZUIKit.EZUIPlayer("videoitem" + this.divNum + item);
               });
             });
           });
@@ -413,7 +426,7 @@ export default {
         this.id = device_id; //保存选中的设备id
         console.log(this.divName);
         this.$axios({
-          url: "camera",
+          url: "/api/addr_camera",
           method: "POST",
           data: this.qs.stringify({ device_id: device_id }),
         }).then((res) => {
@@ -434,6 +447,10 @@ export default {
     //点击分屏
     splitView(num) {
       this.divNum = num;
+      for (let item in this.videoObj) {
+        console.log(item);
+        this.videoObj[item].stop();
+      }
       this.$nextTick(() => {
         this.initMonitor();
       });
@@ -469,7 +486,7 @@ export default {
         .then(({ value }) => {
           this.$axios({
             method: "POST",
-            url: "amera",
+            url: "/api/add_camera",
             data: this.qs.stringify({ device_id: value }),
           }).then((res) => {
             if (res.data == 1) {
@@ -506,6 +523,11 @@ export default {
       });
     },
     playBackSubmit() {
+      this.$refs.backFormRef.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+      });
       let start = new Date(this.backForm.time[0]);
       let end = new Date(this.backForm.time[1]);
       let beginVal = "";
@@ -534,26 +556,39 @@ export default {
         checked(end.getSeconds());
       this.$axios({
         method: "POST",
-        url: "iew",
+        url: "/api/nvr_view",
         data: this.qs.stringify({
           e_id: this.id,
         }),
       }).then((res) => {
+        if (!document.getElementById("playWind")) {
+          document.getElementById("videoBack").innerHTML =
+            '<div id="playWind"></div>';
+        }
         let accessToken = res.data.jk_token;
-        console.log(accessToken);
         let url = `ezopen://open.ys7.com/${this.id}/${this.backForm.aisle}.local.rec?begin=${beginVal}&end=${endVal}`;
-        console.log(url);
-        new EZUIKit.EZUIPlayer({
-          id: "videoBack",
+        this.playback = new EZUIKit.EZUIPlayer({
+          id: "playWind",
           autoplay: true,
           url: url,
           accessToken: accessToken,
           decoderPath: "static/js/",
-          width: 750,
-          height: 500,
+          width: 560,
+          height: 460,
         });
       });
     },
+    palyBackClose() {
+      this.$refs.backFormRef.resetFields();
+      this.playback.stop();
+      document.getElementById("videoBack").innerHTML = "";
+    },
+  },
+  destroyed() {
+    for (let item in this.videoObj) {
+      this.videoObj[item].stop();
+      console.log(this.videoObj[item]);
+    }
   },
 };
 </script>
@@ -563,7 +598,6 @@ ul,
 li {
   list-style-type: none;
   margin: 0;
-  padding: 0;
 }
 .monitor-container {
   display: flex;
@@ -709,6 +743,7 @@ li {
       .viewLists {
         height: 50%;
         overflow: auto;
+        padding: 0;
         li {
           padding-left: 25px;
           padding-right: 25px;

src/router/index.js

@@ -1,19 +1,20 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-// const Login = () => import('@/components/Login')
+const Login = () => import('@/components/Login')
 const Index = () => import('@/components/Index')
 const Monitor = () => import('@/pages/Monitor')
+const EquipList = () => import('@/pages/EquipList')
 Vue.use(Router)
 
 export default new Router({
   routes: [{
       path: '',
-      redirect: '/index/monitor1'
+      redirect: '/index/list'
+    },
+    {
+      path: '/login',
+      component: Login
     },
-    // {
-    //   path: '/login',
-    //   component: Login
-    // },
     {
       path: '/index',
       component: Index,
@@ -22,6 +23,10 @@ export default new Router({
           path: 'monitor1',
           component: Monitor,
         },
+        {
+          path: 'list1',
+          component: EquipList,
+        },
       ]
     },
     

static/js/js/ckplayer/ckplayer.xml

@@ -0,0 +1,280 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+  <style>
+		<cpath></cpath>
+		<!--
+		播放器风格压缩包文件的路径，默认的是style.swf
+		如果调用不出来可以试着设置成绝对路径试试
+		如果不知道路径并且使用的是默认配置，可以直接留空，播放器会自动寻找
+		-->
+		<language></language>
+		<!--
+		播放器所使用的语言配置文件，需要和播放器在同目录下，默认是language.xml
+		-->
+		<flashvars>{b->1}{p->1}</flashvars>
+		<!--
+		这里是用来做为对flashvars值的补充，除了c和x二个参数以外的设置都可以在这里进行配置
+			                     1 1 1 1   1 1 1 1 1 1 2 2 2  2 2 2 2 2    2 2 3 3 3 3 3 3 3 3 3   3 4  4 4 4
+       		   1 2 3 4 5 6 7 8 9 0 1 2 3   4 5 6 7 8 9 0 1 2  3 4 5 6 7    8 9 0 1 2 3 4 5 6 7 8   9 0  1 2 3
+		-->
+		<setup>1,1,1,1,1,2,0,1,0,0,0,1,200,0,2,1,0,1,1,1,0,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0</setup>
+		<!--
+		这是配置文件里比较重要的一个参数，共有N个功能控制参数，并且以后会继续的增加，各控制参数以英文逗号(,)隔开。下面列出各参数的说明：
+			1、鼠标经过按钮是否使用手型，0普通鼠标，1手型鼠标，2是只有按钮手型，3是控制栏手型
+			2、是否支持单击暂停，0不支持，1是支持
+			3、是否支持双击全屏，0不支持，1是支持
+			4、在播放前置广告时是否同时加载视频，0不加载，1加载
+			5、广告显示的参考对象，0是参考视频区域，1是参考播放器区域
+			6、广告大小的调整方式,只针对swf和图片有效,视频是自动缩放的
+				0=自动调整大小，意思是说大的话就变小，小的话就变大
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟参考对像(第5个控制)参数设置的一样宽高
+			7、前置广告播放顺序，0是顺序播放，1是随机播放，>1则随机取所有广告中的(N-1)个进行播放
+			8、对于视频广告是否采用修正，0是不使用，1是使用，如果是1，则用户在网速慢的情况下会按设定的倒计时进行播放广告，计时结束则放正片（比较人性化），设置成0的话，则强制播放完广告才能播放正片
+			9、是否开启滚动文字广告，0是不开启，1是开启且不使用关闭按钮，2是开启并且使用关闭按钮，开启后将在加载视频的时候加载滚动文字广告
+			10、视频的调整方式
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟参考对像(pm_video的设置)参数设置的一样宽高
+			11、是否在多视频时分段加载，0不是，1是
+			12、缩放视频时是否进行平滑处理，0不是，1是
+			13、视频缓冲时间,单位：毫秒,建议不超过300
+			14、初始图片调整方式(
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟pm_video参数设置的一样宽高
+			15、暂停广告调整方式(
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟pm_video参数设置的一样宽
+			16、暂停广告是否使用关闭广告设置，0不使用，1使用
+			17、缓冲时是否播放广告，0是不显示，1是显示并同时隐藏掉缓冲图标和进度，2是显示并不隐藏缓冲图标
+			18、是否支持键盘空格键控制播放和暂停0不支持，1支持
+			19、是否支持键盘左右方向键控制快进快退0不支持，1支持
+			20、是否支持键盘上下方向键控制音量0不支持，1支持
+			21、播放器返回js全部监听函数的等级，0-2,等级越高，返回的参数越多
+				0=不返回全部监听事件
+				1=返回监听，但不在控制台输出
+				2=返回监听，并且在控制台同步输出
+				3=返回全部监听事件，并且在参数前加上"播放器ID->"，用于多播放器的监听
+			22、快进和快退的秒数
+			23、界面上图片元素加载失败重新加载次数
+			24、开启加载皮肤压缩文件包的加载进度提示
+			25、使用隐藏控制栏时显示简单进度条的功能,0是不使用，1是使用，2是只在普通状态下使用
+			26、控制栏隐藏设置(0不隐藏，1全屏时隐藏，2都隐藏
+			27、控制栏隐藏延时时间，即在鼠标离开控制栏后多少毫秒后隐藏控制栏
+			28、滚动文字广告左右滚动时是否采用无缝，默认0采用，1是不采用
+			29、0是正常状态，1是控制栏默认隐藏，播放状态下鼠标经过播放器显示控制栏，2是一直隐藏控制栏
+			30、在播放rtmp视频时暂停后点击播放是否采用重新链接的方式,这里一共分0-2三个等级
+			31、当采用网址形式(flashvars里s=1/2时)读取视频地址时是采用默认0=get方法，1=post方式
+			32、是否启用播放按钮和暂停按钮
+			33、是否启用中间暂停按钮
+			34、是否启用静音按钮
+			35、是否启用全屏按钮
+			36、是否启用进度调节栏,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动，
+			37、是否启用调节音量
+			38、计算时间的间隔，毫秒
+			39、前置logo至少显示的时间，单位：毫秒
+			40、前置视频广告的默认音量
+			41、当s=3/4时加载插件是否从压缩包里加载，0不是，1是
+			42、加载风格是否采用加密方式传送，该功能普通用户不能使用,并且需要下载ckplayer-SN版
+			43、在s=1/2时，调用地址里的地址是否是相对地址（相对于调用文件），0不是，1是
+		-->
+		<pm_bg>0x000000,100,230,180</pm_bg>
+		<!--播放器整体的背景配置
+			1、整体背景颜色
+			2、背景透明度
+			3、播放器最小宽度
+			4、播放器最小高度
+			这里只是初始化时的设置，最终加载完播放器后显示的效果需要在style.swf/style.xml里设置该参数
+		-->
+		<mylogo>logo.swf</mylogo>
+		<!--
+		视频加载前显示的logo文件，不使用设置成<mylogo>null</mylogo>
+		-->
+		<pm_mylogo>1,1,-100,-55</pm_mylogo>
+		<!--
+		视频加载前显示的logo文件(mylogo参数的)的位置
+		本软件所有的四个参数控制位置的方式全部都是统一的意思，如下
+			1、水平对齐方式，0是左，1是中，2是右
+			2、垂直对齐方式，0是上，1是中，2是下
+			3、水平偏移量，举例说明，如果第1个参数设置成0左对齐，第3个偏移量设置成10，就是离左边10个像素，第一个参数设置成2，偏移量如果设置的是正值就会移到播放器外面，只有设置成负值才行，设置成-1，按钮就会跑到播放器外面
+			4、垂直偏移量 
+		-->
+		<logo>cklogo.png</logo>
+		<!--
+		默认右上角一直显示的logo，不使用设置成<logo>null</logo>
+		-->
+		<pm_logo>2,0,-100,20</pm_logo>
+		<!--
+		播放器右上角的logo的位置
+			1、水平对齐方式，0是左，1是中，2是右
+			2、垂直对齐方式，0是上，1是中，2是下
+			3、水平偏移量
+			4、垂直偏移量 
+		以下是播放器自带的二个插件
+		-->
+		<control_rel>related.swf,related.xml,0</control_rel>
+		<!--
+			1、视频播放结束后显示相关精彩视频的插件文件（注意，视频结束动作设置成3时(即var flashvars={e:3})有效），
+			2、xml文件是调用精彩视频的示例文件，可以自定义文件类型（比如asp,php,jsp,.net只要输出的是xml格式就行）,实际使用中一定要注意第二个参数的路径要正确
+			3、第三个参数是设置配置文件的编码，0是默认的utf-8,1是gbk2312 
+		-->
+		<control_pv>Preview.swf,105,2000</control_pv>
+		<!--
+		视频预览插件
+			1、插件文件名称(该插件和上面的精彩视频的插件都是放在风格压缩包里的)
+			2、离进度栏的高(指的是插件的顶部离进度栏的位置)
+			3、延迟时间(该处设置鼠标经过进度栏停顿多少毫秒后才显示插件)
+			建议一定要设置延时时间，不然当鼠标在进度栏上划过的时候就会读取视频地址进行预览，很占资源 
+		-->
+		<pm_repc></pm_repc>
+		<!--
+		视频地址替换符，该功能主要是用来做简单加密的功能，使用方法很简单，请注意，只针对f值是视频地址的时候有效，其它地方不能使用。具体的请查看http://www.ckplayer.com/manual.php?id=4#title_25
+		-->
+		<pm_spac>|</pm_spac>
+		<!--
+		视频地址间隔符，这里主要是播放多段视频时使用普通调用方式或网址调用方式时使用的。默认使用|，如果视频地址里本身存在|的话需要另外设置一个间隔符，注意，即使只有一个视频也需要设置。另外在使用rtmp协议播放视频的时候，如果视频存在多级目录的话，这里要改成其它的符号，因为rtmp协议的视频地址多级的话也需要用到|隔开流地址和实例地址 
+		-->
+		<pm_fpac>file->f</pm_fpac>
+		<!--
+		该参数的功能是把自定义的flashvars里的变量替换成ckplayer里对应的变量，默认的参数的意思是把flashvars里的file值替换成f值，因为ckplayer里只认f值，多个替换之间用竖线隔开
+		-->
+		<pm_advtime>2,0,-110,10,0,300,0</pm_advtime>
+		<!--
+		前置广告倒计时文本位置，播放前置 广告时有个倒计时的显示文本框，这里是设置该文本框的位置和宽高，对齐方式的。一共7个参数，分别表示：
+			1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐
+			2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐
+			3、水平位置偏移量
+			4、垂直位置偏移量
+			5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐
+			6、文本框宽席
+			7、文本框高度 
+		-->
+		<pm_advstatus>1,2,2,-200,-40</pm_advstatus>
+		<!--
+		前置广告静音按钮，静音按钮只在是视频广告时显示，当然也可以控制不显示 
+			1、是否显示0不显示，1显示
+			2、水平对齐方式
+			3、垂直对齐方式
+			4、水平偏移量
+			5、垂直偏移量
+		-->
+		<pm_advjp>1,0,2,2,-100,-40</pm_advjp>
+		<!--
+		前置广告跳过广告按钮的位置
+			1、是否显示0不显示，1是显示
+			2、跳过按钮触发对象(值0/1,0是直接跳转,1是触发js:function ckadjump(){})
+			3、水平对齐方式
+			4、垂直对齐方式
+			5、水平偏移量
+			6、垂直偏移量
+		-->
+		<pm_padvc>2,0,-13,-13</pm_padvc>
+		<!--
+		暂停广告的关闭按钮的位置
+			1、水平对齐方式
+			2、垂直对齐方式
+			3、水平偏移量
+			4、垂直偏移量
+		-->
+		<pm_advms>2,2,-46,-67</pm_advms>
+		<!--
+		滚动广告关闭按钮位置
+			1、水平对齐方式
+			2、垂直对齐方式
+			3、水平偏移量
+			4、垂直偏移量
+		-->
+		<pm_zip>1,1,-20,-8,1,0,0</pm_zip>
+		<!--
+		加载皮肤压缩包时提示文字的位置
+			1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐
+			2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐
+			3、水平位置偏移量
+			4、垂直位置偏移量
+			5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐
+			6、文本框宽席
+			7、文本框高度
+		-->
+		<pm_advmarquee>1,2,50,-70,50,18,0,0x000000,50,0,20,1,30,2000</pm_advmarquee>
+		<!--
+		滚动广告的控制，要使用的话需要在setup里的第9个参数设置成1
+		这里分二种情况,前六个参数是定位控制，第7个参数是设置定位方式(0：相对定位，1：绝对定位)
+		第一种情况：第7个参数是0的时候，相对定位，就是播放器长宽变化的时候，控制栏也跟着变
+			1、默认1:中间对齐
+			2、上中下对齐（0是上，1是中，2是下）
+			3、离左边的距离
+			4、Y轴偏移量
+			5、离右边的距离
+			6、高度
+			7、定位方式
+		第二种情况：第7个参数是1的时候，绝对定位，就是播放器长宽变化的时候，控制栏不跟着变，这种方式一般使用在控制栏大小不变的时候
+			1、左中右对齐方式（0是左，1是中间，2是右）
+			2、上中下对齐（0是上，1是中，2是下）
+			3、x偏移量
+			4、y偏移量
+			5、宽度
+			6、高度
+			7、定位方式
+		以上是前7个参数的作用
+			8、是文字广告的背景色
+			9、置背景色的透明度
+			10、控制滚动方向，0是水平滚动（包括左右），1是上下滚动（包括向上和向下）
+			11、移动的单位时长，即移动单位像素所需要的时长，毫秒
+			12、移动的单位像素,正数同左/上，负数向右/下
+			13、是行高，这个在设置向上或向下滚动的时候有用处
+			14、控制向上或向下滚动时每次停止的时间
+		-->
+		<pm_glowfilter>0,0x01485d, 100, 6, 3, 10, 1, 0, 0</pm_glowfilter>
+		<!--滚动文字广告是否采用发光滤镜
+			1、是否使用发光滤镜，0是不采用，1是使用
+			2、(default = 0xFF0000) — 光晕颜色，采用十六进制格式 0xRRGGBB。 默认值为 0xFF0000  
+			3、(default = 100) — 颜色的 Alpha 透明度值。 有效值为 0 到 100。 例如，25 设置透明度为 25%  
+			4、(default = 6.0) — 水平模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快  
+			5、(default = 6.0) — 垂直模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快  
+			6、(default = 2) — 印记或跨页的强度。 该值越高，压印的颜色越深，而且发光与背景之间的对比度也越强。 有效值为 0 到 255  
+			7、(default = 1) — 应用滤镜的次数
+			8、(default = 0) — 指定发光是否为内侧发光。 值 1 指定发光是内侧发光。 值 0 指定发光是外侧发光（对象外缘周围的发光）  
+			9、(default = 0) — 指定对象是否具有挖空效果。 值为 1 将使对象的填充变为透明，并显示文档的背景颜色背景颜色。 
+		-->
+		<advmarquee>{a href='http://www.ckplayer.com'}{font color='#FFFFFF' size='12'}这里可以放文字广告，为什么要在这里放呢，{/font}{/a}{a href='http://www.ckplayer.com'}{font color='#FFFFFF' size='12'}是因为如果你想在站外调用视频并且有文字广告的话，{/a}{br}就得在这里才能被加载，在js里是不能补加载的，{br}默认使用这里的广告，如果不想在这里使用可以清空这里的内容</advmarquee>
+		<!--
+		该处是滚动文字广告的内容，如果不想在这里设置，就把这里清空并且在页面中使用js的函数定义function ckmarqueeadv(){return '广告内容'}
+		-->
+		<mainfuntion></mainfuntion>
+		<!--
+		当flashvars里s=3/4时，调用的函数包名称，默认为空，调用时间轴上的函数setAppObj
+		-->
+		<flashplayer></flashplayer>
+		<!--
+		当flashvars里的s=3/4时，也可以把swf文件放在这里
+		-->
+		<calljs>ckplayer_status,ckadjump,playerstop,ckmarqueeadv</calljs>
+		<!--
+			1、全局监听返回结果的函数
+			2、跳过广告的函数
+			3、播放结束时调用的js函数
+			4、加载滚动文字广告的函数
+		-->
+		<myweb></myweb>
+		
+		<!--
+		以下内容部份是和插件相关的配置，请注意，自定义插件以及其配置的命名方式要注意，不要和系统的相重复，不然就会替换掉系统的相关设置，删除相关插件的话也可以同时删除相关的配置
+		以下内容定义自定义插件的相关配置，这里也可以自定义任何自己的插件需要配置的内容，当然，如果你某个插件不使用的话，也可以删除相关的配置
+		-->
+		<cpt_lights>0</cpt_lights>
+		<!--
+		该处定义是否使用开关灯，使用开灯效果时调用页面的js函数function closelights(){}，关灯调用 function closelights(){};
+		-->
+		<cpt_share>/ckplayer/share.xml</cpt_share>
+		<!--
+		分享插件调用的配置文件地址,此设设置成空，则不启用分享按钮
+		调用插件开始
+		-->
+	</style>
+</ckplayer>

static/js/js/ckplayer/language.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+	<ckplayer>
+		<style>
+			<pr_zip>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_zip>
+			<!--
+			加载皮肤包进度提示的文字，[$prtage]会被替换成加载百分比
+			-->
+			<pr_load>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_load>
+			<!--
+			当调用多段视频时，并且没有配置好各段视频的时间和字节数的情况下，播放器需要先读取各段视频的元数据进行计算，此时需要显示一个加载进度告诉用户已计算的情况。 
+			-->
+			<pr_noload>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}加载失败{/font}</pr_noload>
+			<!--
+			加载视频失败时显示的内容 
+			-->
+			<pr_buffer>{font color='#FFFFFF' face='Arial' size='12'}[$buffer]%{/font}</pr_buffer>
+			<!--
+			视频缓冲时显示的提示，[$buffer]会被替换成缓冲的百分比数字部份
+			-->
+			<pr_play>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击播放{/font}</pr_play>
+			<!--
+			鼠标经过播放按钮时的提示，支持html 
+			-->
+			<pr_pause>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击暂停{/font}</pr_pause>
+			<!--
+			鼠标经过暂停按钮时的提示，支持html 
+			-->
+			<pr_mute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击静音{/font}</pr_mute>
+			<!--
+			鼠标经过静音按钮时的提示，支持html 
+			-->
+			<pr_nomute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}取消静音{/font}</pr_nomute>
+			<!--
+			鼠标经过取消静音按钮时的提示，支持html 
+			-->
+			<pr_full>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击全屏{/font}</pr_full>
+			<!--
+			鼠标经过全屏按钮时的提示，支持html 
+			-->
+			<pr_nofull>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}退出全屏{/font}</pr_nofull>
+			<!--
+			鼠标经过退出全屏按钮时的提示，支持html 
+			-->
+			<pr_fastf>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快进{/font}</pr_fastf>
+			<!--
+			鼠标经过快进按钮时的提示，支持html 
+			-->
+			<pr_fastr>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快退{/font}</pr_fastr>
+			<!--
+			鼠标经过快退按钮时的提示，支持html 
+			-->
+			<pr_time>{font color='#FFFFFF' face='Arial' size='16'}[$Time]{/font}</pr_time>
+			<!--
+			鼠标经过进度栏时提示当前点上时间的，[$Time]会被替换成时间，支持html 
+			-->
+			<pr_volume>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}音量：[$Volume]%{/font}</pr_volume>
+			<!--
+			鼠标经过音量调节框或调整音量时提示，[$Volume]会自动替换音量值(0-100) 
+			-->
+			<pr_clockwait>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}00:00 / 00:00{/font}</pr_clockwait>
+			<!--
+			在默认不加载视频，即m=1的时候，同时并没有设置视频的时间和字节，即o和w值的时候，pr_clock和pr_clock2里的所有内容被替换成这里设置的值 
+			-->
+			<pr_live>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}视频直播中{/font}</pr_live>
+			<!--
+			在直播的情况下显示的文字 
+			-->
+			<pr_adv>{font color='#FFFFFF' size='12' face='Microsoft YaHei,微软雅黑'}广告剩余：{font color='#FF0000' size='15' face='Arial'}{b}[$Second]{/b}{/font} 秒{/font}</pr_adv>
+			<!--
+			广告倒计时显示的内容，[$Second]将会显示倒计时的秒数
+			-->
+			<pr_prompt>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}[$prompt]{/font}</pr_prompt>
+			<!--
+			提示点文字 
+			-->
+			<pr_cksetup>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}设置{/font}</pr_cksetup>
+			<!--
+			鼠标经过设置提示的文字（该定义为插件所用）
+			-->
+		</style>
+	</ckplayer>

static/js/js/ckplayer/related.xml

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+<title>{font color="#FFDD00" face="Microsoft YaHei,微软雅黑" size="14"}精彩视频推荐{/font}</title>
+	<!--左上角的标题说明文字，支持html-->
+	<area>600,400,0xFFDD00,20</area>
+	<!--
+		该插件在播放中的区域控制
+		固定尺寸，精彩视频区域会固定大小并且保持剧中
+		1：宽
+		2：高
+		3：边框色
+		4：边框透明度
+	-->
+	<image>120,90</image>
+	<!--图片的宽，高-->
+	<distance>150,175,100</distance>
+	<!--
+		1：横排图片之间的距离，前一个图片的左边到后一个图片的左边的距离
+		2：竖排图片之间距离，上一个图片的上边到下一个图片的上边距离，这里需要特别注意，因为图片显示区域是总区域-40的高度，默认的即<area>的高400-40=360，所以比如你的图片想一列显示二个，则该参数需要设置成360/2=180
+		3：文字距离图片上方的距离
+		只要设置好这三个参数，图片的位置就可以固定住了
+	-->
+	<rep_title>{a href="[url]" target="_blank"}{font color="#FFFFFF" face="新宋体"}[title]{/font}{/a}</rep_title>
+	<!--标题替换规则-->
+	<style>a{color:#FFFFFF;}a:hover{color:#FF0000;}</style>
+	<!--文本样式-->
+	<size>120,42,3</size>
+	<!--文本的宽度，高度，行和行之间距离-->
+	<relatedlist>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>1：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>2：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>3：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>4：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>5：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>6：最多两行,请不要超过二行</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>7：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>8：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>9：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>10：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>11：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>12：最多两行,请不要超过二行</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>13：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>14：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>15：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>16：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>17：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>18：最多两行,请不要超过二行</title>
+		</related>
+	</relatedlist>
+</ckplayer>

static/js/js/ckplayer/share.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+	<share_html>
+	{embed src="贵站网址，在ckplayer/share.xml里修改/ckplayer/ckplayer.swf" flashvars="[$share]" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"}{/embed}
+	</share_html>
+	<share_flash>
+	贵站网址/ckplayer/ckplayer.swf?[$share]
+	</share_flash>
+	<share_flashvars>
+	f,my_url,my_pic,a
+	</share_flashvars>
+	<share_path>ckplayer/share/</share_path><!--分享图片的文件夹地址-->
+	<share_replace>
+	</share_replace>
+	<share_permit>0</share_permit><!--是否有视听许可证,默认0没有，1是有-->
+	<share_uuid>
+	c25cf02c-1705-412d-bd4b-77a10b380f08
+	</share_uuid>
+	<share_button>
+		<share>
+			<id>qqmb</id>
+			<img>qq.png</img>
+			<coordinate>20,50</coordinate>
+		</share>
+		<share>
+			<id>sinaminiblog</id>
+			<img>sina.png</img>
+			<coordinate>101,50</coordinate>
+		</share>
+		<share>
+			<id>qzone</id>
+			<img>qzone.png</img>
+			<coordinate>182,50</coordinate>
+		</share>
+		<share>
+			<id>renren</id>
+			<img>rr.png</img>
+			<coordinate>263,50</coordinate>
+		</share>
+		<share>
+			<id>kaixin001</id>
+			<img>kaixin001.png</img>
+			<coordinate>20,85</coordinate>
+		</share>
+		<share>
+			<id>tianya</id>
+			<img>tianya.png</img>
+			<coordinate>101,85</coordinate>
+		</share>
+		<share>
+			<id>feixin</id>
+			<img>feixin.png</img>
+			<coordinate>182,85</coordinate>
+		</share>
+		<share>
+			<id>msn</id>
+			<img>msn.png</img>
+			<coordinate>263,85</coordinate>
+		</share>
+	</share_button>
+</ckplayer>

static/js/js/playctrl/SuperRender_10.js

@@ -0,0 +1,337 @@
+"use strict";
+
+var vertexYUVShader = [
+    'attribute vec4 vertexPos;',
+    'attribute vec2 texturePos;',
+    'varying vec2 textureCoord;',
+
+    'void main()',
+    '{',
+        'gl_Position = vertexPos;',
+        'textureCoord = texturePos;',
+    '}'
+    ].join('\n');
+
+var fragmentYUVShader = [
+    'precision highp float;',
+    'varying highp vec2 textureCoord;',
+    'uniform sampler2D ySampler;',
+    'uniform sampler2D uSampler;',
+    'uniform sampler2D vSampler;',
+    'const mat4 YUV2RGB = mat4',
+    '(',
+        '1.1643828125, 0, 1.59602734375, -.87078515625,',
+        '1.1643828125, -.39176171875, -.81296875, .52959375,',
+        '1.1643828125, 2.017234375, 0, -1.081390625,',
+        '0, 0, 0, 1',
+    ');',
+  
+    'void main(void) {',
+        'highp float y = texture2D(ySampler,  textureCoord).r;',
+        'highp float u = texture2D(uSampler,  textureCoord).r;',
+        'highp float v = texture2D(vSampler,  textureCoord).r;',
+        'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
+    '}'
+    ].join('\n');
+
+(function (root, factory) {
+    root.SuperRender = factory();
+}(this, function () {
+    
+    function RenderManager(canvas) {
+
+        this.canvasElement = document.getElementById(canvas);
+
+        this.initContextGL();
+
+        if(this.contextGL) {
+            this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
+            this.initBuffers();
+            this.initTextures();
+        }
+    };
+
+    /**
+     * 初始化WebGL上下文
+     */
+    RenderManager.prototype.initContextGL = function() {
+        
+        var canvas = this.canvasElement;
+
+        var gl = null;
+
+        try {
+            gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+        } catch (e) {
+            gl = null;
+        }
+
+        if(!gl || typeof gl.getParameter !== "function") {
+            gl = null;
+        }
+
+        this.contextGL = gl;
+
+        console.log("WebGL1.0");
+    };
+
+    /**
+     * 初始化着色器程序
+     * @param vertexShaderScript    顶点着色器脚本
+     * @param fragmentShaderScript  片段着色器脚本
+     */
+    RenderManager.prototype.initProgram = function(vertexShaderScript, fragmentShaderScript) {
+        
+        var gl = this.contextGL;
+        
+        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, vertexShaderScript);
+        gl.compileShader(vertexShader);
+        if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
+        }
+
+        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, fragmentShaderScript);
+        gl.compileShader(fragmentShader);
+        if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
+        }
+
+        var program = gl.createProgram();
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+        if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
+        }
+        
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+
+        return program;
+    };
+
+    /**
+     * 初始化数据缓存
+     */
+    RenderManager.prototype.initBuffers = function() {
+        
+        var gl = this.contextGL;
+    
+        var vertexPosBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        var texturePosBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        this.vertexPosBuffer  = vertexPosBuffer;
+        this.texturePosBuffer = texturePosBuffer;
+    };
+
+    /**
+     * 初始化YUV纹理
+     */
+    RenderManager.prototype.initTextures = function() {
+        
+        var gl = this.contextGL;
+        
+        var program = this.YUVProgram;
+        gl.useProgram(program);
+        
+        var yTextureRef = this.initTexture();
+        var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
+        gl.uniform1i(ySamplerRef, 0);
+        this.yTextureRef = yTextureRef;
+
+        var uTextureRef = this.initTexture();
+        var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
+        gl.uniform1i(uSamplerRef, 1);
+        this.uTextureRef = uTextureRef;
+
+        var vTextureRef = this.initTexture();
+        var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
+        gl.uniform1i(vSamplerRef, 2);
+        this.vTextureRef = vTextureRef;
+        
+        gl.useProgram(null);
+    };
+
+    /**
+     * 创建纹理
+     */
+    RenderManager.prototype.initTexture = function() {
+        
+        var gl = this.contextGL;
+
+        var textureRef = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, textureRef);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        return textureRef;
+    };
+
+    /**
+     * 显示帧数据
+     * @param nWidth    宽度
+     * @param nHeight   高度
+     * @param nHeight   帧数据
+     */
+    RenderManager.prototype.SR_DisplayFrameData = function(nWidth, nHeight, pData) {
+
+        if(nWidth <= 0 || nHeight <= 0)
+        {
+            return;
+        }
+
+        var gl = this.contextGL;
+
+        if(null == pData)
+        {
+            gl.clearColor(0.0, 0.0, 0.0, 0.0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            return;
+        }
+
+        var canvas = this.canvasElement;
+
+        this.nWindowWidth = canvas.width;
+        this.nWindowHeight = canvas.height;
+        
+        var nWindowWidth = this.nWindowWidth;
+        var nWindowHeight = this.nWindowHeight;
+
+        gl.clearColor(0.8, 0.8, 1.0, 1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+        gl.viewport(0, 0, nWindowWidth, nWindowHeight);
+
+        this.updateFrameData(nWidth, nHeight, pData);
+
+        var program = this.YUVProgram;
+        gl.useProgram(program);
+
+        var vertexPosBuffer = this.vertexPosBuffer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
+        var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
+        gl.enableVertexAttribArray(vertexPosRef);
+        gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        var texturePosBuffer = this.texturePosBuffer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+        var texturePosRef = gl.getAttribLocation(program, 'texturePos');
+        gl.enableVertexAttribArray(texturePosRef);
+        gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
+
+        gl.disableVertexAttribArray(vertexPosRef);
+        gl.disableVertexAttribArray(texturePosRef);
+
+        gl.useProgram(null);
+    };
+
+    /**
+     * 上传YUV数据到纹理
+     * @param nWidth    宽度
+     * @param nHeight   高度
+     * @param nHeight   帧数据
+     */
+    RenderManager.prototype.updateFrameData = function(width, height, data) {
+
+        var gl = this.contextGL;
+
+        var yTextureRef = this.yTextureRef;
+        var uTextureRef = this.uTextureRef;
+        var vTextureRef = this.vTextureRef;
+
+        var i420Data = data;
+
+        var yDataLength = width * height;
+        var yData = i420Data.subarray(0, yDataLength);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
+
+        var cbDataLength = width/2 * height/2;
+        var cbData = i420Data.subarray(yDataLength, yDataLength + cbDataLength);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
+
+        var crDataLength = cbDataLength;
+        var crData = i420Data.subarray(yDataLength + cbDataLength, yDataLength + cbDataLength + crDataLength);
+        gl.activeTexture(gl.TEXTURE2);
+        gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
+    };
+
+    /**
+     * 设置显示区域
+     * @param stDisplayRect    显示区域
+     */
+    RenderManager.prototype.SR_SetDisplayRect = function(stDisplayRect) {
+
+        var gl = this.contextGL;
+
+        var nWindowWidth = this.nWindowWidth;
+        var nWindowHeight = this.nWindowHeight;
+        
+        var texturePosValues = null;
+        
+        if(stDisplayRect && nWindowWidth > 0 && nWindowHeight > 0) {
+            var fLeft = stDisplayRect.left / nWindowWidth;
+            var fTop = stDisplayRect.top / nWindowHeight;
+            var fRight = stDisplayRect.right / nWindowWidth;
+            var fBottom = stDisplayRect.bottom / nWindowHeight;
+
+            texturePosValues = new Float32Array([fRight, fTop, fLeft, fTop, fRight, fBottom, fLeft, fBottom]);
+        }
+        else {
+            texturePosValues = new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]);
+        }
+
+        var texturePosBuffer = this.texturePosBuffer;
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, texturePosValues);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    };
+
+    /**
+     * 释放显示资源
+     */
+    RenderManager.prototype.SR_Destroy = function() {
+
+        var gl = this.contextGL;
+        
+        var YUVProgram = this.YUVProgram;
+        gl.deleteProgram(YUVProgram);
+
+        var vertexPosBuffer = this.vertexPosBuffer;
+        var texturePosBuffer = this.texturePosBuffer;
+        
+        gl.deleteBuffer(vertexPosBuffer);
+        gl.deleteBuffer(texturePosBuffer);
+
+        var yTextureRef = this.yTextureRef;
+        var uTextureRef = this.uTextureRef;
+        var vTextureRef = this.vTextureRef;
+        gl.deleteTexture(yTextureRef);
+        gl.deleteTexture(uTextureRef);
+        gl.deleteTexture(vTextureRef);
+    };
+
+    return RenderManager;
+
+}));

static/js/js/wav-audio-encoder.js

@@ -0,0 +1,51 @@
+(function(self) {
+  var min = Math.min,
+      max = Math.max;
+
+  var setString = function(view, offset, str) {
+    var len = str.length;
+    for (var i = 0; i < len; ++i)
+      view.setUint8(offset + i, str.charCodeAt(i));
+  };
+
+  var Encoder = function(sampleRate, numChannels) {
+    this.sampleRate = sampleRate;
+    this.numChannels = numChannels;
+    this.numSamples = 0;
+    this.dataViews = [];
+  };
+
+  Encoder.prototype.encode = function(buffer) {
+    var len = 1024;
+    this.dataViews.push(buffer);
+    this.numSamples += len;
+  };
+
+  Encoder.prototype.finish = function(mimeType) {
+    var dataSize = this.numChannels * this.numSamples * 2,
+        view = new DataView(new ArrayBuffer(44));
+    setString(view, 0, 'RIFF');
+    view.setUint32(4, 36 + dataSize, true);
+    setString(view, 8, 'WAVE');
+    setString(view, 12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, this.numChannels, true);
+    view.setUint32(24, this.sampleRate, true);
+    view.setUint32(28, this.sampleRate * 4, true);
+    view.setUint16(32, this.numChannels * 2, true);
+    view.setUint16(34, 16, true);
+    setString(view, 36, 'data');
+    view.setUint32(40, dataSize, true);
+    this.dataViews.unshift(view);
+    var blob = new Blob(this.dataViews, { type: 'audio/wav' });
+    this.cleanup();
+    return blob;
+  };
+
+  Encoder.prototype.cancel = Encoder.prototype.cleanup = function() {
+    delete this.dataViews;
+  };
+
+  self.WavAudioEncoder = Encoder;
+})(self);

static/js/js/worker.js

@@ -0,0 +1,35 @@
+(function(){
+    'use strict';
+
+    var  samplesMono;
+
+    var floatTo16BitPCM = function(input, output){
+        for(var i = 0; i < input.length; i++){
+            var s = Math.max(-1, Math.min(1, input[i]));
+            output[i] = (s < 0 ? s * 0x8000 : s * 0x7FFF);
+        }
+    };
+
+    var convertBuffer = function(arrayBuffer){
+        var data = new Float32Array(arrayBuffer);
+        var out = new Int16Array(arrayBuffer.length);
+        floatTo16BitPCM(data, out);
+        return out;
+    };
+
+    var encode = function(arrayBuffer){
+        samplesMono = convertBuffer(arrayBuffer);
+        self.postMessage({
+            cmd: 'pcm',
+            buf: samplesMono
+        });
+    };
+
+  self.onmessage = function(e){
+    switch(e.data.cmd){
+      case 'encode':
+        encode(e.data.buf);
+        break;
+    }
+  };
+})();