监控组件，

index.html

@@ -29,4 +29,5 @@
   <!-- 3D 1v -->
 </body>
 <script type="text/javascript" src="/public/jessibuca/jessibuca.js"></script>
+<script type="text/javascript" src="/src/H5player/bin/h5player.min.js"></script>
 </html>

src/H5player/bin/1.0升级至2.0+注意事项.txt

@@ -0,0 +1 @@
+1、删除Decoder.js的外部引用，由于Decoder.js加载完全在笔记本耗时较久，很容易出现还没加载时完全出现的批量报错

src/H5player/bin/playctrl1/DecodeWorker.js

@@ -0,0 +1,642 @@
+/**
+ * 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_ORDER_ERROR = 2;
+    const PLAYM4_DECODE_ERROR = 44 	// 解码失败
+    const PLAYM4_NOT_KEYFRAME = 48; 	// 非关键帧
+    const PLAYM4_NEED_MORE_DATA = 31;   // 需要更多数据才能解析
+    const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
+    const PLAYM4_SYS_NOT_SUPPORT = 16; 	// 不支持
+
+    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开关
+
+    var g_nPort = -1;
+    var pInputData = null;
+    var inputBufferSize = 40960;
+
+    self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
+        let port = nPort;
+        let user = pUser;
+        let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
+        let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
+        let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
+        let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
+        let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
+        // console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
+        postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
+    }
+
+    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(g_nPort, downloadFlag);
+                }
+                else {
+                    bWorkerPrintLog = false;
+                    res = Module._SetPrintLogFlag(g_nPort, 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":
+                //获取端口号
+                g_nPort = Module._GetPort();
+                //设置流打开模式
+                iStreamMode = eventData.data;
+                res = Module._SetStreamOpenMode(g_nPort, 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(new Uint8Array(eventData.data));
+                res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
+                postMessage({ 'function': "OpenStream", 'errorCode': res });
+                if (res !== PLAYM4_OK) {
+                    //释放内存
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+                bOpenStream = true;
+                break;
+            case "Play":
+                let resP = Module._Play(g_nPort);
+                if (resP !== PLAYM4_OK) {
+                    return;
+                }
+                break;
+            case "InputData":
+                // 接收到的数据
+                var iLen = eventData.dataSize;
+                if (iLen > 0) {
+                    if (pInputData == null || iLen > inputBufferSize) {
+                        if (pInputData != null) {
+                            Module._free(pInputData);
+                            pInputData = null;
+                        }
+                        if (iLen > inputBufferSize) {
+                            inputBufferSize = iLen;
+                        }
+
+                        pInputData = Module._malloc(inputBufferSize);
+                        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(g_nPort, pInputData, iLen);
+                    if (res !== PLAYM4_OK) {
+                        let errorCode = Module._GetLastError(g_nPort);
+                        let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                        postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
+                    }
+                    //Module._free(pInputData);
+                    //pInputData = null;
+                } else {
+                    let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                    if (sourceRemain == 0) {
+                        postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
+                        return;
+                    }
+                }
+
+                /////////////////////
+                // if (funGetFrameData === null) {
+                //     funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                // }
+
+                while (bOpenMode && bOpenStream) {
+
+                    var ret = getFrameData();
+                    // 直到获取视频帧或数据不足为止
+                    if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret ||  || PLAYM4_NEED_NEET_LOOP === 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);
+                let u8array = new Uint8Array(keyLen);
+                aKeyData.set(u8array, 0);
+                aKeyData.set(new Uint8Array(bufData));
+                aKeyData = null;
+                u8array = null;
+
+                res = Module._SetSecretKey(g_nPort, 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 oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                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(g_nPort, 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 = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                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(g_nPort, 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(g_nPort, nFrameType);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
+                    return;
+                }
+                break;
+            case "CloseStream":
+                //stop
+                let resS = Module._Stop(g_nPort);
+                if (resS !== PLAYM4_OK) {
+                    postMessage({ 'function': "Stop", 'errorCode': res });
+                    return;
+                }
+                //closeStream
+                res = Module._CloseStream(g_nPort);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "CloseStream", 'errorCode': res });
+                    return;
+                }
+                //freePort
+                let resF = Module._FreePort(g_nPort);
+                if (resF !== PLAYM4_OK) {
+                    postMessage({ 'function': "FreePort", 'errorCode': res });
+                    return;
+                }
+                if (pInputData != null) {
+                    Module._free(pInputData);
+                    pInputData = null;
+                }
+                break;
+            case "PlaySound":
+                let resPS = Module._PlaySound(g_nPort);
+                if (resPS !== PLAYM4_OK) {
+                    console.log("PlaySound failed");
+                    return;
+                }
+                break;
+            case "StopSound":
+                let resSS = Module._StopSound();
+                if (resSS !== PLAYM4_OK) {
+                    console.log("StopSound failed");
+                    return;
+                }
+                break;
+            case "SetVolume":
+                let resSV = Module._SetVolume(g_nPort, eventData.volume);
+                if (resSV !== PLAYM4_OK) {
+                    console.log("Audio SetVolume failed");
+                    return;
+                }
+                break;
+            case "GetVolume":
+                let volume = Module._GetVolume();
+                if (volume > 0) {
+                    postMessage({ 'function': "GetVolume", 'volume': volume });
+                }
+                else {
+                    console.log("Audio GetVolume failed");
+                    return;
+                }
+                break;
+            case "OnlyPlaySound":
+                let resOPS = Module._OnlyPlaySound(g_nPort);
+                if (resOPS !== PLAYM4_OK) {
+                    console.log("OnlyPlaySound failed");
+                    return;
+                }
+                break;
+            case "Pause":
+                let resPa = Module._Pause(g_nPort, eventData.bPlay);
+                if (resPa !== PLAYM4_OK) {
+                    console.log("Pause failed");
+                    return;
+                }
+            case "PlayRate":
+                Module._SetPlayRate(g_nPort, eventData.playRate);
+                break;
+            case "SetIFrameDecInterval":
+                Module._SetIFrameDecInterval(g_nPort, eventData.data);
+                break;
+            case "SetLostFrameMode":
+                Module._SetLostFrameMode(g_nPort, eventData.data, 0);
+                break;
+            case "SetDemuxModel":
+                Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
+                break;
+            case "SkipErrorData":
+                Module._SkipErrorData(g_nPort, eventData.bSkip);
+                break;
+            case "SetDecodeERC":
+                Module._SetDecodeERC(g_nPort, eventData.nLevel);
+                break;
+            case "SetANRParam":
+                Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
+                break;
+            case "SetResampleValue":
+                Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
+                break;
+            case "GetLastError":
+                let errorCode = Module._GetLastError(g_nPort);
+                postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
+                break;
+            case "SetGlobalBaseTime":
+                Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
+                break;
+            case "SetRunTimeInfoCB":
+                Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
+                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 getFrameData() {
+        // function getFrameData() {
+        // 获取帧数据
+        var res = Module._GetFrameData();
+        //var res = fun();
+        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: video media Info: 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 {
+            let errorCode = Module._GetLastError(g_nPort);
+            //解码失败返回裸数据
+            if (PLAYM4_DECODE_ERROR === errorCode) {
+                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': errorCode
+                });
+                rawInfo = null;
+                pRawData = null;
+                aRawData = null;
+            }
+            //需要更多数据
+            if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+            }
+            return errorCode;
+        }
+    }
+
+    // 开始计算时间
+    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;
+    }
+})();

src/H5player/bin/playctrl1simd/DecodeWorker.js

@@ -0,0 +1,642 @@
+/**
+ * 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_ORDER_ERROR = 2;
+    const PLAYM4_DECODE_ERROR = 44 	// 解码失败
+    const PLAYM4_NOT_KEYFRAME = 48; 	// 非关键帧
+    const PLAYM4_NEED_MORE_DATA = 31;   // 需要更多数据才能解析
+    const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
+    const PLAYM4_SYS_NOT_SUPPORT = 16; 	// 不支持
+
+    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开关
+
+    var g_nPort = -1;
+    var pInputData = null;
+    var inputBufferSize = 40960;
+
+    self.JSPlayM4_RunTimeInfoCallBack = function (nPort, pstRunTimeInfo, pUser) {
+        let port = nPort;
+        let user = pUser;
+        let nRunTimeModule = Module.HEAP32[pstRunTimeInfo >> 2];
+        let nStrVersion = Module.HEAP32[pstRunTimeInfo + 4 >> 2];
+        let nFrameTimeStamp = Module.HEAP32[pstRunTimeInfo + 8 >> 2];
+        let nFrameNum = Module.HEAP32[pstRunTimeInfo + 12 >> 2];
+        let nErrorCode = Module.HEAP32[pstRunTimeInfo + 16 >> 2];
+        // console.log("nRunTimeModule:"+nRunTimeModule+",nFrameNum:"+nFrameNum+",nErrorCode:"+nErrorCode);
+        postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
+    }
+
+    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(g_nPort, downloadFlag);
+                }
+                else {
+                    bWorkerPrintLog = false;
+                    res = Module._SetPrintLogFlag(g_nPort, 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":
+                //获取端口号
+                g_nPort = Module._GetPort();
+                //设置流打开模式
+                iStreamMode = eventData.data;
+                res = Module._SetStreamOpenMode(g_nPort, 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(new Uint8Array(eventData.data));
+                res = Module._OpenStream(g_nPort, pHead, iHeadLen, eventData.bufPoolSize);
+                postMessage({ 'function': "OpenStream", 'errorCode': res });
+                if (res !== PLAYM4_OK) {
+                    //释放内存
+                    Module._free(pHead);
+                    pHead = null;
+                    return;
+                }
+                bOpenStream = true;
+                break;
+            case "Play":
+                let resP = Module._Play(g_nPort);
+                if (resP !== PLAYM4_OK) {
+                    return;
+                }
+                break;
+            case "InputData":
+                // 接收到的数据
+                var iLen = eventData.dataSize;
+                if (iLen > 0) {
+                    if (pInputData == null || iLen > inputBufferSize) {
+                        if (pInputData != null) {
+                            Module._free(pInputData);
+                            pInputData = null;
+                        }
+                        if (iLen > inputBufferSize) {
+                            inputBufferSize = iLen;
+                        }
+
+                        pInputData = Module._malloc(inputBufferSize);
+                        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(g_nPort, pInputData, iLen);
+                    if (res !== PLAYM4_OK) {
+                        let errorCode = Module._GetLastError(g_nPort);
+                        let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                        postMessage({ 'function': "InputData", 'errorCode': errorCode, "sourceRemain": sourceRemain });
+                    }
+                    //Module._free(pInputData);
+                    //pInputData = null;
+                } else {
+                    let sourceRemain = Module._GetSourceBufferRemain(g_nPort);
+                    if (sourceRemain == 0) {
+                        postMessage({ 'function': "InputData", 'errorCode': PLAYM4_NEED_MORE_DATA });
+                        return;
+                    }
+                }
+
+                /////////////////////
+                // if (funGetFrameData === null) {
+                //     funGetFrameData = Module.cwrap('GetFrameData', 'number');
+                // }
+
+                while (bOpenMode && bOpenStream) {
+
+                    var ret = getFrameData();
+                    // 直到获取视频帧或数据不足为止
+                    if (PLAYM4_VIDEO_FRAME === ret || PLAYM4_NEED_MORE_DATA === ret || PLAYM4_ORDER_ERROR === ret)//PLAYM4_VIDEO_FRAME === ret ||  || PLAYM4_NEED_NEET_LOOP === 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);
+                let u8array = new Uint8Array(keyLen);
+                aKeyData.set(u8array, 0);
+                aKeyData.set(new Uint8Array(bufData));
+                aKeyData = null;
+                u8array = null;
+
+                res = Module._SetSecretKey(g_nPort, 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 oJpegCropRect = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                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(g_nPort, 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 = {
+                    left: eventData.left,
+                    top: eventData.top,
+                    right: eventData.right,
+                    bottom: eventData.bottom
+                };
+
+                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(g_nPort, 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(g_nPort, nFrameType);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "SetDecodeFrameType", 'errorCode': res });
+                    return;
+                }
+                break;
+            case "CloseStream":
+                //stop
+                let resS = Module._Stop(g_nPort);
+                if (resS !== PLAYM4_OK) {
+                    postMessage({ 'function': "Stop", 'errorCode': res });
+                    return;
+                }
+                //closeStream
+                res = Module._CloseStream(g_nPort);
+                if (res !== PLAYM4_OK) {
+                    postMessage({ 'function': "CloseStream", 'errorCode': res });
+                    return;
+                }
+                //freePort
+                let resF = Module._FreePort(g_nPort);
+                if (resF !== PLAYM4_OK) {
+                    postMessage({ 'function': "FreePort", 'errorCode': res });
+                    return;
+                }
+                if (pInputData != null) {
+                    Module._free(pInputData);
+                    pInputData = null;
+                }
+                break;
+            case "PlaySound":
+                let resPS = Module._PlaySound(g_nPort);
+                if (resPS !== PLAYM4_OK) {
+                    console.log("PlaySound failed");
+                    return;
+                }
+                break;
+            case "StopSound":
+                let resSS = Module._StopSound();
+                if (resSS !== PLAYM4_OK) {
+                    console.log("StopSound failed");
+                    return;
+                }
+                break;
+            case "SetVolume":
+                let resSV = Module._SetVolume(g_nPort, eventData.volume);
+                if (resSV !== PLAYM4_OK) {
+                    console.log("Audio SetVolume failed");
+                    return;
+                }
+                break;
+            case "GetVolume":
+                let volume = Module._GetVolume();
+                if (volume > 0) {
+                    postMessage({ 'function': "GetVolume", 'volume': volume });
+                }
+                else {
+                    console.log("Audio GetVolume failed");
+                    return;
+                }
+                break;
+            case "OnlyPlaySound":
+                let resOPS = Module._OnlyPlaySound(g_nPort);
+                if (resOPS !== PLAYM4_OK) {
+                    console.log("OnlyPlaySound failed");
+                    return;
+                }
+                break;
+            case "Pause":
+                let resPa = Module._Pause(g_nPort, eventData.bPlay);
+                if (resPa !== PLAYM4_OK) {
+                    console.log("Pause failed");
+                    return;
+                }
+            case "PlayRate":
+                Module._SetPlayRate(g_nPort, eventData.playRate);
+                break;
+            case "SetIFrameDecInterval":
+                Module._SetIFrameDecInterval(g_nPort, eventData.data);
+                break;
+            case "SetLostFrameMode":
+                Module._SetLostFrameMode(g_nPort, eventData.data, 0);
+                break;
+            case "SetDemuxModel":
+                Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
+                break;
+            case "SkipErrorData":
+                Module._SkipErrorData(g_nPort, eventData.bSkip);
+                break;
+            case "SetDecodeERC":
+                Module._SetDecodeERC(g_nPort, eventData.nLevel);
+                break;
+            case "SetANRParam":
+                Module._SetANRParam(g_nPort, eventData.nEnable, eventData.nANRLevel);
+                break;
+            case "SetResampleValue":
+                Module._SetResampleValue(g_nPort, eventData.nEnable, eventData.resampleValue);
+                break;
+            case "GetLastError":
+                let errorCode = Module._GetLastError(g_nPort);
+                postMessage({ 'function': "GetLastError", 'errorCode': errorCode });
+                break;
+            case "SetGlobalBaseTime":
+                Module._SetGlobalBaseTime(g_nPort, eventData.year, eventData.month, eventData.day, eventData.hour, eventData.min, eventData.sec, eventData.ms);
+                break;
+            case "SetRunTimeInfoCB":
+                Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
+                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 getFrameData() {
+        // function getFrameData() {
+        // 获取帧数据
+        var res = Module._GetFrameData();
+        //var res = fun();
+        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: video media Info: 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 {
+            let errorCode = Module._GetLastError(g_nPort);
+            //解码失败返回裸数据
+            if (PLAYM4_DECODE_ERROR === errorCode) {
+                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': errorCode
+                });
+                rawInfo = null;
+                pRawData = null;
+                aRawData = null;
+            }
+            //需要更多数据
+            if (PLAYM4_NEED_MORE_DATA === errorCode || PLAYM4_SYS_NOT_SUPPORT === errorCode || PLAYM4_NEED_NEET_LOOP === errorCode) {
+                postMessage({
+                    'function': "GetFrameData", 'type': "", 'data': null,
+                    'dataLen': -1, 'osd': 0, 'frameInfo': null, 'errorCode': errorCode
+                });
+            }
+            return errorCode;
+        }
+    }
+
+    // 开始计算时间
+    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;
+    }
+})();

src/H5player/bin/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();
+        }
+    };

src/api/api.ts

@@ -18,10 +18,11 @@ axios.interceptors.request.use(
     }
     // 在发送请求之前做些什么 传token
     let token: any = getLocalStorage(StorageEnum.GB_TOKEN_STORE);
-    if (token) {
+    // console.log(token);
+    // if (token) {
       // @ts-ignore
-      config.headers.common[RequestEnum.GB_TOKEN_KEY] = token;
-    }
+      config.headers['Authorization'] = token;
+    // }
     // @ts-ignore
     config.headers["Content-Type"] = "application/json;charset=utf-8";
 

src/api/modules/user.ts

@@ -0,0 +1,27 @@
+import {GET,POST,FILE,FILEPOST,PUT,GETNOBASE, DELETE} from "../api";
+const userUrl=  {
+    'user':'/user',//左上
+    'userlist':'/userlist',//左中
+    'updateuser':'/user',//左中
+    'deleteuser':'/user',//左中
+}
+
+export  {userUrl}
+
+/**添加用户 */
+export const User=(param:any={})=>{
+    return POST(userUrl.user,param)
+}
+
+/**用户列表 */
+export const Userlist=(param:any={})=>{
+    return POST(userUrl.userlist,param)
+}
+/**修改用户 */
+export const UpdateUser=(param:any={})=>{
+    return PUT(userUrl.updateuser,param)
+}
+/**删除用户 */
+export const DeleteUser=(param:any={})=>{
+    return DELETE(userUrl.deleteuser,param)
+}

src/assets/css/main.scss

@@ -146,4 +146,11 @@ html .el-message {
 
 .naiveui-table-wrapper .n-table__body {
   background-color: transparent !important;
+}
+.n-data-table,
+.n-data-table__header,
+.n-data-table__body,
+.n-data-table__row,
+.n-data-table__cell {
+  background-color: transparent !important;
 }

src/config/UtilVar.ts

@@ -19,7 +19,7 @@ const runtimeType:any = {
     },
     //开发环境
     development: () => {
-        UtilVar.baseUrl= `http://116.204.6.184:8989/api`
+        UtilVar.baseUrl= `http://localhost:8080/api`
 
     },
     hash:()=>{

src/router/index.ts

@@ -40,7 +40,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: '/monitoring',
         name: 'monitoring',
-        component: () => import('@/views/index/monitoring.vue'),
+        component: () => import('@/views/index/webH5.vue'),
         meta: { requiresAuth: true },
       },
       {

src/views/header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive,ref } from "vue";
 import dayjs from 'dayjs';
 import type {DateDataType} from "./index.d"
 import {useSettingStore} from "@/stores/index"
@@ -10,6 +10,8 @@ const dateData = reactive<DateDataType>({
   dateWeek: "",
   timing:null
 });
+let titletext = ref("")
+titletext.value = "智慧档案管理一体化可视平台"
 
 const { setSettingShow} =useSettingStore()
 const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
@@ -29,12 +31,11 @@ timeFn()
     <div class="guang"></div>
     <div class="d-flex jc-center">
       <div class="title">
-        <span class="title-text">智慧档案管理一体化可视平台</span>
+        <span class="title-text">{{ titletext }}</span>
       </div>
     </div>
     <div class="timers">
       {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
-
       <div class="setting_icon"   @click="setSettingShow(true)">
           <img src="@/assets/img/headers/setting.png" alt="设置">
       </div>

src/views/index/adduser.vue

@@ -30,7 +30,7 @@ const ruleFormRef = ref<FormInstance>()
 
 const checkAge = (rule: any, value: any, callback: any) => {
     if (!value) {
-        return callback(new Error('Please input the age'))
+        return callback(new Error('请检查年龄'))
     }
     setTimeout(() => {
         if (!Number.isInteger(value)) {
@@ -47,7 +47,7 @@ const checkAge = (rule: any, value: any, callback: any) => {
 
 const validatePass = (rule: any, value: any, callback: any) => {
     if (value === '') {
-        callback(new Error('Please input the password'))
+        callback(new Error('请检查密码'))
     } else {
         if (ruleForm.checkPass !== '') {
             if (!ruleFormRef.value) return

src/views/index/edituser.vue

@@ -1,12 +1,12 @@
 <template>
     <ItemWrap class="adduser-items" title="编辑用户">
-        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon
             label-width="auto" class="demo-ruleForm">
             <el-form-item label="用户名" prop="pass">
                 <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
             </el-form-item>
             <el-form-item label="密码" prop="checkPass">
-                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+                <el-input v-model="ruleForm.checkPass" type="text" autocomplete="off" />
             </el-form-item>
             <el-form-item label="菜单权限" prop="age">
                 <el-input v-model.number="ruleForm.age" />
@@ -26,56 +26,12 @@ import { reactive, ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 
 const ruleFormRef = ref<FormInstance>()
-
-const checkAge = (rule: any, value: any, callback: any) => {
-    if (!value) {
-        return callback(new Error('Please input the age'))
-    }
-    setTimeout(() => {
-        if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'))
-        } else {
-            if (value < 18) {
-                callback(new Error('Age must be greater than 18'))
-            } else {
-                callback()
-            }
-        }
-    }, 1000)
-}
-
-const validatePass = (rule: any, value: any, callback: any) => {
-    if (value === '') {
-        callback(new Error('Please input the password'))
-    } else {
-        if (ruleForm.checkPass !== '') {
-            if (!ruleFormRef.value) return
-            ruleFormRef.value.validateField('checkPass')
-        }
-        callback()
-    }
-}
-const validatePass2 = (rule: any, value: any, callback: any) => {
-    if (value === '') {
-        callback(new Error('Please input the password again'))
-    } else if (value !== ruleForm.pass) {
-        callback(new Error("Two inputs don't match!"))
-    } else {
-        callback()
-    }
-}
-
 const ruleForm = reactive({
     pass: '',
     checkPass: '',
     age: '',
 })
 
-const rules = reactive<FormRules<typeof ruleForm>>({
-    pass: [{ validator: validatePass, trigger: 'blur' }],
-    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
-    age: [{ validator: checkAge, trigger: 'blur' }],
-})
 
 const submitForm = (formEl: FormInstance | undefined) => {
     if (!formEl) return

src/views/index/index.vue

@@ -42,7 +42,7 @@
         消息中心
       </n-button>
       <!-- <n-button strong secondary type="info" @click="$router.push('/')" class="tech-button">数据中心</n-button> -->
-      <n-button strong secondary type="info" class="tech-button">档案管理
+      <n-button strong secondary type="info" class="tech-button" tag="a" href="http://45.251.93.106:8082/index.html">档案管理 
         <template #icon>
           <n-icon size="20">
             <svg t="1721376312457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
@@ -132,7 +132,7 @@
       </n-button>
     </div>
     <div class="contetn_right">
-      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="温湿度实时曲线">
+      <ItemWrap class="contetn_left-bottom contetn_lr-item"  title="温湿度实时曲线">
         <RightTop />
       </ItemWrap>
       <ItemWrap class="contetn_left-bottom contetn_lr-item" title="实时环境" style="padding: 0 10px 16px 10px">
@@ -162,13 +162,13 @@ import Monitoring from "./monitoring.vue";
 import { onBeforeRouteLeave } from 'vue-router';
 import loading from 'naive-ui/es/_internal/loading';
 import Loading from 'vue-loading-overlay'
+import WebH5 from './webH5.vue';
 const shouldShowComponent = ref(true);
 
 
 
 onBeforeRouteLeave((to, from, next) => {
   shouldShowComponent.value = false;
-  // 执行任何必要的清理工作
   next();
 });
 
@@ -179,7 +179,6 @@ onBeforeRouteLeave((to, from, next) => {
 .index-box {
   width: 100%;
   position: relative;
-  /* 添加相对定位，作为参考容器 */
   min-height: calc(100% - 64px);
   display: flex;
   justify-content: space-between;
@@ -193,14 +192,6 @@ onBeforeRouteLeave((to, from, next) => {
   position: absolute;
   left: 0;
   width: 440px;
-  // box-sizing: border-box;
-  // flex-shrink: 0;
-  // margin: 0 -20px;
-  // z-index: 100;
-  // transform: translateX(10px);
-  /* 向左“浮动” */
-  // transition: transform 0.3s ease;
-  /* 添加过渡效果 */
 }
 
 .contetn_right {
@@ -210,14 +201,6 @@ onBeforeRouteLeave((to, from, next) => {
   position: absolute;
   right: 0;
   width: 440px;
-  // box-sizing: border-box;
-  // flex-shrink: 0;
-  // margin: 0 -20px;
-  // z-index: 100;
-  // transform: translateX(335%);
-  // /* 向右“浮动” */
-  // transition: transform 0.3s ease;
-  /* 添加过渡效果 */
 }
 
 
@@ -266,11 +249,12 @@ onBeforeRouteLeave((to, from, next) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* 根据需要设置宽度 */
   width: calc(50% - 10px);
-  /* 假设每个元素之间有20px的间距 */
   margin-left: 450px;
   margin-top: -55px;
   font-size: large;
 }
+.index-box{
+  z-index: 1000000 !important;
+}
 </style>

src/views/index/iot3d.vue

@@ -10,9 +10,9 @@ onMounted(()=>{
   iot3d.loadProject('W2N495VQH1UPGIFJKSZEMOY0C637AT8R', true, () => {
     iot3d.GetRenderer().setClearColor(0x000000, 0);
 	// var route = [
-	// 		[2, 2, 2], // 第一个视角
-	// 		[2, 2 , 2], // 正对
-	// 		[2, 2 , 2], // 聚焦
+	// 		[0,0,0], // 第一个视角
+	// 		[0,0,0], // 正对
+	// 		[0,0,0], // 聚焦
 	// 	]
 	// 	// ------------- 路径移动
 	// 	iot3d.startMove(route,2)
@@ -21,6 +21,7 @@ onMounted(()=>{
 	// 	iot3d.startFocusMotion([0, -2.815, 0],route,30);
 	iot3d.setSize(window.innerWidth, window.innerHeight)
 	
+	console.log("iot3d:",iot3d.GetModelByUuid("c4a9f2e1-b1b6-4267-b5f2-4dddd4ed6d50"))
   });
 
 	var Model_onDblclick_Model = null
@@ -50,13 +51,12 @@ onMounted(()=>{
 			if(Model == null) if(Model_onDblclick_Model != null) iot3d.Model_Selected_Del(Model_onDblclick_Model)  // 删除 选中
 		} else if(btnNum == 0) {
 			console.log("您点击了鼠标左键！")
-			console.log(Model.parent.children)
+			console.log(Model)
 			if (Model.parent.name==='总密集架'){
 				console.log("您点击了密集架！")
 				console.log("Model:",Model.parent.children.length)
 				
 			}
-			
 			// for (let i = 0; i < Model.parent.children.length; i++) {
 			// 	const element = Model.parent.children[i];
 			// 	if(element.type == "Object3D") {

src/views/index/left-bottom.vue

@@ -18,23 +18,24 @@ const state = reactive<any>({
   },
   scroll: true,
 });
-
+const listtest=['测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一']
 const getData = () => {
-  leftBottom( { limitNum: 20 })
-    .then((res) => {
-      console.log("左下--设备提醒", res);
-      if (res.success) {
-        state.list = res.data.list;
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
+  // leftBottom( { limitNum: 20 })
+  //   .then((res) => {
+  //     console.log("左下--设备提醒", res);
+  //     if (res.success) {
+  //       state.list = res.data.list;
+  //     } else {
+  //       ElMessage({
+  //         message: res.msg,
+  //         type: "warning",
+  //       });
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     ElMessage.error(err);
+  //   });
+  state.list=listtest
 };
 const addressHandle = (item: any) => {
   let name = item.provinceName;

src/views/index/left-center.vue

@@ -2,7 +2,8 @@
 import { ref, reactive } from "vue";
 import { graphic } from "echarts/core";
 import { countUserNum } from "@/api";
-import {ElMessage} from "element-plus"
+import { ElMessage } from "element-plus"
+import axios from 'axios';
 
 let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
 const option = ref({});
@@ -13,6 +14,18 @@ const state = reactive({
   alarmNum: 0,
   totalNum: 0,
 });
+
+const states = reactive({
+  qzCount: 0, //全宗数
+  qsCount: 0,//卷数
+  jsCount: 0,//件数
+  dzdaCount: 0,//电子档案数据量
+  yjCount: 0,//永久卷数
+  cqqsCount: 0,//30年(长期)卷数
+  cqjsCount: 0,//30年(长期)件数
+  queryCount: 0,//今年累计档案查询人次与查询件数
+  fileCount: 0,//全宗卷文件数
+});
 const echartsGraphic = (colors: string[]) => {
   return new graphic.LinearGradient(1, 0, 0, 0, [
     { offset: 0, color: colors[0] },
@@ -21,7 +34,7 @@ const echartsGraphic = (colors: string[]) => {
 };
 const getData = () => {
   countUserNum().then((res) => {
-    console.log("左中--用户总览",res);
+    console.log("左中--用户总览", res);
     if (res.success) {
       state.lockNum = res.data.lockNum;
       state.offlineNum = res.data.offlineNum;
@@ -29,20 +42,48 @@ const getData = () => {
       state.totalNum = res.data.totalNum;
       state.alarmNum = res.data.alarmNum;
       setOption();
-    }else{
+    } else {
       ElMessage.error(res.msg)
     }
-  }).catch(err=>{
+  }).catch(err => {
     ElMessage.error(err)
   });
 };
-getData();
+// getData();
+
+const statistics = () => {
+  const appId = '1686846386279535435';
+  const secret = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDvv8hgUuIzp7WdTS5zHQPt9bOytMNRY+s1MBCbLp6C2sz9kg+agQ/cMqztYgwjlYqETyUTiu/uuF0y71VHtfazip6eYI++EHqBCNgmgGBkdyV5EyiSBC+RsJ0tX+oCFFtIIlYzIwgserkZyVKrSF61OieQj+C2rqbJBZq5svXlwIDAQAB';
+  axios.post('http://45.251.93.106:8082/api/statistics', { appId, secret })
+    .then((response) => {
+      console.log('左中--设备总览', response.data);
+      if (response.data.code === 200) {
+        console.log('左中--设备总览', response.data.result);
+        states.qzCount = response.data.result.qzCount;
+        states.qsCount = response.data.result.qsCount;
+        states.jsCount = response.data.result.jsCount;
+        states.dzdaCount = response.data.result.dzdaCount;
+        states.yjCount = response.data.result.yjCount;
+        states.cqqsCount = response.data.result.cqqsCount;
+        states.cqjsCount = response.data.result.cqjsCount;
+        states.queryCount = response.data.result.queryCount;
+        states.fileCount = response.data.result.fileCount;
+      }else{
+        ElMessage.error(response.data.message);
+      }
+    })
+    .catch((error) => {
+      ElMessage.error(error);
+    });
+};
+statistics()
+
 const setOption = () => {
   option.value = {
     title: {
       top: "center",
       left: "center",
-      text: [`{value|${state.totalNum}}`, "{name|总数}"].join("\n"),
+      text: [`{value|${states.fileCount}}`, "{name|总数}"].join("\n"),
       textStyle: {
         rich: {
           value: {
@@ -50,7 +91,7 @@ const setOption = () => {
             fontSize: 24,
             fontWeight: "bold",
             lineHeight: 20,
-            padding:[4,0,4,0]
+            padding: [4, 0, 4, 0]
           },
           name: {
             color: "#ffffff",
@@ -83,7 +124,7 @@ const setOption = () => {
           show: true,
           // formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
           formatter: "   {b|{b}}   \n   {c|{c}个}",
-            position: "inside",
+          position: "inside",
           rich: {
             b: {
               color: "#fff",
@@ -117,29 +158,29 @@ const setOption = () => {
         // },
         data: [
           {
-            value: state.onlineNum,
-            name: "在线",
+            value: states.qsCount,
+            name: "卷数",
             itemStyle: {
               color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
             },
           },
           {
-            value: state.offlineNum,
-            name: "离线",
+            value: states.jsCount,
+            name: "件数",
             itemStyle: {
               color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
             },
           },
           {
-            value: state.lockNum,
-            name: "锁定",
+            value: states.dzdaCount,
+            name: "电子档案数据量",
             itemStyle: {
               color: echartsGraphic(["#F48C02", "#FDDB7D"]),
             },
           },
           {
-            value: state.alarmNum,
-            name: "异常",
+            value: states.yjCount,
+            name: "永久卷数",
             itemStyle: {
               color: echartsGraphic(["#F4023C", "#FB6CB7"]),
             },

src/views/index/left-top.vue

@@ -3,6 +3,7 @@ import { reactive, ref } from "vue";
 import { countDeviceNum } from "@/api";
 import CountUp from "@/components/count-up";
 import {ElMessage} from "element-plus"
+import axios from 'axios';
 
 const duration = ref(2);
 const state = reactive({
@@ -29,6 +30,23 @@ const getData = () => {
   });;
 };
 getData();
+
+
+const statistics = () => {
+  const appId = '1686846386279535435';
+  const secret = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDDvv8hgUuIzp7WdTS5zHQPt9bOytMNRY+s1MBCbLp6C2sz9kg+agQ/cMqztYgwjlYqETyUTiu/uuF0y71VHtfazip6eYI++EHqBCNgmgGBkdyV5EyiSBC+RsJ0tX+oCFFtIIlYzIwgserkZyVKrSF61OieQj+C2rqbJBZq5svXlwIDAQAB';
+  axios.post('http://45.251.93.106:8082/api/statistics', { appId, secret })
+  .then((response) => {
+    console.log('左上--设备总览', response.data);
+    if (response.data.code===200) {
+      console.log('左上--设备总览', response.data.result);
+    }
+  })
+  .catch((error) => {
+    ElMessage.error(error);
+  });
+};
+statistics()
 </script>
 
 <template>

src/views/index/monitor.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+      <div :id="preId" style="width: 400px; height: 200px"></div>
+    </div>
+  </template>
+  <script>
+  export default {
+    name: "h5HkVideo",
+    props: {
+      preUrl: {
+        type: String,
+      },
+      preId: {
+        type: String,
+      }
+    },
+    data() {
+      return {
+        // 播放器对象
+        player: null,
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initPlayer();
+      });
+    },
+    methods: {
+      /**
+       * 初始化播放器
+       */
+      initPlayer() {
+        this.player = new window.JSPlugin({
+          // 需要英文字母开头 必填
+          szId: this.preId,
+          // 必填,引用H5player.min.js的js相对路径
+          szBasePath: "/h5player",
+   
+          // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+        //   iWidth: 600,
+        //   iHeight: 400,
+   
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: 4,
+          iCurrentSplit: 1,
+   
+        //   // 样式
+        //   oStyle: {
+        //     border: '#343434',
+        //     borderSelect: '#FFCC00',
+        //     background: '#000'
+        //   }
+        });
+        this.initPlugin();
+      },
+      /**
+       * 事件初始化
+       */
+      initPlugin() {
+        this.player.JS_SetWindowControlCallback({
+          windowEventSelect(iWindIndex) {
+            // 插件选中窗口回调
+            console.log("windowSelect callback: ", iWindIndex);
+          },
+          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
+            // 插件错误回调
+            console.error(
+              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
+              oError
+            );
+          },
+          windowEventOver(iWindIndex) {
+            // 鼠标移过回调
+            // console.log("鼠标移过回调", iWindIndex);
+          },
+          windowEventOut(iWindIndex) {
+            // 鼠标移出回调
+            // console.log("鼠标移出回调", iWindIndex);
+          },
+          windowFullCcreenChange(bFull) {
+            // 全屏切换回调
+            console.log("全屏切换回调", bFull);
+          },
+          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
+            // 首帧显示回调
+            console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
+          },
+          performanceLack(iWndIndex) {
+            // 性能不足回调
+            console.log("性能不足回调", iWndIndex);
+          },
+        });
+   
+        // this.play();
+      },
+      /**
+       * 播放
+       */
+      play(data) {
+        let preUrl;
+        if (data != undefined) {
+          preUrl = data; // 播放地址
+        } else {
+          preUrl = this.preUrl; // 播放地址
+        }
+        const param = {
+          playURL: preUrl,
+          // 1：高级模式  0：普通模式，高级模式支持所有
+          mode: 1,
+        };
+        // 当前播放窗口下标
+        let index = 0;
+        // console.log(this.playerArr);
+        this.player.JS_Play(preUrl, param, index).then(
+          () => {
+            // 播放成功回调
+            console.log("播放成功");
+          },
+          (err) => {
+            console.log("播放失败");
+            console.info("JS_Play failed:", err);
+          }
+        );
+      },
+    },
+  };
+  </script>

src/views/index/right-bottom.vue

@@ -19,23 +19,25 @@ const state = reactive<any>({
   },
   scroll: true,
 });
+const listtest=['测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一','测试一']
 
 const getData = () => {
-  rightBottom({ limitNum: 20 })
-    .then((res) => {
-      console.log("右下", res);
-      if (res.success) {
-        state.list = res.data.list;
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
+  // rightBottom({ limitNum: 20 })
+  //   .then((res) => {
+  //     console.log("右下", res);
+  //     if (res.success) {
+  //       state.list = res.data.list;
+  //     } else {
+  //       ElMessage({
+  //         message: res.msg,
+  //         type: "warning",
+  //       });
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     ElMessage.error(err);
+  //   });
+  state.list=listtest
 };
 
 const comName = computed(() => {

src/views/index/right-top.vue

@@ -6,21 +6,36 @@ import { ElMessage } from "element-plus";
 
 const option = ref({});
 const getData = () => {
-  alarmNum()
-    .then((res) => {
-      console.log("右上--报警次数 ", res);
-      if (res.success) {
-        setOption(res.data.dateList, res.data.numList, res.data.numList2);
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
+  // alarmNum()
+  //   .then((res) => {
+  //     console.log("右上--报警次数 ", res);
+  //     if (res.success) {
+  //       setOption(res.data.dateList, res.data.numList, res.data.numList2);
+  //     } else {
+  //       ElMessage({
+  //         message: res.msg,
+  //         type: "warning",
+  //       });
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     ElMessage.error(err);
+  //   });
+  const { xData, yData, yData2 } = generateFakeData();
+  setOption(xData, yData, yData2);
+};
+const generateFakeData = () => {
+  const xData = [];
+  const yData = [];
+  const yData2 = [];
+
+  for (let i = 0; i < 10; i++) {
+    xData.push(`日期${i + 1}`);
+    yData.push(Math.floor(Math.random() * 100));
+    yData2.push(Math.floor(Math.random() * 100));
+  }
+
+  return { xData, yData, yData2 };
 };
 const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
   option.value = {

src/views/index/system.vue

@@ -0,0 +1,18 @@
+<template>
+    <ItemWrap title="系统设置" class="contetn_lr-item">
+        
+    </ItemWrap>
+</template>
+<script setup lang="ts">
+import ItemWrap from '@/components/item-wrap/item-wrap.vue';
+
+</script>
+<style scoped lang="scss">
+.contetn_lr-item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

src/views/index/user.vue

@@ -8,84 +8,135 @@
     <el-dialog v-model="isshowEdit">
       <Edituser @close="isshowEdit = false"></Edituser>
     </el-dialog>
-    <div class="user_skills" style="margin-top:20px;">
-      <n-table striped class="eltables" :bordered="true">
-        <thead>
-          <tr>
-            <th>添加时间</th>
-            <th>用户名</th>
-            <th>用户地址</th>
-            <th>状态</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in tableData">
-            <td>{{ item.date }}</td>
-            <td>{{ item.name }}</td>
-            <td>{{ item.address }}</td>
-            <td>{{ item.state }}</td>
-            <td>
-              <n-button strong secondary type="info" size="large" @click="showEdit"
+    <div class="user_skills" style="margin-top:50px;">
+    <el-table :data="tableData" height="650" style="width: 100%; margin: auto;" class="eltables">
+    <el-table-column prop="CreatedAt" label="创建时间"  />
+    <el-table-column prop="account" label="账号" />
+    <el-table-column prop="state" label="状态" :formatter="formatState"/>
+    <el-table-column label="操作"  >
+      <template #default="{ row }">
+      <n-button strong secondary type="info" size="large" @click="showEdit"
                 style="margin-right: 5px;" class="edtbtn">编辑</n-button>
-              <n-button strong secondary type="success" class="edtbtn" size="large" @click="handleDelete(index)">启用</n-button>
-              <n-button strong secondary type="warning" class="edtbtn" size="large" @click="handleDelete(index)">禁用</n-button>
-              <n-button strong secondary type="error" class="edtbtn" size="large" @click="handleDelete(index)">删除</n-button>
-            </td>
-          </tr>
-        </tbody>
-      </n-table>
-    </div>
+              <n-button strong secondary type="success" class="edtbtn" size="large" @click="updateUser(row.id,1)">启用</n-button>
+              <n-button strong secondary type="warning" class="edtbtn" size="large" @click="updateUser(row.id,2)">禁用</n-button>
+              <n-button strong secondary type="error" class="edtbtn" size="large" @click="deleteUser(row.id)">删除</n-button>
+      </template>
+    </el-table-column>
+    </el-table>
+      <el-pagination class="pagination"
+      background layout="prev, pager, next"
+      :total="page_count" 
+      :page-size="userform.size"
+      :page-sizes="[10, 20, 30, 50]"
+      :current-page="userform.page"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"/>
+    </div> 
   </ItemWrap>
 </template>
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import CapsuleChart from "@/components/datav/capsule-chart";
-import { ranking } from "@/api";
-import { ElMessage } from "element-plus";
+<script setup>
+import { ref, reactive, onMounted,watch  } from "vue";
+import { ElMessage,ElMessageBox } from "element-plus";
 import Adduser from "./adduser.vue";
-import { NInput, NTable, NPagination } from "naive-ui";
 import Edituser from "./edituser.vue";
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    state:'No'
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    state:'No'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    state:'No'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-    state:'No'
-  },
-]
+import {Userlist,UpdateUser,DeleteUser} from "@/api/modules/user";
 const isAddUserVisible = ref(false);
 const isshowEdit = ref(false);
-
+let userform = reactive({
+  "page": 1,
+  "size": 10,
+  "query":"",
+  "desc":""
+});
+let page_count = ref(0);
+let tableData = reactive([{
+  id: "",
+  CreatedAt: "",
+  account: "",
+  password: "",
+  state: "",
+}]);
 const showAddUser = () => {
   isAddUserVisible.value = true;
 };
 const showEdit = () => {
   isshowEdit.value = true;
 };
+function getStateText(state) {
+  return state === 1 ? '启用' : '禁用';
+}
+const handlePageChange = (newPage) => {
+  userform.page = newPage;
+  userlist(); // 调用数据获取方法
+};
+const handleSizeChange = (size) => {
+  userform.size = size;
+  userlist();
+};
+// 获取用户列表
+function userlist(){
+  Userlist(userform).then((res)=>{
+    if (res.code === 200) {
+      tableData=res.data.result;
+      page_count.value=res.data.total;
+      console.log(res,page_count.value)
+    }else{
+      ElMessage.error(res.message);
+    }
+  })
+}
+const formatState = (row, column, cellValue, index) => {
+  switch (cellValue) {
+    case 1:
+      return "启用";
+    case 2:
+      return "禁用";
+    default:
+      return "未知";
+  }
+};
+const updateUser = (id, state) => {
+  UpdateUser({ id, state }).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success("修改成功");
+      userlist();
+    } else {
+      ElMessage.error(res.message);
+    }
+  });
+};
+//删除用户
+function deleteUser(index){
+  // 弹出确认框询问用户是否真的要删除
+  ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 如果用户点击确定，则进行删除操作
+    DeleteUser({
+      id: index,
+    }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success("删除成功");
+        userlist();
+      } else {
+        ElMessage.error(res.message);
+      }
+    })
+  }).catch(() => {
+    // 如果用户点击取消，给出提示
+    ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    });          
+  });
+}
+onMounted(() => {
+  userlist();
+});
 
 </script>
-
-
-
 <style scoped>
 .contetn_lr-item {
   font-size: 30px;
@@ -138,33 +189,86 @@ const showEdit = () => {
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(10px);
 }
+.edtbtn{
+  margin-left: 10px;
+}
+::v-deep .pagination {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    margin-right: 15px;
+    font-size: larger;
+}
+/* 使分页器中的按钮背景透明 */
+::v-deep .el-pagination button,
+::v-deep .el-pagination .btn-quicknext,
+::v-deep .el-pagination .btn-next,
+::v-deep .el-pagination .btn-prev,
+::v-deep .el-pagination .btn-quickprev {
+    height: 40px;
+    width: 40px;
+    font-size: 20px;
+    background-color: rgba(17, 0, 255, 0.3) !important;
+    /* 半透明灰色 */
+    border-color: rgba(128, 128, 128, 0.3) !important;
+}
 
-/* naive */
-.eltables {
-  background-color: transparent !important;
-  font-size: 20px;
-  text-align: center;
-  border: none;
+/* 使分页器中的数字和链接透明 */
+::v-deep .el-pagination .el-pager li {
+    background-color: transparent !important;
+    border-color: transparent !important;
 }
 
-.eltables th {
+/* 当鼠标悬停或激活时，保持背景透明 */
+::v-deep .el-pagination button:hover,
+::v-deep .el-pagination button:focus,
+::v-deep .el-pagination .el-pager li:hover,
+::v-deep .el-pagination .el-pager li.is-active {
+    height: 40px;
+    width: 40px;
+    font-size: 16px;
+    background-color: rgba(104, 3, 255, 0.5) !important;
+    /* 加深的半透明灰色 */
+}
+
+::v-deep .el-table th {
   background-color: transparent !important;
-  color: #006ff0;
-  border: none;
+  color: #006ff0; 
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
-.eltables td {
+::v-deep .el-table td {
   background-color: transparent !important;
-  color: #009ffb;
-  border: none;
+  color: #009ffb; 
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }
 
-.eltables td:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-  /* 半透明的灰色背景 */
+::v-deep .el-table td:hover {
+  background-color: rgba(38, 0, 255, 0.1) !important;
 }
-.edtbtn{
-  margin-left: 10px;
+.el-table {
+    --el-table-border-color: transparent;
+    --el-table-border: none;
+    --el-table-text-color: #bdbdbe;
+    --el-table-header-text-color: #bdbdbe;
+    --el-table-row-hover-bg-color: transparent;
+    --el-table-current-row-bg-color: transparent;
+    --el-table-header-bg-color: transparent;
+    --el-table-bg-color: transparent;
+    --el-table-tr-bg-color: transparent;
+    --el-table-expanded-cell-bg-color: transparent;
+}
+.eltables {
+  text-align: center;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
-
 </style>

src/views/index/webH5.vue

@@ -0,0 +1,49 @@
+<template>
+      <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
+    <ItemWrap class="contetn_lr-item" title="实时监控">
+  <div class="video" ref="videoTest">
+    <test-web-h-5 :preId="preId1" ref="h5Player1" />
+    <test-web-h-5 :preId="preId2" ref="h5Player2" />
+    <el-button type="primary" @click="handlePlay('1')">播放视频一</el-button>
+    <el-button type="primary" @click="handlePlay('2')">播放视频二</el-button>
+  </div>
+</ItemWrap>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import TestWebH5 from './monitor.vue';
+import ItemWrap from '@/components/item-wrap/item-wrap.vue';
+
+const preId1 = ref('player');
+const preId2 = ref('player2');
+
+const h5Player1 = ref(null);
+const h5Player2 = ref(null);
+
+function handlePlay(val: string) {
+  if (val === '1') {
+    (h5Player1.value as any).play("ws://视频一地址");
+  } else {
+    (h5Player2.value as any).play("ws://视频二地址");
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.video {
+  width: 100%;
+  height: 100%;
+}
+.contetn_lr-item{
+    height: 1000px;
+    font-size: 25px;
+}
+.back-home-btn {
+  position: absolute;
+  margin-top: 30px;
+  top: 10px;
+  left: 10px;
+}
+
+</style>