地图点击视频监控出现弹窗

front/public/index.html

@@ -64,6 +64,8 @@
     <!-- 大华平台相关包 -->
     <script type="text/javascript" src="./static/js/encrypt.js"></script>
     <script type="text/javascript" src="./static/js/DHWs.js"></script>
+    <!-- h5player -->
+    <script src="./util/h5player.min.js"></script>
     <!-- 站点配置 -->
     <script>
         window.SITE_CONFIG = {}

front/public/static/config/mapConfig.js

@@ -7,7 +7,8 @@
  */
 var _mapConfig = {}
 
-;(function () {
+;
+(function() {
     var L = window.L || {}
         // // 定义底图初始化化参数
         //  请在此处更改你的配置**********************************************
@@ -20,10 +21,10 @@ var _mapConfig = {}
             base: 'xihaian',
             CURRENT_MAP_OPTIONS: {
                 // crs: CRS_4490,
-        center: [36.17, 120.13],
+                center: [35.96, 120.19],
-        maxZoom: 18,
+                maxZoom: 13,
                 minZoom: 0,
-        zoom: 10,
+                zoom: 5,
             },
         },
         qingdao: {
@@ -55,15 +56,13 @@ var _mapConfig = {}
             },
             MAP_VENDOR: 'Supermap', // 地图厂商 Supermap bdmap 3dbdmap
             TITLE_LAYER: {
-        mapUrl:
+                mapUrl: 'http://15.72.177.174:8195/portalproxy/TileServer/arcgis/rest/services/normal2021/MapServer?key=iOgQotfgfyLvhj6WgfDTpq7F',
-          'http://15.72.177.174:8195/portalproxy/TileServer/arcgis/rest/services/normal2021/MapServer?key=iOgQotfgfyLvhj6WgfDTpq7F',
                 type: 'tiled',
                 name: '矢量',
                 icon: 'vector_map.png',
             },
             TITLE_LAYER_REMOTE: {
-        mapUrl:
+                mapUrl: 'http://q3d.qd.gov.cn:8195/portalproxy/vw6bffpy/TileServer/arcgis/rest/services/normal_2021_4490Arcgis/MapServer?key=iOgQotfgfyLvhj6WgfDTpq7F',
-          'http://q3d.qd.gov.cn:8195/portalproxy/vw6bffpy/TileServer/arcgis/rest/services/normal_2021_4490Arcgis/MapServer?key=iOgQotfgfyLvhj6WgfDTpq7F',
                 type: 'tiled',
                 name: '矢量',
                 icon: 'vector_map.png',
@@ -71,8 +70,7 @@ var _mapConfig = {}
             // TITLE_LAYER_REMOTE: { mapUrl: 'http://15.72.177.174:8195/portalproxy/TileServer/arcgis/rest/services/normal2021/MapServer?key=iOgQotfgfyLvhj6WgfDTpq7F', type: 'tiled', name: '矢量', icon: 'vector_map.png' },
             // TITLE_LAYER_REMOTE: { mapUrl: 'http://15.2.21.238:8090/iserver/services/map-ugcv5-QingdaoRemoteImageMap/rest/maps/QingdaoRemoteImageMap', type: 'remote', name: '影像', icon: 'satellite_map.png' },
             TITLE_LAYER_DARK: {
-        mapUrl:
+                mapUrl: 'http://15.2.21.238:8090/iserver/services/map-ugcv5-shandong/rest/maps/shandong',
-          'http://15.2.21.238:8090/iserver/services/map-ugcv5-shandong/rest/maps/shandong',
                 type: 'dark',
                 name: '其他',
                 icon: 'other_map.png',
@@ -81,26 +79,22 @@ var _mapConfig = {}
     }
     var MAPCONFIGMIXTRE = {
         CURRENT_SERVER_NAME: CONFIGKEY,
-    BUFFER_URL:
+        BUFFER_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/spatialAnalysis-' +
             BASECONFIGITEM[CONFIGKEY].WORKPLACE_NAME +
             '/restjsr/spatialanalyst',
-    QUERY_URL:
+        QUERY_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/map-HIMAP_HIGHGO/rest/maps/' +
             BASECONFIGITEM[CONFIGKEY].MAP_NAME,
         // QUERY_URL: 'http://' + BASECONFIGITEM[CONFIGKEY].ISERVER_URL + '/iserver/services/data-HIMAP_HIGHGO/rest/data/datasources/HISENSE_himap',
-    DYNAMIC_ROAD_URL:
+        DYNAMIC_ROAD_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/spatialAnalysis-' +
             BASECONFIGITEM[CONFIGKEY].WORKPLACE_NAME +
             '/restjsr/spatialanalyst',
-    DYNMIC_URL:
+        DYNMIC_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/map-' +
             BASECONFIGITEM[CONFIGKEY].WORKPLACE_NAME +
@@ -109,20 +103,16 @@ var _mapConfig = {}
         // 数据库型
         // NETWORK_URL: 'http://' + BASECONFIGITEM[CONFIGKEY].ISERVER_URL + '/iserver/services/transportationAnalyst-' + BASECONFIGITEM[CONFIGKEY].WORKPLACE_NAME + '/rest/networkanalyst/BuildNetwork_2@' + BASECONFIGITEM[CONFIGKEY].DATASOURCE_NAME,
         // 程工系统测试环境，因为是文件型，和数据库性有区别，发布时请注意
-    NETWORK_URL:
+        NETWORK_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/transportationAnalyst-road/rest/networkanalyst/BuildNetwork_2@road',
-    PLOTTING_URL:
+        PLOTTING_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/plot-JY/rest/plot/',
-    POI_URL:
+        POI_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address',
-    EDITORDATA_URL:
+        EDITORDATA_URL: 'http://' +
-      'http://' +
             BASECONFIGITEM[CONFIGKEY].ISERVER_URL +
             '/iserver/services/data-' +
             BASECONFIGITEM[CONFIGKEY].WORKPLACE_NAME +

front/public/util/playctrl1/AudioRenderer.js

@@ -0,0 +1,225 @@
+/**
+ * Created by wangweijie5 on 2016/12/16.
+ */
+
+"use strict";
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var __instance = function () {
+    var instance = void 0;
+    return function (newInstance) {
+        if (newInstance) instance = newInstance;
+        return instance;
+    };
+}();
+
+var AudioRenderer = function () {
+    function AudioRenderer() {
+        _classCallCheck(this, AudioRenderer);
+
+        if (__instance()) return __instance();
+
+        // 确保只有单例
+        if (AudioRenderer.unique !== undefined) {
+            return AudioRenderer.unique;
+        }
+
+        AudioRenderer.unique = this;
+
+        this.oAudioContext = null;
+        this.currentVolume = 0.8; // 初始音量
+        this.bSetVolume = false;
+        this.gainNode = null;
+        this.iWndNum = -1; // 窗口号
+        this.mVolumes = new Map(); // 用于存储所有音量
+
+        // Init AudioContext
+        var AudioContext = window.AudioContext || window.webkitAudioContext;
+        this.oAudioContext = new AudioContext();
+
+        this.writeString = function (view, offset, string) {
+            for (var i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        };
+
+        this.setBufferToDataview = function (output, offset, input) {
+            for (var i = 0; i < input.length; i++, offset++) {
+                output.setUint8(offset, input[i]);
+            }
+        };
+
+        __instance(this);
+    }
+
+    /**
+     * @synopsis 音频播放
+     *
+     *  @param dataBuf [IN] 音频缓存
+     *  @param dataLen [IN] 缓存长度
+     *  @param audioInfo [IN] 音频参数
+     *
+     * @returns 状态码
+     */
+
+
+    _createClass(AudioRenderer, [{
+        key: 'Play',
+        value: function Play(dataBuf, dataLen, audioInfo) {
+            var bufferData = new ArrayBuffer(44 + dataLen);
+            var viewTalk = new DataView(bufferData);
+            var sampleRates = audioInfo.samplesPerSec;
+            var channels = audioInfo.channels;
+            var bitsPerSample = audioInfo.bitsPerSample;
+
+            //console.log("audiorender sampleRates"+sampleRates+"channels:"+channels+"bitsPerSample:"+bitsPerSample);
+
+            /* RIFF identifier */
+            this.writeString(viewTalk, 0, 'RIFF');
+            /* file length */
+            viewTalk.setUint32(4, 32 + dataLen * 2, true);
+            /* RIFF type */
+            this.writeString(viewTalk, 8, 'WAVE');
+            /* format chunk identifier */
+            this.writeString(viewTalk, 12, 'fmt ');
+            /* format chunk length */
+            viewTalk.setUint32(16, 16, true);
+            /* sample format (raw) */
+            viewTalk.setUint16(20, 1, true);
+            /* channel count */
+            viewTalk.setUint16(22, channels, true);
+            /* sample rate */
+            viewTalk.setUint32(24, sampleRates, true);
+            /* byte rate (sample rate * block align) */
+            viewTalk.setUint32(28, sampleRates * 2, true);
+            /* block align (channel count * bytes per sample)/8 */
+            viewTalk.setUint16(32, channels * bitsPerSample / 8, true);
+            /* bits per sample */
+            viewTalk.setUint16(34, bitsPerSample, true);
+            /* data chunk identifier */
+            this.writeString(viewTalk, 36, 'data');
+            /* data chunk length */
+            viewTalk.setUint32(40, dataLen, true);
+            this.setBufferToDataview(viewTalk, 44, dataBuf);
+
+            var self = this;
+            this.oAudioContext.decodeAudioData(viewTalk.buffer, function (buffer) {
+
+                var bufferSource = self.oAudioContext.createBufferSource();
+                if (bufferSource == null) {
+                    return -1;
+                }
+
+                bufferSource.buffer = buffer;
+                bufferSource.start(0);
+
+                if (self.gainNode == null || self.bSetVolume) {
+                    self.gainNode = self.oAudioContext.createGain();
+                    // self.gainNode.gain.value = self.currentVolume;
+                    // // self.currentVolume = self.gainNode.gain.value;
+                    // self.gainNode.connect(self.oAudioContext.destination);
+
+                    self.bSetVolume = false;
+                }
+
+                self.gainNode.gain.value = self.currentVolume;
+                // self.currentVolume = self.gainNode.gain.value;
+                self.gainNode.connect(self.oAudioContext.destination);
+
+                bufferSource.connect(self.gainNode);
+            }, function (e) {
+                console.log("decode error");
+                return -1;
+            });
+
+            return 0;
+        }
+
+        /**
+         * @synopsis 停止播放
+         *
+         * @returns 返回音量
+         */
+
+    }, {
+        key: 'Stop',
+        value: function Stop() {
+            if (this.gainNode != null) {
+                this.gainNode.disconnect();
+                this.gainNode = null;
+            }
+
+            // this.oAudioContext.close();
+
+            // AudioRenderer.unique = undefined;
+            // __instance() = null;
+            return true;
+        }
+
+        /**
+         * @synopsis 设置音量
+         *
+         *  @param iVolume [IN] 音量
+         *
+         * @returns 状态码
+         */
+
+    }, {
+        key: 'SetVolume',
+        value: function SetVolume(iVolume) {
+            this.bSetVolume = true;
+            this.currentVolume = iVolume;
+
+            // 储存当前窗口设置音量值
+            this.mVolumes.set(this.iWndNum, iVolume);
+            return true;
+        }
+
+        /**
+         * @synopsis 设置窗口号
+         *
+         *  @param iWndNum [IN] 窗口号
+         *
+         * @returns 状态码
+         */
+
+    }, {
+        key: 'SetWndNum',
+        value: function SetWndNum(iWndNum) {
+            this.iWndNum = iWndNum;
+
+            // 获取当前窗口设置音量值
+            var iVolume = this.mVolumes.get(iWndNum);
+            if (iVolume == undefined) {
+                iVolume = 0.8; // 默认音量
+            }
+            this.currentVolume = iVolume;
+
+            return true;
+        }
+
+        /**
+         * @synopsis 获取音量
+         *
+         * @returns 返回音量
+         */
+
+    }, {
+        key: 'GetVolume',
+        value: function GetVolume() {
+            // 获取当前窗口设置音量值
+            var iVolume = this.mVolumes.get(this.iWndNum);
+            if (iVolume == undefined) {
+                iVolume = 0.8; // 默认音量
+            }
+
+            return iVolume;
+        }
+    }]);
+
+    return AudioRenderer;
+}();
+//# sourceMappingURL=AudioRenderer.js.map

front/public/util/playctrl1/DecodeWorker.js

@@ -0,0 +1,711 @@
+/**
+ * Created by wangweijie5 on 2016/12/5.
+ */
+(function (event) {
+    const AUDIO_TYPE = 0;	// 音频
+    const VIDEO_TYPE = 1;   // 视频
+    const PRIVT_TYPE = 2;  // 私有帧
+
+    const PLAYM4_AUDIO_FRAME = 100; // 音频帧
+    const PLAYM4_VIDEO_FRAME = 101; // 视频帧
+
+    const PLAYM4_OK = 1;
+    const PLAYM4_DECODE_ERROR = 44 	// 解码失败
+    const PLAYM4_NOT_KEYFRAME = 48; 	// 非关键帧
+    const PLAYM4_NEED_MORE_DATA = 31;   // 需要更多数据才能解析
+    const PLAYM4_SYS_NOT_SUPPORT = 16; 	// 不支持
+
+    const PLAYM4_PARA_ENCODER_ERROR                     = 71;  //音频编码参数错误
+    const PLAYM4_PRECONDITION_ENCODER_ERROR             = 72;  //不满足音频编码条件错误
+    const PLAYM4_ENCODER_ERROR                          = 73;  //音频编码失败
+    const PLAYM4_CREATE_ENCODER_ERROR                   = 74;  //创建音频编码器失败
+    const PLAYM4_NOSUPPORT_ENCODER_ERROR                = 75;  //音频编码不支持
+    const PLAYM4_ALLOC_MEMORY_ENCODER_ERROR	            = 76;  //音频编码相关内存申请失败
+    const PLAYM4_BUF_OVER_ENCODER_ERROR                 = 77;  //音频编码相关buffer满
+    const PLAYM4_NEED_MORE_DATA_ENCODER_ERROR           = 78;  //音频编码需要更多数据进行编码
+    const PLAYM4_CALL_ORDER_ENCODER_ERROR               = 79;  //音频编码调用顺序错误
+
+    const PLAYM4_ITYPE_DECODE_ERROR                     =100;   //定位后送进来的第一帧I帧解码失败
+    const PLAYM4_FIRST_FRAME_NOT_ICURRENT               =101;   //定位后送进来的第一帧不是定位帧所在的I帧（Ni>Mp）
+
+
+    importScripts('Decoder.js');
+    Module.addOnPostRun(function () {
+        postMessage({'function': "loaded"});
+    });
+
+    var iStreamMode = 0;  // 流模式
+
+    var bOpenMode = false;
+    var bOpenStream = false;
+    
+    var funGetFrameData = null;
+    var funGetAudFrameData = null;
+	
+	var bWorkerPrintLog=false;//worker层log开关
+
+    onmessage = function (event)
+    {
+        var eventData = event.data;
+        var res = 0;
+        switch (eventData.command)
+        {
+			case "printLog":
+			    let downloadFlag=eventData.data;
+			    if(downloadFlag===true)
+                {
+                    bWorkerPrintLog=true;
+                    res = Module._SetPrintLogFlag(downloadFlag);
+                }
+			    else
+                {
+                    bWorkerPrintLog=false;
+                    res = Module._SetPrintLogFlag(downloadFlag);
+                }
+
+				if (res !== PLAYM4_OK)
+                {
+					console.log("DecodeWorker.js: PlayerSDK print log failed,res"+res);
+                    postMessage({'function': "printLog", 'errorCode': res});
+                }
+				break;
+            case "SetPlayPosition":
+                let nFrameNumOrTime=eventData.data;
+                let enPosType=eventData.type;
+                res = Module._SetPlayPosition(nFrameNumOrTime,enPosType);
+                if (res !== PLAYM4_OK)
+                {
+                    postMessage({'function': "SetPlayPosition", 'errorCode': res});
+                    return;
+                }
+                //有没有buffer需要清除
+
+                break;
+            case "SetStreamOpenMode":
+                iStreamMode = eventData.data;
+                res = Module._SetStreamOpenMode(iStreamMode);
+                if (res !== PLAYM4_OK)
+                {
+                    postMessage({'function': "SetStreamOpenMode", 'errorCode': res});
+                    return;
+                }
+                bOpenMode = true;
+                break;
+
+            case "OpenStream":
+                // 接收到的数据
+                var iHeadLen = eventData.dataSize;
+                var pHead = Module._malloc(iHeadLen + 4);
+                if (pHead === null)
+                {
+                    return;
+                }
+                var aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen);
+                aHead.set(eventData.data);
+                res = Module._OpenStream(pHead, iHeadLen, eventData.bufPoolSize);
+                postMessage({'function': "OpenStream", 'errorCode': res});
+                if (res !== PLAYM4_OK)
+                {
+                    //释放内存
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+                bOpenStream = true;
+
+                // 加4字节长度信息
+                var a32 = new Uint32Array([iHeadLen]);
+                var a8 = new Uint8Array(a32.buffer);
+                var tempBuf = new Uint8Array(iHeadLen + 4);
+                tempBuf.set(a8, 0);
+                tempBuf.set(eventData.data, 4);
+                a32 = null;
+                a8 = null;
+
+                aHead = Module.HEAPU8.subarray(pHead, pHead + iHeadLen + 4);
+                aHead.set(tempBuf);
+                tempBuf = null;
+
+                res = Module._InputData(pHead, iHeadLen + 4);
+                if (res !== PLAYM4_OK)
+                {
+                    postMessage({'function': "InputData", 'errorCode': res});
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+
+                // 释放内存
+                Module._free(pHead);
+                pHead = null;
+
+                if (funGetFrameData === null) {
+                    funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                }
+
+                if (iStreamMode === 0) {
+                    // Module._GetFrameData();
+                    funGetFrameData();
+                }
+                break;
+
+            case "InputData":
+                // 接收到的数据
+                var iLen = eventData.dataSize;
+                if(bWorkerPrintLog)
+                {
+                    console.log("<<<Worker: DecodeWorker-InputData iLen:"+iLen);
+                }
+                
+                if (iLen > 0)
+                {
+                    var pInputData = Module._malloc(iLen);
+                    if (pInputData === null)
+                    {
+                        return;
+                    }
+                    var inputData = new Uint8Array(eventData.data);
+                    // var aInputData = Module.HEAPU8.subarray(pInputData, pInputData + iLen);
+                    // aInputData.set(inputData);
+                    Module.writeArrayToMemory(inputData, pInputData);
+                    inputData = null;
+                    res = Module._InputData(pInputData, iLen);
+                    //console.log("DecodeWorker-InputData-ret:%d", res);
+					if(bWorkerPrintLog)
+					{
+						console.log("<<<Worker:InputData result:"+ +res);
+					}
+					
+                    if (res !== PLAYM4_OK)
+                    {
+                        if (res === 98)
+                        {
+                            res = 1;
+                        }
+                        postMessage({'function': "InputData", 'errorCode': res});
+                    }
+                    Module._free(pInputData);
+                    pInputData = null;
+                }
+
+                /////////////////////
+                if (funGetFrameData === null)
+                {
+                    funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                }
+
+                while (bOpenMode && bOpenStream)
+                {
+                    
+                    var ret = getFrameData(funGetFrameData);
+                    // 直到获取视频帧或数据不足为止
+                    if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret)
+                    {
+                        break;
+                    }
+                }
+                break;
+
+            case "SetSecretKey":
+                var keyLen = eventData.nKeyLen;
+                var pKeyData = Module._malloc(keyLen);
+                if (pKeyData === null) {
+                    return;
+                }
+                var nKeySize = eventData.data.length
+                var bufData = stringToBytes (eventData.data);
+                var aKeyData = Module.HEAPU8.subarray(pKeyData, pKeyData + keyLen);
+                aKeyData.set(new Uint8Array(bufData));
+
+                res = Module._SetSecretKey(eventData.nKeyType, pKeyData, keyLen, nKeySize);
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "SetSecretKey", 'errorCode': res});
+                    Module._free(pKeyData);
+                    pKeyData = null;
+                    return;
+                }
+
+                Module._free(pKeyData);
+                pKeyData = null;
+                break;
+
+            case "GetBMP":
+                var nBMPWidth = eventData.width;
+                var nBMPHeight = eventData.height;
+                var pYUVData = eventData.data;
+                var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
+                var oBMPCropRect = eventData.rect;
+
+                var pDataYUV = Module._malloc(nYUVSize);
+                if (pDataYUV === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData, 0, nYUVSize), pDataYUV);
+
+                // 分配BMP空间
+                var nBmpSize = nBMPWidth * nBMPHeight * 4 + 60;
+                var pBmpData = Module._malloc(nBmpSize);
+                var pBmpSize = Module._malloc(4);
+                if (pBmpData === null || pBmpSize === null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+
+                    if (pBmpData != null) {
+                        Module._free(pBmpData);
+                        pBmpData = null;
+                    }
+
+                    if (pBmpSize != null) {
+                        Module._free(pBmpSize);
+                        pBmpSize = null;
+                    }
+                    return;
+                }
+
+               //Module._memset(pBmpSize, nBmpSize, 4); // 防止bmp截图出现输入数据过大的错误码
+                Module.setValue(pBmpSize, nBmpSize, "i32"); 
+                res = Module._GetBMP(pDataYUV, nYUVSize, pBmpData, pBmpSize,
+                    oBMPCropRect.left, oBMPCropRect.top, oBMPCropRect.right, oBMPCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "GetBMP", 'errorCode': res});
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                    return;
+                }
+
+                // 获取BMP图片大小
+                var nBmpDataSize = Module.getValue(pBmpSize, "i32");
+
+                // 获取BMP图片数据
+                var aBmpData = new Uint8Array(nBmpDataSize);
+                aBmpData.set(Module.HEAPU8.subarray(pBmpData, pBmpData + nBmpDataSize));
+
+                postMessage({'function': "GetBMP", 'data': aBmpData, 'errorCode': res}, [aBmpData.buffer]);
+                aBmpData=null;
+                if (pDataYUV != null) {
+                    Module._free(pDataYUV);
+                    pDataYUV = null;
+                }
+                if (pBmpData != null) {
+                    Module._free(pBmpData);
+                    pBmpData = null;
+                }
+                if (pBmpSize != null) {
+                    Module._free(pBmpSize);
+                    pBmpSize = null;
+                }
+                break;
+
+            case "GetJPEG":
+                var nJpegWidth = eventData.width;
+                var nJpegHeight = eventData.height;
+                var pYUVData1 = eventData.data;
+                var nYUVSize1 = nJpegWidth * nJpegHeight * 3 / 2;
+                var oJpegCropRect = eventData.rect;
+
+                var pDataYUV1 = Module._malloc(nYUVSize1);
+                if (pDataYUV1 === null) {
+                    return;
+                }
+
+                Module.writeArrayToMemory(new Uint8Array(pYUVData1, 0, nYUVSize1), pDataYUV1);
+
+                // 分配JPEG空间
+                var pJpegData = Module._malloc(nYUVSize1);
+                var pJpegSize = Module._malloc(4);
+                if (pJpegData === null || pJpegSize === null) {
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                Module.setValue(pJpegSize, nJpegWidth * nJpegHeight * 2, "i32");    // JPEG抓图，输入缓冲长度不小于当前帧YUV大小
+
+                res = Module._GetJPEG(pDataYUV1, nYUVSize1, pJpegData, pJpegSize,
+                    oJpegCropRect.left, oJpegCropRect.top, oJpegCropRect.right, oJpegCropRect.bottom);
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "GetJPEG", 'errorCode': res});
+                    if (pJpegData != null) {
+                        Module._free(pJpegData);
+                        pJpegData = null;
+                    }
+
+                    if (pJpegSize != null) {
+                        Module._free(pJpegSize);
+                        pJpegSize = null;
+                    }
+
+                    if (pDataYUV1 != null) {
+                        Module._free(pDataYUV1);
+                        pDataYUV1 = null;
+                    }
+                    return;
+                }
+
+                // 获取JPEG图片大小
+                var nJpegSize = Module.getValue(pJpegSize, "i32");
+
+                // 获取JPEG图片数据
+                var aJpegData = new Uint8Array(nJpegSize);
+                aJpegData.set(Module.HEAPU8.subarray(pJpegData, pJpegData + nJpegSize));
+
+                postMessage({'function': "GetJPEG", 'data': aJpegData, 'errorCode': res}, [aJpegData.buffer]);
+
+                nJpegSize = null;
+                aJpegData = null;
+
+                if (pDataYUV1 != null) {
+                    Module._free(pDataYUV1);
+                    pDataYUV1 = null;
+                }
+                if (pJpegData != null) {
+                    Module._free(pJpegData);
+                    pJpegData = null;
+                }
+                if (pJpegSize != null) {
+                    Module._free(pJpegSize);
+                    pJpegSize = null;
+                }
+                break;
+
+            case "SetDecodeFrameType":
+                var nFrameType = eventData.data;
+                res = Module._SetDecodeFrameType(nFrameType);
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "SetDecodeFrameType", 'errorCode': res});
+                    return;
+                }
+                break;
+
+            case "DisplayRegion":
+                var nRegionNum = eventData.nRegionNum;
+                var srcRect = eventData.srcRect;
+                var hDestWnd = eventData.hDestWnd;
+                var bEnable = eventData.bEnable;
+
+                res = Module._SetDisplayRegion(nRegionNum, srcRect, hDestWnd, bEnable);
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "DisplayRegion", 'errorCode': res});
+                    return;
+                }
+                break;
+
+            case "CloseStream":
+                res = Module._CloseStream();
+                if (res !== PLAYM4_OK) {
+                    postMessage({'function': "CloseStream", 'errorCode': res});
+                    return;
+                }
+                break;
+
+            case "SetIFrameDecInterval":
+                Module._SetIFrameDecInterval(eventData.data);
+                break;
+			case "SetLostFrameMode":
+			    Module._SetLostFrameMode(eventData.data);
+				break;
+			
+                /*******************************************worker音频编码相关接口实现**********************************************************/
+            case "CreateAudEncode":
+			
+                res = Module._CreateAudEncode(eventData.encodertype);
+                
+                postMessage({'function':"CreateAudEncode",'errorCode':res});
+                break;
+            case "SetAudEncodeParam":
+                
+                res = Module._SetAudEncodeParam(eventData.samplerate, eventData.channel, eventData.bitrate, eventData.bitwidth);
+			
+                postMessage({'function':"SetAudEncodeParam",'errorCode':res});
+                break;
+            case "DestroyAudEncode":
+               
+                res = Module._DestroyAudEncode();
+                
+                postMessage({'function':"DestroyAudEncode",'errorCode':res});
+                break;
+            case "InputAudEncodeData":
+			    if(bWorkerPrintLog)
+				{
+					console.log("<<<Worker: 20200113 DecodeWorker-InputAudEncodeData 1");
+				}
+                
+                var iLen = eventData.dataSize;
+                if(iLen > 0)
+                {
+                    
+                    var pAudInputData = Module._malloc(iLen);
+                    if (pAudInputData === null)
+                    {
+                        return;
+                    }
+                    var audinputData = new Uint8Array(eventData.data);
+                    Module.writeArrayToMemory(audinputData, pAudInputData);
+                    audinputData = null;
+                    res = Module._InputAudEncodeData(pAudInputData, iLen);
+					if(bWorkerPrintLog)
+					{
+						console.log("<<<Worker: 20200113 DecodeWorker-InputAudEncodeData 2 res:"+res);
+					}
+                    
+                    if(res == PLAYM4_OK)  //接口返回成功，表明已编码好一帧音频数据
+                    {
+                        
+                        if (funGetAudFrameData === null)
+                        {
+                            funGetAudFrameData = Module.cwrap('GetAudFrameData', 'number');
+                        }
+                        if(bWorkerPrintLog)
+						{
+							console.log("<<<Worker: 20200113 DecodeWorker-InputAudEncodeData 2-1 succ");
+						}
+                        //调用C++ GetAudFrameData
+                        var ret = getAudFrameData(funGetAudFrameData);
+                    }
+                    Module._free(pAudInputData);
+                    pAudInputData = null;
+                }
+                break;
+            default:
+                break;
+        }
+    };
+
+    function getOSDTime(oFrameInfo) {
+        var iYear = oFrameInfo.year;
+        var iMonth = oFrameInfo.month;
+        var iDay = oFrameInfo.day;
+        var iHour = oFrameInfo.hour;
+        var iMinute = oFrameInfo.minute;
+        var iSecond = oFrameInfo.second;
+
+        if (iMonth < 10) {
+            iMonth = "0" + iMonth;
+        }
+        if (iDay < 10) {
+            iDay = "0" + iDay;
+        }
+        if (iHour < 10) {
+            iHour = "0" + iHour;
+        }
+        if (iMinute < 10) {
+            iMinute = "0" + iMinute;
+        }
+        if (iSecond < 10) {
+            iSecond = "0" + iSecond;
+        }
+
+        return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
+    }
+
+    function getAudFrameData(fun)
+    {
+		if(bWorkerPrintLog)
+		{
+			console.log("<<<Worker: DecodeWorker-getAudFrameData 1");
+		}
+    
+        var res = fun(); // 调用C++GetAudFrameData函数
+        if(res === PLAYM4_OK)
+        {
+            var oFrameInfo = Module._GetAudFrameInfo();
+            var iSize = oFrameInfo.frameSize;
+            if (0 === iSize)
+            {
+                return null;
+            }
+
+            var pEncodeAud = Module._GetAudFrameBuffer();
+            if(pEncodeAud == null)
+            {
+                return null;
+            }
+            var aEncodeAudData = new Uint8Array(iSize);
+            aEncodeAudData.set(Module.HEAPU8.subarray(pEncodeAud, pEncodeAud + iSize));
+			if(bWorkerPrintLog)
+			{
+				console.log("<<<Worker: DecodeWorker-getAudFrameData 2");
+			}
+            
+            //获取到音频编码帧数据通过worker返回
+            postMessage({'function':"GetAudEncodeData",'data':aEncodeAudData.buffer,'dataSize':iSize, 'errorCode': res});
+        }
+        else
+        {
+            postMessage({'function':"GetAudEncodeData",'data':null,'dataSize':-1, 'errorCode': res});
+        }
+        oFrameInfo=null;
+        pEncodeAud=null;
+        aEncodeAudData=null;
+        return res;
+    }
+
+    // 获取帧数据
+    function getFrameData(fun)
+    {
+    // function getFrameData() {
+        // 获取帧数据
+        // var res = Module._GetFrameData();
+        var res = fun();
+        if(bWorkerPrintLog)
+        {
+            console.log("<<<Worker: getFrameData Result:"+res);
+        }
+
+        if (res === PLAYM4_OK)
+        {
+            var oFrameInfo = Module._GetFrameInfo();
+            switch (oFrameInfo.frameType)
+            {
+                case AUDIO_TYPE:
+                    var iSize = oFrameInfo.frameSize;
+                    if (0 === iSize)
+                    {
+                        return -1;
+                    }
+                    var pPCM = Module._GetFrameBuffer();
+                    // var audioBuf = new ArrayBuffer(iSize);
+                    var aPCMData = new Uint8Array(iSize);
+                    aPCMData.set(Module.HEAPU8.subarray(pPCM, pPCM + iSize));
+                    if(bWorkerPrintLog)
+                    {
+                        console.log("<<<Worker: audio media Info: nSise:"+ oFrameInfo.frameSize+",nSampleRate:"+oFrameInfo.samplesPerSec+',channel:'+oFrameInfo.channels+',bitsPerSample:'+oFrameInfo.bitsPerSample);
+                    }
+                    postMessage({
+                        'function': "GetFrameData", 'type': "audioType", 'data': aPCMData.buffer,
+                        'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aPCMData.buffer]);
+
+                    oFrameInfo = null;
+                    pPCM = null;
+                    aPCMData = null;
+                    return PLAYM4_AUDIO_FRAME;
+
+                case VIDEO_TYPE:
+                    var szOSDTime = getOSDTime(oFrameInfo);
+
+                    var iWidth = oFrameInfo.width;
+                    var iHeight = oFrameInfo.height;
+
+                    var iYUVSize = iWidth * iHeight * 3 / 2;
+                    if (0 === iYUVSize)
+                    {
+                        return -1;
+                    }
+
+                    var pYUV = Module._GetFrameBuffer();
+
+                    // 图像数据渲染后压回，若从主码流切到子码流，存在数组大小与图像大小不匹配现象
+                    var aYUVData = new Uint8Array(iYUVSize);
+                    aYUVData.set(Module.HEAPU8.subarray(pYUV, pYUV + iYUVSize));
+                    if(bWorkerPrintLog)
+                    {
+                        console.log("<<<Worker: InputData-getFrameData Video: Width:"+ oFrameInfo.width+",Height:"+oFrameInfo.height+",timeStamp:"+oFrameInfo.timeStamp);
+                    }
+
+                    postMessage({
+                      'function': "GetFrameData", 'type': "videoType", 'data': aYUVData.buffer,
+                   'dataLen': aYUVData.length,'osd': szOSDTime, 'frameInfo': oFrameInfo, 'errorCode': res
+                    }, [aYUVData.buffer]);
+
+                    oFrameInfo = null;
+                    pYUV = null;
+                    aYUVData = null;
+                    return PLAYM4_VIDEO_FRAME;
+
+                case PRIVT_TYPE:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+
+                default:
+                    postMessage({
+                        'function': "GetFrameData", 'type': "", 'data': null,
+                        'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': PLAYM4_SYS_NOT_SUPPORT
+                    });
+                    return PLAYM4_SYS_NOT_SUPPORT;
+            }
+        }
+        else {
+            //解码失败返回裸数据
+            if(PLAYM4_DECODE_ERROR===res)
+            {
+                var rawInfo=Module._GetRawDataInfo();
+                var pRawData = Module._GetRawDataBuffer();
+                var aRawData = new Uint8Array(rawInfo.isize);
+                aRawData.set(Module.HEAPU8.subarray(pRawData, pRawData + rawInfo.isize));
+                postMessage({
+                    'function': "GetRawData", 'type': "", 'data':aRawData.buffer,
+                    'rawDataLen': rawInfo.isize, 'osd': 0, 'frameInfo': null, 'errorCode': res
+                });
+                rawInfo=null;
+                pRawData=null;
+                aRawData=null;
+            }
+            //定位返回的错误
+            if(PLAYM4_FIRST_FRAME_NOT_ICURRENT===res|| PLAYM4_ITYPE_DECODE_ERROR===res)
+            {
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': res
+                });
+            }
+            //需要更多数据
+            if (PLAYM4_NEED_MORE_DATA === res || PLAYM4_SYS_NOT_SUPPORT === res || PLAYM4_NOT_KEYFRAME === res){
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': res
+                });
+            }
+            return res;
+        }
+    }
+
+    // 开始计算时间
+    function startTime() {
+        return new Date().getTime();
+    }
+
+    // 结束计算时间
+    function endTime() {
+        return new Date().getTime();
+    }
+
+    // 字母字符串转byte数组
+    function stringToBytes ( str ) {
+        var ch, st, re = [];
+        for (var i = 0; i < str.length; i++ ) {
+            ch = str.charCodeAt(i);  // get char
+            st = [];                 // set up "stack"
+            do {
+                st.push( ch & 0xFF );  // push byte to stack
+                ch = ch >> 8;          // shift value down by 1 byte
+            }
+            while ( ch );
+            // add stack contents to result
+            // done because chars have "wrong" endianness
+            re = re.concat( st.reverse() );
+        }
+        // return an array of bytes
+        return re;
+    }
+})();

front/public/util/playctrl1/SuperRender_10.js

@@ -0,0 +1,396 @@
+"use strict";
+ //顶点着色器
+//attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
+// vertexPos即我们定义的顶点坐标；
+// gl_Position是一个内建的传出变量。
+var vertexYUVShader = [
+    'attribute vec4 vertexPos;',
+    'attribute vec2 texturePos;',
+    'varying vec2 textureCoord;',
+
+    'void main()',
+    '{',
+        'gl_Position = vertexPos;',
+        'textureCoord = texturePos;',
+    '}'
+    ].join('\n');
+    //像素着色器(yuv->rgb)
+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;
+    };
+
+    /**
+     * 创建纹理
+     */
+    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;
+    };
+
+    /**
+     * 初始化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);
+    };
+
+    /**
+     * 显示帧数据
+     * @param nWidth    宽度
+     * @param nHeight   高度
+     * @param nHeight   帧数据
+     */
+    RenderManager.prototype.SR_DisplayFrameData = function(nWidth, nHeight, pData,dWidth,dHeight) {
+
+        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,dWidth,dHeight);
+
+        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,dWidth,dHeight) {
+
+        var gl = this.contextGL;
+
+        var yTextureRef = this.yTextureRef;
+        var uTextureRef = this.uTextureRef;
+        var vTextureRef = this.vTextureRef;
+
+        var i420Data = data;
+        // debugger;
+		if(width == dWidth && height == dHeight)
+		{
+			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(width*height, width*height + 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(width*height + width*height/4, width*height + width*height/4 + 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);
+			
+		}
+        else
+		{
+			 // //裁剪宽
+			var yDataLength = dWidth * dHeight;
+			var yData=new Uint8Array(yDataLength) ;
+			for(var i=0;i<dHeight;i++)
+			{
+				//var ySonData=new Uint8Array(dWidth) ;
+				var ySonData = i420Data.subarray(i*width, i*width+dWidth);
+				for (var j = 0; j < dWidth; j++) {
+					yData[i*dWidth + j] = ySonData[j];
+				}
+			}
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth, dHeight, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
+			yData=null;
+			ySonData=null;
+
+			var cbDataLength = dWidth/2 * dHeight/2;
+			var cbData =new Uint8Array(cbDataLength);
+			//var cbSonData=new Uint8Array(dWidth/2) ;
+			for(var i=0;i<dHeight/2;i++)
+			{
+				 var cbSonData = i420Data.subarray(width*height+i*width/2, width*height+i*width/2+dWidth/2);
+				for (var j = 0; j < dWidth/2; j++) {
+					cbData[i*dWidth/2 + j] = cbSonData[j];
+				}
+			}
+			gl.activeTexture(gl.TEXTURE1);
+			gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
+			cbData=null;
+			cbSonData=null;
+
+			var crDataLength = cbDataLength;
+			var crData = new Uint8Array(crDataLength);
+			for(var i=0;i<dHeight/2;i++)
+			{
+				var crSonData = i420Data.subarray(width*height*5/4+i*width/2, width*height*5/4+i*width/2+dWidth/2);
+				for (var j = 0; j < dWidth/2; j++) {
+					crData[i*dWidth/2 + j] = crSonData[j];
+				}
+			}
+			gl.activeTexture(gl.TEXTURE2);
+			gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
+			crData=null;
+			crSonData=null;
+		}
+       
+    };
+
+    /**
+     * 设置显示区域
+     * @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);
+		//gl.getExtension('WEBGL_lose_context').loseContext();
+    };
+
+    return RenderManager;
+
+}));

front/public/util/playctrl2/Decoder.worker.js

@@ -0,0 +1 @@
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

front/public/util/playctrl3/Decoder.worker.js

@@ -0,0 +1 @@
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

front/public/util/talkW/AudioInterCom.worker.js

@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Copyright 2015 The Emscripten Authors
+ * SPDX-License-Identifier: MIT
+ */
+
+// Pthread Web Worker startup routine:
+// This is the entry point file that is loaded first by each Web Worker
+// that executes pthreads on the Emscripten application.
+
+// Thread-local:
+var initializedJS = false; // Guard variable for one-time init of the JS state (currently only embind types registration)
+
+var Module = {};
+
+function assert(condition, text) {
+  if (!condition) abort('Assertion failed: ' + text);
+}
+
+function threadPrintErr() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  console.error(text);
+}
+function threadAlert() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  postMessage({cmd: 'alert', text: text, threadId: Module['_pthread_self']()});
+}
+// We don't need out() for now, but may need to add it if we want to use it
+// here. Or, if this code all moves into the main JS, that problem will go
+// away. (For now, adding it here increases code size for no benefit.)
+var out = function() {
+  throw 'out() is not defined in worker.js.';
+}
+var err = threadPrintErr;
+this.alert = threadAlert;
+
+Module['instantiateWasm'] = function(info, receiveInstance) {
+  // Instantiate from the module posted from the main thread.
+  // We can just use sync instantiation in the worker.
+  var instance = new WebAssembly.Instance(Module['wasmModule'], info);
+  // TODO: Due to Closure regression https://github.com/google/closure-compiler/issues/3193,
+  // the above line no longer optimizes out down to the following line.
+  // When the regression is fixed, we can remove this if/else.
+  receiveInstance(instance);
+  // We don't need the module anymore; new threads will be spawned from the main thread.
+  Module['wasmModule'] = null;
+  return instance.exports;
+};
+
+function moduleLoaded() {
+}
+
+this.onmessage = function(e) {
+  try {
+    if (e.data.cmd === 'load') { // Preload command that is called once per worker to parse and load the Emscripten code.
+
+      // Module and memory were sent from main thread
+      Module['wasmModule'] = e.data.wasmModule;
+
+      Module['wasmMemory'] = e.data.wasmMemory;
+
+      Module['buffer'] = Module['wasmMemory'].buffer;
+
+      Module['ENVIRONMENT_IS_PTHREAD'] = true;
+
+      if (typeof e.data.urlOrBlob === 'string') {
+        importScripts(e.data.urlOrBlob);
+      } else {
+        var objectUrl = URL.createObjectURL(e.data.urlOrBlob);
+        importScripts(objectUrl);
+        URL.revokeObjectURL(objectUrl);
+      }
+      JSAudioInterComModule(Module).then(function (instance) {
+        Module = instance;
+        moduleLoaded();
+      });
+
+    } else if (e.data.cmd === 'objectTransfer') {
+      Module['PThread'].receiveObjectTransfer(e.data);
+    } else if (e.data.cmd === 'run') {
+      // This worker was idle, and now should start executing its pthread entry
+      // point.
+      // performance.now() is specced to return a wallclock time in msecs since
+      // that Web Worker/main thread launched. However for pthreads this can
+      // cause subtle problems in emscripten_get_now() as this essentially
+      // would measure time from pthread_create(), meaning that the clocks
+      // between each threads would be wildly out of sync. Therefore sync all
+      // pthreads to the clock on the main browser thread, so that different
+      // threads see a somewhat coherent clock across each of them
+      // (+/- 0.1msecs in testing).
+      Module['__performance_now_clock_drift'] = performance.now() - e.data.time;
+
+      // Pass the thread address inside the asm.js scope to store it for fast access that avoids the need for a FFI out.
+      Module['__emscripten_thread_init'](e.data.threadInfoStruct, /*isMainBrowserThread=*/0, /*isMainRuntimeThread=*/0);
+
+      // Establish the stack frame for this thread in global scope
+      // The stack grows downwards
+      var max = e.data.stackBase;
+      var top = e.data.stackBase + e.data.stackSize;
+      assert(e.data.threadInfoStruct);
+      assert(top != 0);
+      assert(max != 0);
+      assert(top > max);
+      // Also call inside JS module to set up the stack frame for this pthread in JS module scope
+      Module['establishStackSpace'](top, max);
+      Module['PThread'].receiveObjectTransfer(e.data);
+      Module['PThread'].threadInit();
+
+      // Embind must initialize itself on all threads, as it generates support JS.
+      // We only do this once per worker since they get reused
+      if (!initializedJS) {
+        Module['___embind_register_native_and_builtin_types']();
+        initializedJS = true;
+      }
+
+      try {
+        // pthread entry points are always of signature 'void *ThreadMain(void *arg)'
+        // Native codebases sometimes spawn threads with other thread entry point signatures,
+        // such as void ThreadMain(void *arg), void *ThreadMain(), or void ThreadMain().
+        // That is not acceptable per C/C++ specification, but x86 compiler ABI extensions
+        // enable that to work. If you find the following line to crash, either change the signature
+        // to "proper" void *ThreadMain(void *arg) form, or try linking with the Emscripten linker
+        // flag -s EMULATE_FUNCTION_POINTER_CASTS=1 to add in emulation for this x86 ABI extension.
+        var result = Module['invokeEntryPoint'](e.data.start_routine, e.data.arg);
+
+        Module['checkStackCookie']();
+        if (Module['keepRuntimeAlive']()) {
+          Module['PThread'].setExitStatus(result);
+        } else {
+          Module['PThread'].threadExit(result);
+        }
+      } catch(ex) {
+        if (ex === 'Canceled!') {
+          Module['PThread'].threadCancel();
+        } else if (ex != 'unwind') {
+          // FIXME(sbc): Figure out if this is still needed or useful.  Its not
+          // clear to me how this check could ever fail.  In order to get into
+          // this try/catch block at all we have already called bunch of
+          // functions on `Module`.. why is this one special?
+          if (typeof(Module['_emscripten_futex_wake']) !== "function") {
+            err("Thread Initialisation failed.");
+            throw ex;
+          }
+          // ExitStatus not present in MINIMAL_RUNTIME
+          if (ex instanceof Module['ExitStatus']) {
+            if (Module['keepRuntimeAlive']()) {
+              err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' called exit(), staying alive due to noExitRuntime.');
+            } else {
+              err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' called exit(), calling threadExit.');
+              Module['PThread'].threadExit(ex.status);
+            }
+          }
+          else
+          {
+            Module['PThread'].threadExit(-2);
+            throw ex;
+          }
+        } else {
+          // else e == 'unwind', and we should fall through here and keep the pthread alive for asynchronous events.
+          err('Pthread 0x' + Module['_pthread_self']().toString(16) + ' completed its pthread main entry point with an unwind, keeping the pthread worker alive for asynchronous operation.');
+        }
+      }
+    } else if (e.data.cmd === 'cancel') { // Main thread is asking for a pthread_cancel() on this thread.
+      if (Module['_pthread_self']()) {
+        Module['PThread'].threadCancel();
+      }
+    } else if (e.data.target === 'setimmediate') {
+      // no-op
+    } else if (e.data.cmd === 'processThreadQueue') {
+      if (Module['_pthread_self']()) { // If this thread is actually running?
+        Module['_emscripten_current_thread_process_queued_calls']();
+      }
+    } else {
+      err('worker.js received unknown command ' + e.data.cmd);
+      err(e.data);
+    }
+  } catch(ex) {
+    err('worker.js onmessage() captured an uncaught exception: ' + ex);
+    if (ex && ex.stack) err(ex.stack);
+    throw ex;
+  }
+};
+
+// Node.js support
+if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
+  // Create as web-worker-like an environment as we can.
+  self = {
+    location: {
+      href: __filename
+    }
+  };
+
+  var onmessage = this.onmessage;
+
+  var nodeWorkerThreads = require('worker_threads');
+
+  global.Worker = nodeWorkerThreads.Worker;
+
+  var parentPort = nodeWorkerThreads.parentPort;
+
+  parentPort.on('message', function(data) {
+    onmessage({ data: data });
+  });
+
+  var nodeFS = require('fs');
+
+  var nodeRead = function(filename) {
+    return nodeFS.readFileSync(filename, 'utf8');
+  };
+
+  function globalEval(x) {
+    global.require = require;
+    global.Module = Module;
+    eval.call(null, x);
+  }
+
+  importScripts = function(f) {
+    globalEval(nodeRead(f));
+  };
+
+  postMessage = function(msg) {
+    parentPort.postMessage(msg);
+  };
+
+  if (typeof performance === 'undefined') {
+    performance = {
+      now: function() {
+        return Date.now();
+      }
+    };
+  }
+}
+
+

front/public/util/transform/systemTransform-worker.js

@@ -0,0 +1,120 @@
+importScripts('libSystemTransform.js');
+    const RECORDRTP = 0;  //录制一份未经过转封装的码流原始数据，用于定位问题
+    let dataType = 1;
+    
+    // 转封装库回调函数
+    self.STCallBack = function (fileIndex,indexLen, data, dataLen)
+    {
+        //stFrameInfo的类型见DETAIL_FRAME_INFO
+		let stFrameInfo = Module._GetDetialFrameInfo();
+        let nIsMp4Index = stFrameInfo.nIsMp4Index;
+		//console.log("FrameType is " , stFrameInfo);	
+		//console.log("nIsMp4Index is " + nIsMp4Index);
+        //debugger
+        var pData = null;
+        pData = new Uint8Array(dataLen);
+        pData.set(Module.HEAPU8.subarray(data, data + dataLen));
+        if (dataType === 1) {
+            if (pData[0] == 0x49 && pData[1] == 0x4d && pData[2] == 0x4b && pData[3] == 0x48) {//码流头丢掉
+                return;
+            }
+            postMessage({type: "outputData", buf: pData, dType: 1});
+            dataType = 2;
+        } else {
+            if (nIsMp4Index) {
+                postMessage({type: "outputData", buf: pData, dType: 6}); //6：索引类型
+            } else {
+                postMessage({type: "outputData", buf: pData, dType: 2}); //2:码流
+            }
+        }
+
+        //stFrameInfo的类型见DETAIL_FRAME_INFO
+		//let stFrameInfo = Module._GetDetialFrameInfo();
+		//let stFrameType = stFrameInfo.nFrameType;
+		//let nFrameNum = stFrameInfo.nFrameNum;
+		//let nTimeStamp = stFrameInfo.nTimeStamp;
+        //let nIsMp4Index = stFrameInfo.nIsMp4Index;
+		
+		//console.log("FrameType is " + stFrameType);	
+		//console.log("nIsMp4Index is " + nIsMp4Index);	
+        
+    }
+
+    // self.Module = { memoryInitializerRequest: loadMemInitFile(), TOTAL_MEMORY: 128*1024*1024 };
+    // importScripts('SystemTransform.js');
+
+    self.Module['onRuntimeInitialized'] = function (){
+        postMessage({type: "loaded"});
+    }
+    onmessage = function (e) {
+        var data = e.data;
+        if ("create" === data.type) {
+            if (RECORDRTP) {
+                postMessage({type: "created"});
+                postMessage({type: "outputData", buf: data.buf, dType: 1});
+            } else {
+                var iHeadLen = data.len;
+                var pHead = Module._malloc(iHeadLen);
+    
+                self.writeArrayToMemory(new Uint8Array(data.buf), pHead);
+                var iTransType = data.packType;//目标格式
+                var iRet = Module._CreatHandle(pHead, iTransType, 4096);
+                if (iRet != 0) {
+                    console.log("_CreatHandle failed!" + iRet);
+                } else {
+                    iRet = Module._SysTransRegisterDataCallBack();			
+                    if(iRet != 0)
+                    {
+                        console.log("_SysTransRegisterDataCallBack Failed:" + iRet);
+                    }
+
+                    iRet = Module._SysTransStart(null, null);
+                    if(iRet != 0)
+                    {
+                        console.log("_SysTransStart Failed:" + iRet);
+                    }
+                    postMessage({type: "created"});
+                }
+            }
+
+        } else if ("inputData" === data.type) {
+            if (RECORDRTP) {
+                var aFileData = new Uint8Array(data.buf);  // 拷贝一份
+                var iBufferLen = aFileData.length;
+                var szBufferLen = iBufferLen.toString(16);
+                if (szBufferLen.length === 1) {
+                    szBufferLen = "000" + szBufferLen;
+                } else if (szBufferLen.length === 2) {
+                    szBufferLen = "00" + szBufferLen;
+                } else if (szBufferLen.length === 3) {
+                    szBufferLen = "0" + szBufferLen;
+                }
+                var aData = [0, 0, parseInt(szBufferLen.substring(0, 2), 16), parseInt(szBufferLen.substring(2, 4), 16)];
+                for(var iIndex = 0, iDataLength = aFileData.length; iIndex < iDataLength; iIndex++) {
+                    aData[iIndex + 4] = aFileData[iIndex]
+                }
+                var dataUint8 = new Uint8Array(aData);
+                postMessage({type: "outputData", buf: dataUint8.buffer, dType: 2});
+            } else {
+                let pInputDataBuf = Module._malloc(data.len);
+                var idataLen = data.len;
+                self.writeArrayToMemory(new Uint8Array(data.buf), pInputDataBuf);
+                    // 输入数据，每次最多2m
+                let pp = Module._SysTransInputData(0, pInputDataBuf, idataLen);
+                if(pp != 0) {
+                    //console.log("InputData Failed:" + pp);
+                }
+                Module._free(pInputDataBuf);
+            }
+        } else if ("release" === data.type) {
+            var iRet = Module._SysTransStop();
+            if (iRet != 0) {
+                console.log("_SysTransStop Failed:", iRet);
+            }
+            Module._SysTransRelease();
+            if (iRet != 0) {
+                console.log("_SysTransRelease Failed:", iRet);
+            }
+            close();
+        }
+    };

front/src/api/home.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 19:19:40
  * @LastEditors: Light
- * @LastEditTime: 2022-11-18 09:16:13
+ * @LastEditTime: 2022-11-19 14:53:29
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -526,10 +526,33 @@ export function getGisByArea(data) {
     data,
   })
 }
-export function getPolicyCloudService(params) {
+export function getPolicyCloudService(data) {
   return request({
     url: '/resource/getPolicyCloudService',
-    method: 'get',
+    method: 'post',
-    params,
+    data,
+  })
+}
+// 西海岸基础设施待申请列表
+export function willApplyCameraSelect() {
+  return request({
+    url: '/willApplyCamera/select',
+    method: 'get',
+  })
+}
+// 西海岸基础设施待申请列表新增
+export function willApplyCameraBatchInsert(data) {
+  return request({
+    url: '/willApplyCamera/batchInsert',
+    method: 'post',
+    data,
+  })
+}
+// 西海岸基础设施待申请列表删除
+export function willApplyCameraBatchDelete(data) {
+  return request({
+    url: '/willApplyCamera/batchDelete',
+    method: 'post',
+    data,
   })
 }

front/src/supermap/advance-init.js

@@ -1678,6 +1678,7 @@ export function MapFun(mapObj) {
             //_removeLayerByLayerName(layerName)
             let selectedLayerList = [];
             let layers = null;
+            let clickDataList = [];
             // 判断是否是聚合图层
             layers = createMarkerClusterLayer()
             const icon1 = createDefaultFeatureStyle({
@@ -1696,65 +1697,71 @@ export function MapFun(mapObj) {
                     let icon = icon1;
                     restoreIconObj.restoreIcon = icon;
                     const marker = L.marker(feature.latLng, { icon })
-                    if (createPopupFun !== null) {
                     marker.uuid = feature.uuid || ''
                     marker.resId = feature.resId || ''
-                        marker.on('click', async(e) => {
+                    marker.resourceData = feature.data || {}
-                            if (feature.resourceName === 'video') {
+                        // if (createPopupFun !== null) {
-                                const params = [feature.indexCode]
+                        //     marker.uuid = feature.uuid || ''
-                                DS.openVideo(params)
+                        //     marker.resId = feature.resId || ''
-                            } else {
+                        //     marker.resourceData = feature.data || {}
-                                const elementHtml = createPopupFun(feature)
+                        //     marker.on('click', async(e) => {
-                                if (elementHtml) {
+                        //         if (feature.resourceName === 'video') {
-                                    console.log(
+                        //             const params = [feature.indexCode]
-                                        'L._addReMapWithter===============>',
+                        //             DS.openVideo(params)
-                                        feature.latLng,
+                        //         } else {
-                                        elementHtml,
+                        //             const elementHtml = createPopupFun(feature)
-                                        map
+                        //             if (elementHtml) {
-                                    )
+                        //                 console.log(
-                                    if (feature.type == 'videoSurveillance') {
+                        //                     'L._addReMapWithter===============>',
-                                        L.popup({ className: 'detail-dialog', offset: [168, 240] })
+                        //                     feature.latLng,
-                                            .setLatLng(feature.latLng)
+                        //                     elementHtml,
-                                            .setContent(elementHtml)
+                        //                     map
-                                            .openOn(map)
+                        //                 )
-                                        map.flyTo(feature.latLng)
+                        //                 if (feature.type == 'videoSurveillance') {
-                                    } else {
+                        //                     L.popup({ className: 'detail-dialog', offset: [168, 240] })
-                                        L.popup({ className: 'detail-dialog' })
+                        //                         .setLatLng(feature.latLng)
-                                            .setLatLng(feature.latLng)
+                        //                         .setContent(elementHtml)
-                                            .setContent(elementHtml)
+                        //                         .openOn(map)
-                                            .openOn(map)
+                        //                     map.flyTo(feature.latLng)
-                                    }
+                        //                 } else {
-                                }
+                        //                     L.popup({ className: 'detail-dialog' })
-                            }
+                        //                         .setLatLng(feature.latLng)
-                        })
+                        //                         .setContent(elementHtml)
-                    }
+                        //                         .openOn(map)
+                        //                 }
+                        //             }
+                        //         }
+                        //     })
+                        // }
                     marker.on('click', e => {
-                        console.log('点位数据', e) //需要调用视频播放的窗口吗？
+                        console.log('点位数据', e)
+                        clickDataList.push(e.resourceData);
                         // 判断是否需要选中之后更换marker的图标
                         //const layers = layerGroup.get(layerName).getLayers()
                         // layers.forEach((layer) => {
                         //     layer.setIcon(icon)
                         // })
-                        restoreIconObj.layerId = e.sourceTarget._leaflet_id
+                        // restoreIconObj.layerId = e.sourceTarget._leaflet_id
-                        const currentLayer = layerGroup
+                        // const currentLayer = layerGroup
-                            .get(layerName)
+                        //     .get(layerName)
-                            .getLayer(restoreIconObj.layerId)
+                        //     .getLayer(restoreIconObj.layerId)
-                        restoreIconObj.currentLayer = currentLayer;
+                        // restoreIconObj.currentLayer = currentLayer;
-                        if (currentLayer._icon.src != icon.options.iconUrl) {
+                        // if (currentLayer._icon.src != icon.options.iconUrl) {
-                            currentLayer.setIcon(icon);
+                        //     currentLayer.setIcon(icon);
-                        } else {
+                        // } else {
-                            selectedLayerList.push(currentLayer);
+                        //     selectedLayerList.push(currentLayer);
-                            //要去重去重,//判断是否点击第二次
+                        //     //要去重去重,//判断是否点击第二次
-                            if (selectedLayerList.length > 0) {
+                        //     if (selectedLayerList.length > 0) {
-                                selectedLayerList.forEach((item) => {
+                        //         selectedLayerList.forEach((item) => {
-                                    item.setIcon(
+                        //             item.setIcon(
-                                        L.icon({ iconUrl: require('./image/' + url2), iconSize: [33, 33] })
+                        //                 L.icon({ iconUrl: require('./image/' + url2), iconSize: [33, 33] })
-                                    )
+                        //             )
-                                });
+                        //         });
-                            }
+                        //     }
-                        }
+                        // }
-                        mybus.emit('pointMarkerClick', feature);
+                        //mybus.emit('pointMarkerClick', feature);
-                        selectedLayerList = [];
+                        //selectedLayerList = [];
+                        mybus.emit('openOperationPopup', clickDataList);
                     })
                     layers.addLayer(marker)
                 }

front/src/supermap/map-showResource.js

@@ -40,6 +40,7 @@ function updateProgressBar(processed, total, elapsed, layersArray) {
  * @returns {*}
  */
 function createMarkerClusterLayer(layerClassName) {
+    let array = [];
     let markerClusterLayer = null
     if (layerClassName) {
         // 如果存在类名，表示需要自定义图标
@@ -74,13 +75,23 @@ function createMarkerClusterLayer(layerClassName) {
                 return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
             },
             // 是否允许指定 PolylineOptions 样式 spider
-            spiderfyOnMaxZoom: true,
+            spiderfyOnMaxZoom: false,
             // 是否显示标记的边界
             showCoverageOnHover: false,
             // 是否点击展开
-            zoomToBoundsOnClick: true,
+            zoomToBoundsOnClick: false,
             maxClusterRadius: 80,
         })
+        markerClusterLayer.on('clusterclick', function(a) {
+            //console.log('cluster ' + a.layer.getAllChildMarkers());
+            let clusterList = [];
+            for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) {
+                //console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData);
+                clusterList.push(a.layer.getAllChildMarkers()[i].resourceData);
+            }
+            //console.log('clusterList ' + a.layer.getAllChildMarkers(array, true));
+            mybus.emit('openOperationPopup', clusterList);
+        });
     }
     return markerClusterLayer
 }

front/src/views/home/components/H5Player.vue

@@ -0,0 +1,160 @@
+<!--
+海康H5Player
+-->
+<template>
+  <div id='player' style="width:950px;height:600px"></div>
+</template>
+<script>
+const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+  export default {
+    name: 'H5Player',
+    props: {
+     videoUrl:{
+        type: String,
+        default: '',
+     }
+    },
+    data() {
+      return {
+   player: null,
+   splitNum: 1,
+   mseSupport: MSE_IS_SUPPORT,
+   // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
+   tabActive: 'decoder',
+   urls: {
+    realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
+     talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
+     playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
+   },
+   playback: {
+     startTime: '2021-07-26T00:00:00',
+     endTime: '2021-07-26T23:59:59',
+     valueFormat: '',
+     seekStart: '2021-07-26T12:00:00',
+     rate: ''
+   },
+   muted: true,
+   volume: 50,
+   volumeOnSvg: {
+     template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
+   },
+   volumeOffSvg: {
+     template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
+   },
+   recordStartState: 0,
+   recordStartText: '录像'
+      }
+    },
+    created(){
+    },
+    mounted() {
+      this.init()
+      this.createPlayer()
+      this.arrangeWindow()
+      //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
+      this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
+    },
+    methods: {
+     // 海康视频初始化加载
+     init () {
+     // 设置播放容器的宽高并监听窗口大小变化
+      window.addEventListener('resize', () => {
+       this.player.JS_Resize()
+       })
+     },
+     createPlayer () {
+     this.player = new window.JSPlugin({
+       szId: 'player',
+       szBasePath: "/util/",  //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
+       iMaxSplit: 4,
+       iCurrentSplit: 4,
+       openDebug: true,
+       oStyle: {
+         borderSelect: '#FFCC00',
+       }
+     })
+     // 事件回调绑定
+     this.player.JS_SetWindowControlCallback({
+       windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+         console.log('windowSelect callback: ', iWndIndex);
+       },
+       pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+         console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+       },
+       windowEventOver: function (iWndIndex) {  //鼠标移过回调
+         //console.log(iWndIndex);
+       },
+       windowEventOut: function (iWndIndex) {  //鼠标移出回调
+         //console.log(iWndIndex);
+       },
+       windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+         //console.log(iWndIndex);
+       },
+       windowFullCcreenChange: function (bFull) {  //全屏切换回调
+         console.log('fullScreen callback: ', bFull);
+       },
+       firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+         console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
+       },
+       performanceLack: function () {  //性能不足回调
+         console.log('performanceLack callback: ');
+       }
+     });
+     },
+   arrangeWindow () {
+     const splitNum = this.splitNum
+     this.player.JS_ArrangeWindow(splitNum).then(
+       () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
+        e => { console.error(e) }
+     )
+   },
+// 初始化结束
+// 视频预览
+   realplay (playURL, index1) {
+     this.mode = 1  //解码方式：0普通模式 1高级模式
+     const { player, mode, urls } = this,
+       index = player.currentWindowIndex
+     // playURL = this.realplay
+
+     player.JS_Play(playURL, { playURL, mode }, index1).then(
+       () => {
+         console.log('realplay success')
+       },
+       e => { console.error(e) }
+     )
+   },
+   // 关闭所有视频
+   stopAllPlay () {
+     this.player.JS_StopRealPlayAll().then(
+       () => {
+         this.playback.rate = 0
+         console.log('stopAllPlay success')
+         this.closeVideoTree()
+       },
+       e => { console.error(e) }
+     )
+   },
+   // 关闭单个视频
+   stopPlay () {
+     this.player.JS_Stop().then(
+       () => {
+         this.playback.rate = 0
+         console.log('stop realplay success')
+         // this.closeVideoTree()
+         const index = this.player.currentWindowIndex
+           this.selectAisle(this.videoList[index], index)
+         },
+         e => { console.error(e) }
+       )
+      },
+    },
+  }
+</script>
+<style lang="less">
+  .tiled-map {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+</style>

front/src/views/home/infrastructurePageXha.vue

@@ -613,12 +613,24 @@
           </template>
         </div>
       </a-modal>
+  <!-- 地图上点或者聚合图层点击后出现的操作弹窗 -->
+       <a-modal
+        wrapClassName="camera-popup"
+        v-model:visible="operationPopupFlag"
+        :width="1000"
+        :title="'视频监控点选择'"
+        footer={null}
+      >
+         <!--地图上点击之后弹出的操作弹窗-->
+      <camera-popup-on-map :camera-Data-List="cameraDataList"></camera-popup-on-map>
+      </a-modal>
     </div>
   </div>
 </template>
 <script setup>
   import VideoSurveillance from '@/views/home/videoSurveillance'
   import GovernmentCloudResources from './components/GovernmentCloudResources'
+  import CameraPopupOnMap from '@/views/home/videoSurveillance/components/CameraPopupOnMap.vue'
   import { useRouter } from 'vue-router'
   import { message } from 'ant-design-vue'
   import { ref, reactive, onMounted, defineProps, defineExpose } from 'vue'
@@ -861,6 +873,9 @@
   let zwy = router.currentRoute.value.query.zwy || ''
   // 设施类型--无人机和单兵设备
   let facilitiesType = router.currentRoute.value.query.facilitiesType || ''
+
+  //地图上点击传递过来的视频监控列表数据
+  const cameraDataList = ref([])
   onMounted(() => {
     console.log('基础设施初始化')
     let roomStr = router.currentRoute.value.query.str
@@ -945,6 +960,13 @@
       let pointData = new Proxy(point.data, point)
       onSelectChange(pointData, !check, '', '', 'proxy')
     })
+        //聚合图层的弹窗openOperationPopup
+      mybus.off('openOperationPopup')
+      mybus.on('openOperationPopup', (data) => {
+          //console.log('pppppppppppppp',data);
+          cameraDataList.value = data;
+           operationPopupFlag.value = true;
+      })
   })
   const selectedList = ref([])
   const selectedRowKeys = ref([])
@@ -2219,6 +2241,9 @@
         message.warning(err)
       })
   }
+
+  //地图视频操作弹窗
+  const operationPopupFlag = ref(false)//地图操作弹窗显示标志位
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {
@@ -2574,6 +2599,16 @@
       overflow-y: auto;
     }
   }
+  .camera-popup{
+     .ant-modal-body {
+      height: 700px !important;
+      overflow-y: auto;
+      padding:14px;
+    }
+    .ant-modal-footer{
+      display: none;
+    }
+  }
 
   .modalClass {
     .ant-modal-body {

front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

@@ -0,0 +1,219 @@
+<!--点击地图上单个点或者聚合点之后出现的操作弹窗autoplay -->
+<template>
+  <div class="pop-box">
+    <div class="List-camera-pop">
+        <a-carousel arrows>
+              <template #prevArrow>
+                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+                  <left-circle-outlined />
+                </div>
+              </template>
+              <template #nextArrow>
+                <div class="custom-slick-arrow" style="right: 10px">
+                  <right-circle-outlined />
+                </div>
+              </template>
+              <div
+                v-for="url in cameraDataList"
+                :width="800"
+                :height="400"
+                :key="url"
+                :src="url"
+              >
+              <!-- <div class="video-content" style=" z-index: 1">
+              <h5-player :video-url = "videoUrl"></h5-player> 
+              </div> -->
+              <div style="color:#000000">
+               <h5-player :video-url = "videoUrl"></h5-player> 
+              </div>
+              <div> 
+                <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
+                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
+                </div>
+               <!-- <div class="footer-button">
+                <a-button type="primary">立即申请</a-button>
+                 <a-button type="primary" style="margin-left:20px">加入申购车</a-button>
+               </div> -->
+              </div>
+            </a-carousel>
+      <!-- -->
+    </div>
+  </div>
+</template>
+<script>
+  // import VideoPlay from '@/views/videoPlay/index.vue'
+  // import 'viewerjs/dist/viewer.css'
+  // import { directive as viewer } from "v-viewer"
+    import {
+    LeftCircleOutlined,
+    RightCircleOutlined,
+  } from '@ant-design/icons-vue'
+  import H5Player from '@/views/home/components/H5Player.vue'
+  import mybus from '@/myplugins/mybus'
+  import { getStreamByChannelCode } from '@/api/videoSurveillance'
+  export default {
+    name: '',
+    components: {
+      // VideoPlay,
+      H5Player,
+      LeftCircleOutlined,
+      RightCircleOutlined
+    },
+    props: {
+      cameraDataList: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    mounted() {},
+    // directives: {
+    //     viewer: viewer({
+    //         debug: true,
+    //     }),
+    // },
+    data() {
+      return {
+        openVideo: false,
+        videoStream: '',  
+         videoUrl:'' //视频预览url
+      }
+    },
+    methods: {
+      openCurrentVideo(channelCode) {
+        bus.$emit('openCurrentVideoSurveillance', channelCode)
+      },
+      show() {
+        const viewer = this.$el.querySelector('.images').$viewer
+        viewer.show()
+      },
+      //立即申请
+      applyNow(item){
+        console.log('applyNowapplyNow',item);
+         mybus.emit('selectCamera', item)
+      },
+      //加入申购车
+      addIntoCart(item){
+         console.log('addIntoCartaddIntoCart',item);
+          mybus.emit('selectCamera', item)
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .List-camera-pop {
+    // width: 640px;
+    // height: 320px;
+    //background-color: #193059;
+    font-size: 16px;
+    padding-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    .content {
+      // width: 280px;
+      min-height: 100px;
+      padding: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      .green-cicle {
+        width: 18px;
+        height: 18px;
+        background-color: rgba(0, 218, 128, 0.4);
+        border-radius: 50%;
+        position: relative;
+        div {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background-color: #00da80;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          margin-left: -5px;
+          margin-top: -5px;
+        }
+      }
+      b {
+        color: #fff;
+      }
+      p {
+        color: #1eacd6;
+      }
+    }
+    .images {
+      width: 290px;
+      height: 160px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .button {
+      width: 80px;
+      height: 28px;
+      line-height: 28px;
+      text-align: center;
+      background-color: #2fe2ed;
+      border-radius: 4px;
+      margin: 8px auto 0;
+      cursor: pointer;
+    }
+    .ant-carousel {
+    width: 960px;
+    //height: 700px;
+    margin-left: 8px;
+  }
+  .ant-carousel :deep(.slick-slide) {
+    text-align: center;
+    height: 650px;
+    line-height: 200px;
+    //background: #ccc;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+    width: 50px;
+    height: 50px;
+    font-size: 50px;
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    opacity: 0.8;
+    z-index: 1;
+  }
+  .ant-carousel :deep(.custom-slick-arrow:before) {
+    display: none;
+  }
+  .ant-carousel :deep(.custom-slick-arrow:hover) {
+    opacity: 1;
+  }
+
+  .ant-carousel :deep(.slick-slide h3) {
+    color: #fff;
+  }
+
+  .ant-carousel :deep(.slick-dots) {
+   display: none !important;
+  }
+    .video-content{
+     width: 950px;
+     height:600px; 
+     text-align: left; 
+     padding: 5px;
+    }
+    .footer-button{
+       width: 950px;
+       height:50px; 
+       text-align: center; 
+       padding-top:20px;
+    }
+  }
+  // .current-video {
+  //   width: 320px;
+  //   height: 180px;
+  // }
+</style>