bonc-htmlplayer - npm Package Compare versions

Comparing version 1.0.19 to 1.0.20

package.json

 {
   "name": "bonc-htmlplayer",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "东方国信的html播放器内核",
-  "main": "./src/index.js",
+  "main": "./dist/BoncH5Player.js",
   "scripts": {
@@ -18,4 +18,4 @@ "test": "echo \"Error: no test specified\" && exit 1",
   "devDependencies": {
+    "copy-webpack-plugin": "^6.4.1",
     "exports-loader": "^1.0.1",
-    "wasm-loader": "^1.3.0",
     "webpack": "^4.43.0",
@@ -22,0 +22,0 @@ "webpack-cli": "^3.3.12"

src/h264canvasplayer/player.js

@@ -1,27 +0,54 @@
-// import _ from 'lodash'
+import './libffmpeg_264_265.js';
+import WebGLPlayer from './webgl';
+import localRecorder from '../util/webmdownload/webmdownload';
+// import AudioPlayer from './audioplayer/audioplayer';
 
+import AudioPlayer from './audio';
 
+class H265CanvasPlayer {
+    constructor(app, option) {
+        this.app = app;
+        this.pts = 0;
+        this.canvasId = option.canvasId;
+        this.audioId = option.audioId;
+        this.app.node = document.getElementById(this.canvasId);
+        var audioNode = document.getElementById(this.audioId);
+        this.recoder = new localRecorder(app);
+        this.bufferArray = []
+        this.info = {
+            _timeStempAudio : 0,
+            audioseg:0
+        };
+        
+        if (audioNode) {
+            this.nalsbonAudioarr = new Proxy(this.bufferArray,{
+                get(target, property){
+                    return target[property]
+                },
+                set(target, property, value){
+                    target[property] = value;
+                    loadNextBuffer()
+                    return true;
+                }
+            }); // 音频数据队列
+            // 对 this.nalsbonAudioarr 的push方法做监听
 
-class H264CanvasPlayer{
-    constructor(app){
-        this.app = app;
-        this.pts=0;
-        // this.addjs();
+            this.audioPlayer = new AudioPlayer({
+                audioNode,
+                nalsbonAudioarr:this.bufferArray,
+                info:this.info
+            });
+            var loadNextBuffer = this.audioPlayer.loadNextBuffer
+        }
+
         setTimeout(() => {
-            
-            // this.Module = _.cloneDeep(window.Module)
-            this.videoCallback =Module.addFunction(function (addr_y, addr_u, addr_v, stride_y, stride_u, stride_v, width, height, pts,id) {
-                // console.log("[%d]In video callback, size = %d * %d, pts = %d", width, height, pts)
-                // console.log('解码成功')
-                // debugger
-                // console.log("1111111111111111111111111",this.app.configs.videoId);
-                console.log(id)
-                console.log('解码一包数据');
-                // console.log(id)
-                let size = width * height + (width / 2)  * (height / 2) + (width / 2)  * (height / 2)
+
+            this.videoCallback = Module.addFunction(function (addr_y, addr_u, addr_v, stride_y, stride_u, stride_v, width, height, pts, id) {
+
+                let size = width * height + (width / 2) * (height / 2) + (width / 2) * (height / 2)
                 let data = new Uint8Array(size)
                 let pos = 0
-                for(let i=0; i< height; i++) {
+                for (let i = 0; i < height; i++) {
                     let src = addr_y + i * stride_y
-                    let tmp = HEAPU8.subarray(src, src + width)
+                    let tmp = Module.HEAPU8.subarray(src, src + width)
                     tmp = new Uint8Array(tmp)
@@ -31,5 +58,5 @@ data.set(tmp, pos)
                 }
-                for(let i=0; i< height / 2; i++) {
+                for (let i = 0; i < height / 2; i++) {
                     let src = addr_u + i * stride_u
-                    let tmp = HEAPU8.subarray(src, src + width / 2)
+                    let tmp = Module.HEAPU8.subarray(src, src + width / 2)
                     tmp = new Uint8Array(tmp)
@@ -39,5 +66,5 @@ data.set(tmp, pos)
                 }
-                for(let i=0; i< height / 2; i++) {
+                for (let i = 0; i < height / 2; i++) {
                     let src = addr_v + i * stride_v
-                    let tmp = HEAPU8.subarray(src, src + width / 2)
+                    let tmp = Module.HEAPU8.subarray(src, src + width / 2)
                     tmp = new Uint8Array(tmp)
@@ -52,5 +79,17 @@ data.set(tmp, pos)
                 }
-                console.timeEnd('decode')
+
+                // 处理音频
+                
+                
+                // try {
+                //     if (this.nalsbonAudioarr && this.nalsbonAudioarr.length > 0) {
+                //         // console.log('处理音频')
+                //         this.handleAudio()
+                //     }
+                // } catch (err){
+
+                //     console.error(err)
+                // }
                 this.displayVideoFrame(obj);
-                
+
             }.bind(this));
@@ -61,31 +100,11 @@
 
-            console.log('ret',ret)//0 代表成功  非0 代表失败
+            // console.log('ret',ret)//0 代表成功  非0 代表失败
         }, 3000);
-        
-    }
 
-
-    addjs(){
-        const body = document.getElementsByTagName('body')[0];
-
-        // const script3 = document.createElement('script');
-        // script3.src = 'http://localhost/newwasm/libffmpeg_264_265.worker.js'
-        // body.appendChild(script3);
-
-        const script1 = document.createElement('script');
-        // script1.src = 'http://172.16.67.188/wasm/dist/libffmpeg_264_265.js'
-        // script1 .src = 'http://127.0.0.1/wasm/dist/libffmpeg_264_265.js'
-        // script1 .src = 'http://localhost/newwasm/libffmpeg_264_265.js'
-        script1.src = 'http://172.16.67.203/newwasm/libffmpeg_264_265.js'
-        body.appendChild(script1);
-        const script2 = document.createElement('script');
-        // script2.src = 'http://172.16.67.188/wasm/test/webgl.js'
-        script2.src = 'http://172.16.67.203/wasm/test/webgl.js'
-
-        body.appendChild(script2);
     }
+    handleAudio() {
+        this.audioPlayer.loadNextBuffer(this.bufferArray)
+    }
+    playBuffer(videoBuffer) {
 
-
-    playBuffer(videoBuffer){
-        
         var typedArray = new Uint8Array(videoBuffer);
@@ -95,5 +114,15 @@ var size = typedArray.length;
         Module.HEAPU8.set(typedArray, cacheBuffer);
-        console.time('decode')
-        var ret = Module._decodeData(cacheBuffer,size, this.pts++,1); 
-
+        // console.time('decode')
+        try {
+            var ret = Module._decodeData(cacheBuffer, size, this.pts++, 1);
+        } catch { }
+        if (cacheBuffer != null) {
+            Module._free(cacheBuffer);
+            cacheBuffer = null;
+        }
+        // if(size < CHUNK_SIZE) {
+        //     console.log('Flush frame data')
+        //     Module._flushDecoder();
+        //     Module._closeDecoder();
+        // }
     }
@@ -107,9 +136,7 @@
         var uvLength = (width / 2) * (height / 2);
-        if(!this.webglPlayer) {
-            console.log(this.app.configs.videoId);
-            const canvasId = this.app.configs.videoId;
-            console.log(canvasId)
+        if (!this.webglPlayer) {
+            const canvasId = this.canvasId;
             var canvas = document.getElementById(canvasId);
             this.webglPlayer = new WebGLPlayer(canvas, {
-                preserveDrawingBuffer: false
+                preserveDrawingBuffer: true
             });
@@ -120,4 +147,15 @@ }
 
+    localRecord(name) {
+        this.recoder.startRecord(name)
+    }
+    finishRecord() {
+        this.recoder.endRecord();
+    }
+    destroy() {
+        // 清除画布
+        this.webglPlayer.clear();
+    }
+
 }
 
-export default H264CanvasPlayer
+export default H265CanvasPlayer

src/h264player/controller/remux.js

@@ -147,3 +147,3 @@ import { MP4 } from '../../util/mp4-generator.js';
                         }
-                        let aacRawData=payQ;
+                        let aacRawData = payQ;
                         let sizeaudio = aacRawData.byteLength;
@@ -150,0 +150,0 @@ const mdatAudio = MP4.mdat(aacRawData);

src/h264player/player.js

@@ -40,2 +40,3 @@ import { extractNALubonc } from './utils'
         this.isMSESupported = !!window.MediaSource;
+        this.clearBufferValidate = true
         if (!this.isMSESupported) {
@@ -69,3 +70,3 @@ throw 'Oops! Browser does not support media source extension.';
         this.releaseBuffer();
-        this.clearBuffer();
+        this.clearBuffer();       
     }
@@ -310,3 +311,2 @@ playBfferReverse(videobuffer) {
             chunks.audio = arr;
-
             this.remuxController.hasAudio = true;
@@ -318,3 +318,3 @@ }
         if (chunks.video.length === 0) {
-            return
+            return;
         }
@@ -398,4 +398,9 @@ this.remuxController.remux(chunks);
     clearBuffer() {
+        if(!this.clearBufferValidate){
+            console.log(this.app.node.buffered.end(0) - this.app.node.currentTime)
+            return
+        }
+        
         if (this.app.node.buffered.length > 0) {
-
+            // console.log(this.app.node.buffered.end(0) - this.app.node.currentTime)
             let bufferLength = this.app.node.buffered.end(0) - this.app.node.currentTime;
@@ -406,5 +411,5 @@ if(bufferLength<0){
                 console.log('播超了')
-                
-                this.app.node.pause();
-            }else if (bufferLength > 0 && bufferLength < 3) {
+                this.app.node.pause();   
+            }
+            else if (bufferLength > 0 && bufferLength <= 3) {
                 this.app.node.play();
@@ -415,3 +420,3 @@ this.app.node.playbackRate = 1;
                 this.app.node.playbackRate = 1;
-
+                this.app.node.play();
             }
@@ -418,0 +423,0 @@ else if (bufferLength > 3 && bufferLength <= 5) {

src/index.js

@@ -15,3 +15,3 @@ import Event from './util/event';
 import H264Mp4Player from './h264player/player';
-import H264CanvasPlayer from './h264canvasplayer/player';
+import H265CanvasPlayer from './h264canvasplayer/player';
 
@@ -60,11 +60,11 @@ window.MediaSource = window.MediaSource || window.WebKitMediaSource;
         //实例化mp4Coder类
-        switch (configs.playerClassName) {
-            case 'H264CanvasPlayer':
-                this._player = new H264CanvasPlayer(this);
-                break;
-            default:
-                validateConfigs.call(this, configs) //对配置项进行验证
-                this._player = new H264Mp4Player(this);
-                break;
-        }
+        // switch (configs.playerClassName) {
+        //     case 'H264CanvasPlayer':
+        //         this._player = new H264CanvasPlayer(this);
+        //         break;
+        //     default:
+        //         validateConfigs.call(this, configs) //对配置项进行验证
+        //         this._player = new H264Mp4Player(this);
+        //         break;
+        // }
 
@@ -104,2 +104,4 @@ //this.H264Mp4Player = new H264Mp4Player(this);
         }.bind(this));
+        // 得到视频编码类型，实例化player
+        this.on('onGetVideoCode',this.makePlayer.bind(this))
         // this.on('elementInfo',function(elementInfo){
@@ -109,2 +111,16 @@ //     this.dispatch('elementInfo',elementInfo);
     }
+    makePlayer(codetype){
+        switch (codetype) {
+            case 'H265':
+                console.log('实例化h265')
+                this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
+                this._player = this._h265player
+                break;
+            case 'H264':
+                console.log('实例化h264')
+                validateConfigs.call(this, this.configs) //对配置项进行验证
+                this._player = new H264Mp4Player(this);
+                break;
+        }
+    }
     /**
@@ -190,12 +206,12 @@ * 判断是否只有一个websocket连接
 
-        if (!this._player) {
-            switch (this.configs.playerClassName) {
-                case 'H264CanvasPlayer':
-                    this._player = new H264CanvasPlayer(this);
-                    break;
-                default:
-                    this._player = new H264Mp4Player(this);
-                    break;
-            }
-        }
+        // if (!this._player) {
+        //     switch (this.configs.playerClassName) {
+        //         case 'H264CanvasPlayer':
+        //             this._player = new H264CanvasPlayer(this);
+        //             break;
+        //         default:
+        //             this._player = new H264Mp4Player(this);
+        //             break;
+        //     }
+        // }
         console.log('开始')
@@ -219,2 +235,4 @@ if (!validateChannelInfo(jsonbonc)) {
 
+        // 设置主子码流
+        jsonbonc.StreamNum && (playBody.getElementsByTagName('StreamNum')[0].firstChild.nodeValue = jsonbonc.StreamNum);
         this.webSocketController.url = 'ws://' + playBody.getElementsByTagName('StreamServerIP')[0].firstChild.nodeValue + ':' + playBody.getElementsByTagName('StreamServerPort')[0].firstChild.nodeValue;
@@ -247,2 +265,6 @@ this.webSocketController.xmlPlayBody = Xml2String(playBody);
     }
+    /**
+     * 音量控制，传入值在0-1之间
+     * @param {number} volume 
+     */
     setVolume(volume){
@@ -317,12 +339,16 @@ if(volume<0 || volume>1){
         this._player.destroy();
-        this._player = null;
+        
+        // this._player = null;
         this.currentTime = null;
+        this.webSocketController.socketDataMerge.ifDispatchVideoType = true;
         if (ifnew == false) {
             return
         }
-        switch (this.configs.playerClassName) {
-            case 'H264CanvasPlayer':
-                this._player = new H264CanvasPlayer(this);
+        console.log(this.configs.playerClassName)
+        switch (this._player.constructor.name) {
+            case 'H265CanvasPlayer':
+                // this._player = new H264CanvasPlayer(this);
                 break;
             default:
+                delete this._player;
                 validateConfigs.call(this, this.configs) //对配置项进行验证
@@ -329,0 +355,0 @@ this._player = new H264Mp4Player(this);

src/util/mp4-generator.js

@@ -147,3 +147,3 @@ /**
         while (i--) {
-            size += payload[i].byteLength;
+            size += payload[i].byteLength;  
         }
@@ -150,0 +150,0 @@ result = new Uint8Array(size);

src/util/SocketDataMerge.js

@@ -1,2 +0,2 @@
-import ByteArray from './ByteArray' ;
+import ByteArray from './ByteArray';
 //import {MergeBuffer} from './utils' ;
@@ -6,9 +6,9 @@ // import {globalEvent} from './event' ;
 import { CSecurityVideoDetectTask } from './securityIDList';
-import { throttle } from './utils' ;
+import { throttle } from './utils';
 import ObjTree from 'objtree';
 const xotree = new ObjTree();
-let srMap= [ 96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350 ];
+let srMap = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
 //company 1112757248 'BST '
 class SocketDataMerge {
-    constructor(app){
+    constructor(app) {
         this.app = app;
@@ -19,14 +19,14 @@ /**当前数据包是否异常 0:正常    1:异常 */
         //从服务端收到的数据都放在这里
-        this.websocketDataQueue = [] ;
+        this.websocketDataQueue = [];
 
-        this.videoDataQueue = [] ;
+        this.videoDataQueue = [];
 
-        this.audioDataQueue = [] ;
+        this.audioDataQueue = [];
         this.packageNum = 0;
         this.whole = new Uint8Array(1400000)//分配100*1400个字节的内存空间用于存储收到的数据
         this.wholeOffset = 0;
-        this.start = false ;
+        this.start = false;
 
-        this.drawfunc =null ;
-        this.isCalBitRate = false ;
+        this.drawfunc = null;
+        this.isCalBitRate = false;
         this.t1;//t1用于计算码率
@@ -37,31 +37,32 @@ this.t2;//t2用于计算码率
         this.ifDispatchVideoError = true;
+        this.ifDispatchVideoType = true;
         this.ifDispatchAudioError = true;
     }
-    controlCalBitRate(){
+    controlCalBitRate() {
         this.isCalBitRate = !this.isCalBitRate
     }
     // 计算码率
-    calBitRate(){
-        if(!this.t2 || !this.t1){
+    calBitRate() {
+        if (!this.t2 || !this.t1) {
             return
         }
-        if((this.t2-this.t1)>3000){
-            this.app.dispatch('bitrate',Math.round((this.accumulateBitNum*8/((this.t2-this.t1)/1000))/1000)) ;
-            this.accumulateBitNum = 0 ;
-            this.t2 = this.t1 = undefined ;
+        if ((this.t2 - this.t1) > 3000) {
+            this.app.dispatch('bitrate', Math.round((this.accumulateBitNum * 8 / ((this.t2 - this.t1) / 1000)) / 1000));
+            this.accumulateBitNum = 0;
+            this.t2 = this.t1 = undefined;
         }
     }
-    addDataPackage(e){
+    addDataPackage(e) {
 
         //判断当前状态是否异常，并且不是第一个包，
-        
-        if(this.packageState){
+
+        if (this.packageState) {
             // console.log('yichang')
             // 数据异常
-            if(this.ifFirstPackage(e.data)){
+            if (this.ifFirstPackage(e.data)) {
                 this.packageState = 0;
                 this.wholeOffset = 0;
-            }else{
+            } else {
                 return;
-            }            
+            }
         }
@@ -83,22 +84,22 @@
         // }
-                    
+
         /// test code end
         //处理message,判断包是否满了
-        if(this.ifFull()){
+        if (this.ifFull()) {
             //如果满了
             //this.packageNum = 0;
             // var socketBA= new ByteArray(this.templateDataQueue);
-            var socketBA = new ByteArray(this.whole.buffer,this.wholeOffset);
-            let verbonc=socketBA.ReadUint32();//verbonc
-            let company=socketBA.ReadUint32();//company
-            let imsgType=socketBA.ReadUint32();////消息类型
-            let linType=socketBA.ReadUint32();//指令类型
-            let iCmdLen=socketBA.ReadUint32();//指令长度
+            var socketBA = new ByteArray(this.whole.buffer, this.wholeOffset);
+            let verbonc = socketBA.ReadUint32();//verbonc
+            let company = socketBA.ReadUint32();//company
+            let imsgType = socketBA.ReadUint32();////消息类型
+            let linType = socketBA.ReadUint32();//指令类型
+            let iCmdLen = socketBA.ReadUint32();//指令长度
             let allDataLength = socketBA.ReadUint32();//数据全长
             let leftField = socketBA.ReadUint32();//保留字段
-        
+
             // 如果是视频回放，指针还要向后移动这些才到数据体  
             var timestamp
-            if(this.app.playback){
-                timestamp=socketBA.ReadInt53();
+            if (this.app.playback) {
+                timestamp = socketBA.ReadInt53();
                 // console.log(timestamp);
@@ -112,29 +113,29 @@ // let nFlag=socketBA.ReadUint32(true);
                 let sChannelID = socketBA.ReadString(42);
-            }            
+            }
             // console.log(imsgType)
-            if(imsgType==2501){
+            if (imsgType == 2501) {
                 console.log(imsgType)
             }
-            switch(imsgType){
+            switch (imsgType) {
                 case 1603: // 视频数据
-                    var biSize=socketBA.ReadUint32(true);//4字节
-                    var biWidth=socketBA.ReadUint32(true);//4字节
-                    var biHeight=socketBA.ReadUint32(true);//4字节
-                    var biPlanes=socketBA.ReadUint16(true);//2字节
-                    var biBitCount=socketBA.ReadUint16(true);//2字节
-                    var biCompression=socketBA.ReadUint32(true);//4字节
-                    var biSizeImage=socketBA.ReadUint32(true);//4字节
-                    var biXPelsPerMeter=socketBA.ReadUint32(true);//4字节
-                    var biYPelsPerMeter=socketBA.ReadUint32(true);//4字节
+                    var biSize = socketBA.ReadUint32(true);//4字节
+                    var biWidth = socketBA.ReadUint32(true);//4字节
+                    var biHeight = socketBA.ReadUint32(true);//4字节
+                    var biPlanes = socketBA.ReadUint16(true);//2字节
+                    var biBitCount = socketBA.ReadUint16(true);//2字节
+                    var biCompression = socketBA.ReadUint32(true);//4字节
+                    var biSizeImage = socketBA.ReadUint32(true);//4字节
+                    var biXPelsPerMeter = socketBA.ReadUint32(true);//4字节
+                    var biYPelsPerMeter = socketBA.ReadUint32(true);//4字节
                     // var biClrUsed=socketBA.ReadUint32(true);//4v
                     var biClrUsed = socketBA.ReadString(4)
-                    var biClrImportant=socketBA.ReadUint32(true);//4字节
+                    var biClrImportant = socketBA.ReadUint32(true);//4字节
                     // var timestamp=biXPelsPerMeter*1000 + Math.floor(biYPelsPerMeter/1000);
-                    var timePoint = biXPelsPerMeter*1000 + Math.floor(biYPelsPerMeter/1000);
-                    
-                    if(!this.start){                        
+                    var timePoint = biXPelsPerMeter * 1000 + Math.floor(biYPelsPerMeter / 1000);
+
+                    if (!this.start) {
                         this.app.videoHeight = biHeight;
                         this.app.videoWidth = biWidth;
-                        var timestamp = biXPelsPerMeter*1000 + Math.floor(biYPelsPerMeter/1000);
-                        
+                        var timestamp = biXPelsPerMeter * 1000 + Math.floor(biYPelsPerMeter / 1000);
+
                         this.app.startTime = timestamp;
@@ -145,4 +146,4 @@ // console.log(biHeight,biWidth)
                     // 是否需要计算码率
-                    if(this.isCalBitRate){
-                        this.t1?this.t2 = timePoint : this.t1=timePoint
+                    if (this.isCalBitRate) {
+                        this.t1 ? this.t2 = timePoint : this.t1 = timePoint
                         this.accumulateBitNum += biSizeImage
@@ -153,49 +154,68 @@ this.calBitRate()
                     //把当前时间传出去
-                    if(timestamp){
+                    if (timestamp) {
                         // console.log(timestamp)
-                        this.app.dispatch('currentTime',timestamp*1000);
-                    }     
-                    if(biClrUsed != 'H264' && this.ifDispatchVideoError){
-                        this.ifDispatchVideoError = false
-                        this.app.dispatch('error','当前摄像头视频编码不是h264')
-                    }             
+                        this.app.dispatch('currentTime', timestamp * 1000);
+                    }
+                    if (this.ifDispatchVideoType) {
+                        console.log(biClrUsed)
+                        if (biClrUsed === 'H264') {
+                            this.app.dispatch('onGetVideoCode','H264');
+                        } else {
+                            // 验证是否具备h265解码的功能
+                            
+                            this.app.dispatch('onGetVideoCode','H265');
+                            this.app.dispatch('h265Info',{
+                                videoCanvasHeight:biHeight,
+                                videoCanvasWidth:biWidth
+                            })
+                        }
+                        this.ifDispatchVideoType = false;
+                        break;
+                    }
+                    // if(biClrUsed != 'H264' && this.ifDispatchVideoError){
+                    //     this.ifDispatchVideoError = false
+                    //     this.app.dispatch('error','当前摄像头视频编码不是h264')
+                    // }   
+
                     var h264buf = socketBA.SliceNewAB(biSizeImage);
-                    if(this.ifDispatchBuf){
-                        this.app.dispatch('videoBufferAdd',h264buf);
-                    }else{
+                    if (this.ifDispatchBuf) {
+                        this.app.dispatch('videoBufferAdd', h264buf);
+                    } else {
                         console.log('丢弃')
                     }
 
-                    
+
                     break;
                 case 1604:
                     
-                    var audioSize=socketBA.ReadUint32(true);
-                    var audioSampleRate=socketBA.ReadUint32(true);
-                    var biHeight=socketBA.ReadUint32(true);
-                    var biPlanes=socketBA.ReadUint16(true);
-                    var biBitCount=socketBA.ReadUint16(true);
-                    var biCompression=socketBA.ReadUint32(true);
-                    var audioSizeImage=socketBA.ReadUint32(true);
-                    var auXPelsPerMeter=socketBA.ReadUint32(true);
-                    var auYPelsPerMeter=socketBA.ReadUint32(true);
+                    if(!this.app._player){
+                        break;
+                    }
+                    var audioSize = socketBA.ReadUint32(true);
+                    var audioSampleRate = socketBA.ReadUint32(true);
+                    var biHeight = socketBA.ReadUint32(true);
+                    var biPlanes = socketBA.ReadUint16(true);
+                    var biBitCount = socketBA.ReadUint16(true);
+                    var biCompression = socketBA.ReadUint32(true);
+                    var audioSizeImage = socketBA.ReadUint32(true);
+                    var auXPelsPerMeter = socketBA.ReadUint32(true);
+                    var auYPelsPerMeter = socketBA.ReadUint32(true);
                     // var auClrUsed=socketBA.ReadUint32(true);
                     var type = socketBA.ReadString(4)
-                    var auClrImportant=socketBA.ReadUint32(true);
+                    var auClrImportant = socketBA.ReadUint32(true);
 
-                    if(type!='MPEG'){
-                        if(this.ifDispatchAudioError) {
-                            this.app.dispatch('error','当前摄像头音频编码不是AAC')
-                            this.ifDispatchAudioError = false
-                        }                           
-                    }else{
+                    if (type != 'MPEG') {
+                        if (this.ifDispatchAudioError) {
+                            this.app.dispatch('error', '当前摄像头音频编码不是AAC');
+                            this.ifDispatchAudioError = false;
+                        }
+                    } else {
                         var aacRawbuffer = socketBA.SliceNewAB(audioSizeImage);
-                        var aacRawu8a=new Uint8Array(aacRawbuffer);
-                        
-                        var sampleRateIndex = srMap.findIndex(item=>item===audioSampleRate);
-                        this.app._player.remuxController.samplingFrequencyIndex = sampleRateIndex
-                        
-                        this.app._player.nalsbonAudioarr.push(aacRawu8a)
-                    }
-                    
+                        var aacRawu8a = new Uint8Array(aacRawbuffer);
+                        var sampleRateIndex = srMap.findIndex(item => item === audioSampleRate);
+                        this.app._player.remuxController && (this.app._player.remuxController.samplingFrequencyIndex = sampleRateIndex);
+                        this.app._player.info && (this.app._player.info._samplingFrequencyIndex = sampleRateIndex);
+                        this.app._player.nalsbonAudioarr && this.app._player.nalsbonAudioarr.push(aacRawu8a);
+                    }   
+
                     break;
@@ -224,3 +244,3 @@ case 2500: // 人脸的几何框信息
                     // 时间戳
-                    obOsd.sec = second * 1000 + Math.floor(microseconds / 1000) ;
+                    obOsd.sec = second * 1000 + Math.floor(microseconds / 1000);
                     var nSize = osdba.ReadUint32(true);
@@ -238,19 +258,19 @@ if (nSize > 0) {
                     // this.faceOsdArr.push(obOsd);
-                    this.app.dispatch('elementInfo',obOsd);
+                    this.app.dispatch('elementInfo', obOsd);
                     break;
                 case 2501: // 安防绘制的xml
                     var strxml = socketBA.ReadString(iCmdLen);
-                    if(this.drawfunc) {
+                    if (this.drawfunc) {
                         this.drawfunc()
-                    }else{
-                        this.drawfunc = throttle(function (params) {                        
-                            this.app.dispatch('xmlElementInfo',xotree.parseXML( strxml ));
+                    } else {
+                        this.drawfunc = throttle(function (params) {
+                            this.app.dispatch('xmlElementInfo', xotree.parseXML(strxml));
                             // console.log('xml图形消息')
-                        },2000,1)
-                        this.drawfunc()                        
+                        }, 2000, 1)
+                        this.drawfunc()
                     }
-                    
-                    break;   
+
+                    break;
                 case 2804: // 是个啥序列不清楚，处理逻辑与人脸序列相同
-                    
+
                 case 2502: // 人脸序列
@@ -265,4 +285,4 @@ // console.log(imsgType)
                     var picbuf = socketBA.SliceNewAB(datasize6);
-                    this.app.dispatch('imgInfo',picbuf);
-                    break;                
+                    this.app.dispatch('imgInfo', picbuf);
+                    break;
                 case 2503: // 车辆与车牌信息
@@ -300,5 +320,5 @@ this.osdType = 'carosd';
                     obOsdCar.carnumHei = rectCarNumHeight;
-                    this.app.dispatch('carOsdInfo',obOsdCar);
+                    this.app.dispatch('carOsdInfo', obOsdCar);
                     // this.carNumOsdArr.push(obOsdCar);
-                    break;    
+                    break;
                 case 2801: // 安防的信息框
@@ -320,3 +340,3 @@ this.osdType = 'securityOsd';
                     var securityPointArr = [];
-                    securityOSD.sec = second2801 * 1000 + Math.floor(microseconds2801 / 1000) ;
+                    securityOSD.sec = second2801 * 1000 + Math.floor(microseconds2801 / 1000);
                     // console.log(alarmSize) 
@@ -359,3 +379,3 @@ if (alarmType === 1) {
 
-                        securityOSD.textvalue="A方向："+Anum+"  B方向："+Bnum+"  区域内总数："+num;
+                        securityOSD.textvalue = "A方向：" + Anum + "  B方向：" + Bnum + "  区域内总数：" + num;
                     } else if (alarmType === 4) {
@@ -379,8 +399,8 @@ var ntargetID = securityOsdba.ReadUint32(true);
                         securityPointArr.push(pointSecurity4);
-                    } else if (alarmType === 5){
-                        break ;
+                    } else if (alarmType === 5) {
+                        break;
                     }
 
                     securityOSD.pointArr = securityPointArr;
-                    this.app.dispatch('safeOsdInfo',securityOSD);
+                    this.app.dispatch('safeOsdInfo', securityOSD);
                     // if(securityOSD.pointArr.length>0)
@@ -390,3 +410,3 @@ // this.securityOsdArr.push(securityOSD);
                     break;
-                default :
+                default:
                     console.log(imsgType)
@@ -397,9 +417,9 @@ break;
             this.wholeOffset = 0;
-            this.MergeBuffer(this.whole,e.data);
-            this.packageNum=0;
-        }else{
+            this.MergeBuffer(this.whole, e.data);
+            this.packageNum = 0;
+        } else {
             //如果没满，看当前状态，如果状态正常，合并，如果异常，丢弃
-            if(!this.packageState){
+            if (!this.packageState) {
                 //如果没满又来了第一包
-                if(this.ifFirstPackage(e.data)){
+                if (this.ifFirstPackage(e.data)) {
                     console.log('没满又出了一包,指针回原点')
@@ -449,9 +469,9 @@ // 上一包的情况
                 }
-                this.MergeBuffer(this.whole,e.data);
+                this.MergeBuffer(this.whole, e.data);
                 this.packageNum++;
-            }else{
+            } else {
                 //如果状态异常,判断这个包是不是第一个包
                 return;
             }
-            
+
         }
@@ -464,3 +484,3 @@ }
      */
-    ifError(){
+    ifError() {
 
@@ -473,12 +493,12 @@ }
      */
-    ifFull(){
-        
+    ifFull() {
+
         // if(!this.templateDataQueue || !this.templateDataQueue.byteLength){
         //     return false;
         // }
-        if(!this.wholeOffset){
+        if (!this.wholeOffset) {
             return false;
         }
         // let socketBA = new ByteArray(this.templateDataQueue);
-        let socketBA = new ByteArray(this.whole.buffer,this.wholeOffset)
+        let socketBA = new ByteArray(this.whole.buffer, this.wholeOffset)
         let verbonc = socketBA.ReadUint32();//verbonc
@@ -492,3 +512,3 @@ let company = socketBA.ReadUint32();//company
 
-        if( company !== 1112757248 ){//'BST '
+        if (company !== 1112757248) {//'BST '
             console.log('丢失第一包')
@@ -499,7 +519,7 @@ //this.templateDataQueue = new ArrayBuffer(0);
         }
-        if(socketBA.bytesAvailable<iCmdLen){
+        if (socketBA.bytesAvailable < iCmdLen) {
             return false;
-        }else if(socketBA.bytesAvailable===iCmdLen){
+        } else if (socketBA.bytesAvailable === iCmdLen) {
             return true;
-        }else if(socketBA.bytesAvailable>iCmdLen){
+        } else if (socketBA.bytesAvailable > iCmdLen) {
             //console.warn('中间有丢包',this.packageNum)
@@ -512,4 +532,4 @@ //console.log(socketBA)
         }
-        
 
+
     }
@@ -521,6 +541,6 @@
      */
-    ifFirstPackage(data){
-        if(data.byteLength<28){
+    ifFirstPackage(data) {
+        if (data.byteLength < 28) {
             // console.log('出现了小于28字节的包');
-            return false;            
+            return false;
         }
@@ -532,6 +552,6 @@ // console.log(data)
         let company = socketBA.ReadUint32();//company
-        if( company !== 1112757248 ){//'BST '
-            
+        if (company !== 1112757248) {//'BST '
+
             return false;
-        }else{
+        } else {
             return true;
@@ -547,13 +567,13 @@ }
      */
-    MergeBuffer(whole,arr1){
+    MergeBuffer(whole, arr1) {
         // debugger
         //var sumLength = arr1.byteLength+arr2.byteLength;
-        try{
-            whole.set(new Uint8Array(arr1),this.wholeOffset);
-            this.wholeOffset+= arr1.byteLength;
-        }catch(err){
+        try {
+            whole.set(new Uint8Array(arr1), this.wholeOffset);
+            this.wholeOffset += arr1.byteLength;
+        } catch (err) {
             debugger
         }
 
-        
+
         // whole.set(new Uint8Array(arr2),this.wholeOffset);
@@ -571,3 +591,3 @@ // this.wholeOffset+= arr2.byteLength;
         // }
-        
+
         //return whole.buffer;
@@ -584,2 +604,2 @@ }
 
-export default SocketDataMerge ;
+export default SocketDataMerge;

webpack.config.js

 const path = require('path');
-
+const CopyWebpackPlugin = require('copy-webpack-plugin') 
+const copyPlugin = new CopyWebpackPlugin({
+    patterns:[
+        {
+            from :'./src/h264canvasplayer/libffmpeg_264_265.wasm',
+            
+        }
+    ]
+})
 module.exports = {
@@ -12,10 +20,6 @@ mode:'development',
     },
-    module:{
-        rules:[
-            {
-                test: /\.wasm$/,
-                use:'wasm-loader'
-            }
-        ]
-    }
+    node:{
+        fs:'empty'
+    },
+    plugins:[copyPlugin]
 }

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

10082

increased by63.24%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

2437468

decreased by-10.31%

Number of package files

37

decreased by-2.63%

No dependency changes