bonc-htmlplayer - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

package.json

 {
   "name": "bonc-htmlplayer",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "东方国信的html播放器内核",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

src/h264player/controller/buffer.js

 
 import Event from '../../util/event';
 import { appendByteArray } from '../../util/utils.js';
+import {downloadMp4} from '../../util/utils.js'
+var downloaddata = []
+export function download(){
+    var len = 0
+    downloaddata.forEach(item => {
+        len+= item.byteLength
+    });
+    var file = new Uint8Array(len)
+    var offset = 0 
+    downloaddata.forEach(item => {
+        
+        file.set(item,offset)
+        offset+=item.byteLength
+    });
+    downloadMp4(file.buffer)
+}
 
@@ -36,2 +52,5 @@ export default class BufferController extends Event {
             sourceBuffer = arguments[0];
+            if(!sourceBuffer){
+                return
+            }
             if(sourceBuffer.buffered>0){
@@ -114,5 +133,7 @@ this.rangeStart = sourceBuffer.buffered.end(0);
         try{   
+            
             this.sourceBuffer.appendBuffer(this.queue);
             this.dispatch('bufferAppended',this.type)
             // console.log(this.type)
+            downloaddata.push(this.queue)
             this.queue = new Uint8Array();
@@ -119,0 +140,0 @@ }catch (e){

src/h264player/controller/remux.js

@@ -6,3 +6,3 @@ import { MP4 } from '../../util/mp4-generator.js';
 import Event from '../../util/event';
-
+import localRecorder from '../../util/mp4download/mp4download'
 export default class RemuxController extends Event {
@@ -57,6 +57,9 @@
                         let track = this.tracks[type];
+                        console.log(track.mp4track)
                         let data = {
                             type: type,
+                            isStart:true,
                             payload: MP4.initSegment([track.mp4track], this.mediaDuration, track.mp4track.timescale),
                         };
+
                         this.dispatch('buffer', data);
@@ -114,5 +117,12 @@
                         // moof movie fragment
+                        // console.log(MP4.FTYP)
+                        // console.log('this.videoseg',this.videoseg)
+                        // console.log('track.dts',track.dts)
+                        // console.log('track.mp4track',track.mp4track)
                         const moof = MP4.moof(this.videoseg, track.dts, track.mp4track);
                         // mdat media data container
                         const mdat = MP4.mdat(pay);
+                        if(localRecorder.isRecording){
+                            localRecorder.cache.push(pay)
+                        }
                         let payload = appendByteArray(moof, mdat);
@@ -127,2 +137,3 @@ let data = {
                         //debug.log('封装普通帧');
+                        // 清空track，释放track所占内存空间
                         track.flush();//base.js
@@ -201,3 +212,2 @@ }
     remux(data){
-        
         for (let type of this.trackTypes) {
@@ -204,0 +214,0 @@ let samples = data[type];

src/h264player/player.js

@@ -1,5 +0,7 @@
-import {extractNALubonc}  from './utils'
+import { extractNALubonc } from './utils'
 import RemuxController from './controller/remux.js';
-import BufferController from './controller/buffer.js';
+import BufferController ,{download} from './controller/buffer.js';
 import { NALU } from '../util/nalu.js';
+import localRecorder from '../util/webmdownload/webmdownload'
+// import localRecorder from '../util/mp4download/mp4download'
 
@@ -10,3 +12,3 @@ /**
 class H264Mp4Player {
-    constructor(app){
+    constructor(app) {
         this.app = app;
@@ -29,14 +31,13 @@ let defaults = {
         this.nalsboncarrReverseCachQueue = [];
-        this.nalsbonAudioarr=[];
+        this.nalsbonAudioarr = [];
         this.extractNALubonc = extractNALubonc.bind(this);
         this.remuxController = new RemuxController(true);
-        this.remuxController.on('videoPrepare',this.onVideoPrepared.bind(this));
+        this.remuxController.on('videoPrepare', this.onVideoPrepared.bind(this));
         this.remuxController.addTrack('both');
         this.lastCleaningTime = Date.now();
         this.keyframeCache = [];
-        this.frameCounter  = 0;
+        this.frameCounter = 0;
         this.sourceBuffers = {};
         this.isMSESupported = !!window.MediaSource;
-        if (!this.isMSESupported)
-        {
+        if (!this.isMSESupported) {
             throw 'Oops! Browser does not support media source extension.';
@@ -50,19 +51,25 @@ }
         this.remuxController.on('ready', this.createBuffer.bind(this));
-        this.spsnal=null;
-        this.ppsnal=null;
-        this.spspps=false;
+        this.spsnal = null;
+        this.ppsnal = null;
+        this.spspps = false;
         this.cacheNum = 0;
+        this.recoder = new localRecorder(app)
     }
 
-    onVideoPrepared(){
+    onVideoPrepared() {
         this.app.dispatch('startSuccess')
     }
-    playBuffer(videobuffer){
+    /**
+     * 
+     * @h264帧数据,带起始位和type头 {Uint8Array} videobuffer 
+     */
+    playBuffer(videobuffer) {
+        // 将videobuffer的起始位去掉存到 this.nalsboncarr
         this.extractNALubonc(new Uint8Array(videobuffer));
         this.PlayNals();
-        this.releaseBuffer();    
+        this.releaseBuffer();
         this.clearBuffer();
     }
-    playBfferReverse(videobuffer){
-        
+    playBfferReverse(videobuffer) {
+
         this.extractNALubonc(new Uint8Array(videobuffer));
@@ -72,3 +79,3 @@ // 非关键帧返回 0
         // 只有收到关键帧的时候会 releaseBuffer clearBuffer
-        if(cacheState==1){
+        if (cacheState == 1) {
             this.releaseBuffer();
@@ -78,12 +85,28 @@ this.clearBufferReverse();
     }
-    clearReverseInterval(){
-        if(this.reversePlayInterval){
+    clearReverseInterval() {
+        if (this.reversePlayInterval) {
             clearInterval(this.reversePlayInterval);
         }
     }
+
+    // 开始录像
+    localRecord(){
+        // localRecorder.app = this.app;
+        // localRecorder.localRecord()
+        this.recoder.startRecord()
+    }
+    // 结束录像
+    finishRecord(){
+        // localRecorder.finishRecord()
+        this.recoder.endRecord()
+    }
+    download2 (){
+        download()
+    }
+
     // 倒放的状态
-    playReverse(palyRate=1){
+    playReverse(palyRate = 1) {
         this.app.node.pause();
         var fps = 25 * palyRate; // 每秒多少帧
-        if(this.reversePlayInterval){
+        if (this.reversePlayInterval) {
             clearInterval(this.reversePlayInterval);
@@ -98,3 +121,3 @@ }
         this.timeend = this.app.node.buffered.end(0);
-        this.app.node.currentTime =  this.app.node.buffered.end(0);
+        this.app.node.currentTime = this.app.node.buffered.end(0);
         this.reversePlayInterval = setInterval(() => {
@@ -105,3 +128,3 @@ //console.log(this.app.node.buffered.end(0),this.app.node.buffered.start(0))
             // // if(false){
-                
+
             //     this.currentRange = this.bufferControllers['video'].rangeList.pop()
@@ -117,15 +140,15 @@ //     this.app.node.currentTime = this.currentRange[1];
             // console.log(this.app.node.currentTime,this.currentRange)
-            if(this.app.node.currentTime<this.timeend-2){
+            if (this.app.node.currentTime < this.timeend - 2) {
                 // console.log('在边际')
-                this.app.node.currentTime =  this.app.node.buffered.end(0);
+                this.app.node.currentTime = this.app.node.buffered.end(0);
                 this.timeend = this.app.node.buffered.end(0);
-            }else{
+            } else {
                 // 不在边际            
-                this.app.node.currentTime += -(1/fps); 
+                this.app.node.currentTime += -(1 / fps);
                 // console.log('不在边际')
-                
+
             }
-            
-        }, 1000/fps);
-        console.log(this.reversePlayInterval) ;
+
+        }, 1000 / fps);
+        console.log(this.reversePlayInterval);
     }
@@ -135,7 +158,7 @@ /**
      */
-    createBuffer(){
+    createBuffer() {
         if (!this.mseReady || !this.remuxController || !this.remuxController.isReady() || this.bufferControllers) return;
         this.bufferControllers = {};
 
-        for (let type in this.remuxController.tracks){
+        for (let type in this.remuxController.tracks) {
             let track = this.remuxController.tracks[type];
@@ -145,12 +168,12 @@
 
-            if(type=='audio'){
-                if(this.remuxController.hasAudio==false) return;
-                let audioCodec ='audio/mp4; codecs='+'mp4a.40.' + 2;
+            if (type == 'audio') {
+                if (this.remuxController.hasAudio == false) return;
+                let audioCodec = 'audio/mp4; codecs=' + 'mp4a.40.' + 2;
                 sb = this.mediaSource.addSourceBuffer(audioCodec);
-            }else{
+            } else {
                 // debugger
                 sb = this.mediaSource.addSourceBuffer(`${type}/mp4; codecs="${track.mp4track.codec}"`);
             }
-            sb.mode ='sequence'
-            this.bufferControllers[type] = new BufferController(sb,type,this.app.node);
+            sb.mode = 'sequence'
+            this.bufferControllers[type] = new BufferController(sb, type, this.app.node);
             this.sourceBuffers[type] = sb;
@@ -163,7 +186,12 @@ this.bufferControllers[type].on('error', this.onBufferError.bind(this));
         }
+    }
+    onBuffer(data) {
+        if(data.isStart){
+            this.startPayload = data.payload;
+        }
+        // if(){
+
+        // }
         
-    }
-    onBuffer(data){
-        if (this.bufferControllers && this.bufferControllers[data.type])
-        {
+        if (this.bufferControllers && this.bufferControllers[data.type]) {
             this.bufferControllers[data.type].feed(data.payload);
@@ -193,10 +221,10 @@ }
      */
-    destroy(){
+    destroy() {
         if (this.mediaSource) {
             try {
-                if (this.bufferControllers){
+                if (this.bufferControllers) {
                     let SBs = this.mediaSource.sourceBuffers;
-                    if (SBs.length>0 && SBs[0].updating===false && this.mediaSource.readyState === 'open'){
-                       this.mediaSource.endOfStream();
-                       this.mediaSource.removeSourceBuffer(SBs[0]);
+                    if (SBs.length > 0 && SBs[0].updating === false && this.mediaSource.readyState === 'open') {
+                        this.mediaSource.endOfStream();
+                        this.mediaSource.removeSourceBuffer(SBs[0]);
                     }
@@ -224,7 +252,7 @@ }
 
- /*-------------------------------内部方法--------------------------------------  */   
-    
+    /*-------------------------------内部方法--------------------------------------  */
+
     setupMSE() {
-        if(!window.MediaSource) {
-            throw '当前浏览器不支持视频'; 
+        if (!window.MediaSource) {
+            throw '当前浏览器不支持视频';
         }
@@ -253,18 +281,15 @@ this.mediaSource = new MediaSource();
     }
-    PlayNals(){
-        var nalarr=[];
-        var nal=this.nalsboncarr.shift();
-        var nalType=nal[0] & 0x1f;
+    PlayNals() {
+        var nalarr = [];
+        var nal = this.nalsboncarr.shift();
+        var nalType = nal[0] & 0x1f;
         //debug.log('nalType==',nalType);
-        if(this.spspps===false)
-        {
-            if(nalType==7)
-            {
-                this.spsnal=nal;
+        if (this.spspps === false) {
+            if (nalType == 7) {
+                this.spsnal = nal;
                 //debug.log('找到sps=');
                 return;
             }
-            else if(nalType==8)
-            {
-                this.ppsnal=nal;
+            else if (nalType == 8) {
+                this.ppsnal = nal;
                 //debug.log('找到pps=');
@@ -274,11 +299,10 @@ return;
 
-            if(this.spsnal!=null && this.ppsnal!=null)
-            {
+            if (this.spsnal != null && this.ppsnal != null) {
                 nalarr.push(this.spsnal);
                 nalarr.push(this.ppsnal);
                 nalarr.push(nal);
-                this.spspps=true;
+                this.spspps = true;
             }
 
-            if(this.spspps==false) {
+            if (this.spspps == false) {
                 // console.log(nalType)
@@ -288,7 +312,5 @@ return;
         }
-        else
-        {
-            if(nalType!=7 && nalType!=8 )
-            {
-                nalarr.push(nal);
+        else {
+            if (nalType != 7 && nalType != 8) {
+                nalarr.push(nal); // 过滤出不是pps和sps的帧
             }
@@ -302,10 +324,9 @@ }
 
-        if(this.nalsbonAudioarr.length>0)
-        {
+        if (this.nalsbonAudioarr.length > 0) {
             // debugger
-            let arr=[];
+            let arr = [];
             arr.push(this.nalsbonAudioarr.shift());
-            chunks.audio=arr;
+            chunks.audio = arr;
 
-            this.remuxController.hasAudio=true;
+            this.remuxController.hasAudio = true;
         }
@@ -315,3 +336,3 @@
         chunks.video = this.getVideoFrames(nalarr, 0);
-        if(chunks.video.length===0){
+        if (chunks.video.length === 0) {
             return
@@ -321,18 +342,15 @@ }
     }
-    PlayNalsReverse(){
-        
-        var nal=this.nalsboncarr.shift();
-        var nalType=nal[0] & 0x1f;
+    PlayNalsReverse() {
+
+        var nal = this.nalsboncarr.shift();
+        var nalType = nal[0] & 0x1f;
         //debug.log('nalType==',nalType);
-        if(this.spspps===false)
-        {
-            if(nalType==7)
-            {
-                this.spsnal=nal;
+        if (this.spspps === false) {
+            if (nalType == 7) {
+                this.spsnal = nal;
                 //debug.log('找到sps=');
                 return;
             }
-            else if(nalType==8)
-            {
-                this.ppsnal=nal;
+            else if (nalType == 8) {
+                this.ppsnal = nal;
                 //debug.log('找到pps=');
@@ -342,11 +360,10 @@ return;
 
-            if(this.spsnal!=null && this.ppsnal!=null)
-            {
+            if (this.spsnal != null && this.ppsnal != null) {
                 nalarr.push(this.spsnal);
                 nalarr.push(this.ppsnal);
                 nalarr.push(nal);
-                this.spspps=true;
+                this.spspps = true;
             }
 
-            if(this.spspps==false) {
+            if (this.spspps == false) {
                 console.log(nalType)
@@ -356,22 +373,20 @@ return;
         }
-        else
-        {
-            if(nalType!=7 && nalType!=8)
-            {
-                if(nalType==1){
+        else {
+            if (nalType != 7 && nalType != 8) {
+                if (nalType == 1) {
                     // 非关键帧
                     this.nalsboncarrReverseCachQueue.unshift(nal);
                     return 0
-                }else if(nalType==5){
+                } else if (nalType == 5) {
                     // 关键帧
                     this.nalsboncarrReverseCachQueue.unshift(nal);
-                    this.cacheNum++ ;
-                    if(this.cacheNum>1){
+                    this.cacheNum++;
+                    if (this.cacheNum > 1) {
                         this.cacheNum = 0;
                         return 1;
-                    }else{
+                    } else {
                         return 0;
                     }
                 }
-                
+
             }
@@ -387,3 +402,3 @@ }
         chunks.video = this.getVideoFrames(this.nalsboncarrReverseCachQueue, 0);
-        if(chunks.video.length===0){
+        if (chunks.video.length === 0) {
             return
@@ -393,8 +408,8 @@ }
         this.nalsboncarrReverseCachQueue = [];
-    }    
-    
+    }
+
     /**
      * 对每个bufferController执行doAppend()方法
      */
-    releaseBuffer(){
+    releaseBuffer() {
         for (let type in this.bufferControllers) {
@@ -405,44 +420,44 @@ this.bufferControllers[type].doAppend();
 
-    clearBuffer(){
-        if (this.app.node.buffered.length > 0){
-            
+    clearBuffer() {
+        if (this.app.node.buffered.length > 0) {
+
             let bufferLength = this.app.node.buffered.end(0) - this.app.node.currentTime;
-            this.bufferControllers['video'].rangeList = this.bufferControllers['video'].rangeList.filter((item)=>{
+            this.bufferControllers['video'].rangeList = this.bufferControllers['video'].rangeList.filter((item) => {
                 // console.log(item[1], this.app.node.currentTime, item[1] - this.app.node.currentTime)
                 return item[1] > this.app.node.currentTime;
             })
-            if(bufferLength>0 && bufferLength<3){
+            if (bufferLength > 0 && bufferLength < 3) {
                 this.app.node.play();
                 this.app.node.playbackRate = 1;
             }
-            else if(bufferLength>2 && bufferLength<=3){
+            else if (bufferLength > 2 && bufferLength <= 3) {
                 this.app.node.playbackRate = 1;
-                
+
             }
-            else if(bufferLength>3 && bufferLength<=5){
+            else if (bufferLength > 3 && bufferLength <= 5) {
                 this.app.node.playbackRate = 1.25;
                 // console.log('加速=1.25');
             }
-            else if(bufferLength>5 && bufferLength<=7){
+            else if (bufferLength > 5 && bufferLength <= 7) {
                 this.app.node.playbackRate = 2;
                 // console.log('加速=2');
             }
-            else if(bufferLength>7 && bufferLength<=9){
-                
+            else if (bufferLength > 7 && bufferLength <= 9) {
+
                 this.app.node.playbackRate = 4;
                 // console.log('加速=4',bufferLength);
-            }else if(bufferLength>9 && bufferLength<=11){
+            } else if (bufferLength > 9 && bufferLength <= 11) {
                 this.app.node.playbackRate = 5;
                 // console.log('加速=5',bufferLength);
-            }else if(bufferLength>11 && bufferLength<=14){
+            } else if (bufferLength > 11 && bufferLength <= 14) {
                 this.app.node.playbackRate = 6;
                 // console.log('加速=6',bufferLength);
-            }else if(bufferLength>14 && bufferLength<=16){
+            } else if (bufferLength > 14 && bufferLength <= 16) {
                 this.app.node.playbackRate = 7;
                 // console.log('加速=7',bufferLength);
-            }else if(bufferLength>16 && bufferLength<=20){
+            } else if (bufferLength > 16 && bufferLength <= 20) {
                 this.app.node.playbackRate = 8;
                 // console.log('加速=8',bufferLength);
-            }else if(bufferLength>20){
-                this.app.node.playbackRate = 15                                                                                    ;
+            } else if (bufferLength > 20) {
+                this.app.node.playbackRate = 15;
                 // console.log('加速=16',bufferLength);
@@ -453,4 +468,4 @@ }
 
-        if (this.options.clearBuffer && (Date.now() - this.lastCleaningTime) > 3000){
-            for (let type in this.bufferControllers){
+        if (this.options.clearBuffer && (Date.now() - this.lastCleaningTime) > 3000) {
+            for (let type in this.bufferControllers) {
                 let cleanMaxLimit = this.getSafeBufferClearLimit(this.app.node.currentTime);
@@ -462,9 +477,9 @@ this.bufferControllers[type].initCleanup(cleanMaxLimit);
     }
-    
+
     // 倒放的时候清理过多的buffer
-    clearBufferReverse(){
+    clearBufferReverse() {
         // let bufferLength =  - this.app.node.currentTime-this.app.node.buffered.start(0)
         // console.log(bufferLength);
-        if (this.options.clearBuffer && (Date.now() - this.lastCleaningTime) > 3000){
-            for (let type in this.bufferControllers){
+        if (this.options.clearBuffer && (Date.now() - this.lastCleaningTime) > 3000) {
+            for (let type in this.bufferControllers) {
                 let cleanMaxLimit = this.getSafeBufferClearLimit(this.app.node.currentTime);
@@ -482,3 +497,3 @@ this.bufferControllers[type].initCleanup(cleanMaxLimit);
     */
-    getVideoFrames(nalus, duration){
+    getVideoFrames(nalus, duration) {
         let nalu,
@@ -492,3 +507,3 @@ units = [],
 
-        for (nalu of nalus){
+        for (nalu of nalus) {
             naluObj = new NALU(nalu);
@@ -498,11 +513,8 @@ // debug.log('帧类型='+naluObj.type());
             // NALU.IDR 5关键帧    NALU.NDR 1非关键帧
-            if (naluObj.type() === NALU.IDR || naluObj.type() === NALU.NDR)
-            {
+            if (naluObj.type() === NALU.IDR || naluObj.type() === NALU.NDR) {
                 // console.log(naluObj.type())
-                samples.push({units});
+                samples.push({ units });
                 units = [];
-                if (this.options.clearBuffer)
-                {
-                    if (naluObj.type() === NALU.IDR)
-                    {
+                if (this.options.clearBuffer) {
+                    if (naluObj.type() === NALU.IDR) {
                         numberOfFrames.push(this.frameCounter);
@@ -513,4 +525,4 @@ }
             }
-        } 
-        
+        }
+
         if (duration) {
@@ -551,3 +563,3 @@ sampleDuration = duration / samples.length | 0;
         if (adjacentOffset) {
-            this.keyframeCache = this.keyframeCache.filter( keyframePoint => {
+            this.keyframeCache = this.keyframeCache.filter(keyframePoint => {
                 if (keyframePoint < adjacentOffset) {
@@ -559,3 +571,3 @@ maxLimit = keyframePoint;
         }
-        
+
         return maxLimit;
@@ -562,0 +574,0 @@ }

src/index.js

@@ -223,6 +223,18 @@ import Event from './util/event';
 
+    startRecord(){
+        try{
+            this._player.localRecord()
+        }catch(err){
+            // this._player.isRecording = false;
+        }
+    }
+    finishRecord(){
+        this._player.finishRecord()
+    }
+
     /**
      * 关闭视频（主动关闭视频）
      */
-    closeVideo(reason){
+    closeVideo(reason='normal'){
+        if(!this.webSocketController.boncws) return;
         this.webSocketController.boncws.normalClose(reason);
@@ -234,2 +246,3 @@ clearInterval(this.webSocketController.heartLiveInterval)
         this._player=null;
+        this.currentTime = null;
         switch(this.configs.playerClassName){
@@ -299,2 +312,3 @@ case 'H264CanvasPlayer':
         if(this.currentTime){
+            console.log(new Date(this.currentTime))
             var playxml = xmlPlayControl;
@@ -413,4 +427,2 @@ var playxmlBody = BLoadXML(playxml);
     
-    
-
     videoBufferAdd(videoBuffer){
@@ -417,0 +429,0 @@ //this.H264Mp4Player.playBuffer(videoBuffer);

src/util/mp4-generator.js

@@ -91,5 +91,5 @@ /**
             0x00, 0x00, 0x00, // flags
-            0x00, 0x00, 0x00, 0x01, // entry_count
-            0x00, 0x00, 0x00, 0x0c, // entry_size
-            0x75, 0x72, 0x6c, 0x20, // 'url' type
+            0x00, 0x00, 0x00, 0x01, // entry_count 
+            0x00, 0x00, 0x00, 0x0c, // entry_size  
+            0x75, 0x72, 0x6c, 0x20, // 'url ' type
             0x00, // version 0
@@ -142,3 +142,3 @@ 0x00, 0x00, 0x01, // entry_flags
     static box(type, ...payload) {
-        var size = 8,
+        var size = 8, //8位的头，前4字节是size ，后4字节是类型
             i = payload.length,
@@ -152,2 +152,3 @@ len = i,
         result = new Uint8Array(size);
+        // 将size这个数字用4个字节存储
         result[0] = (size >> 24) & 0xff;
@@ -157,2 +158,3 @@ result[1] = (size >> 16) & 0xff;
         result[3] = size & 0xff;
+        // 将type存入
         result.set(type, 4);
@@ -236,2 +238,3 @@ // copy the payload into the result
 
+
     static mvex(tracks) {
@@ -238,0 +241,0 @@ var

src/util/nalu.js

 export class NALU {
 
-    static get NDR() { return 1; }
-    static get IDR() { return 5; }
-    static get SEI() { return 6; }
-    static get SPS() { return 7; }
-    static get PPS() { return 8; }
-    static get AUD() { return 9; }
+    static get NDR() { return 1; } // 非关键帧
+    static get IDR() { return 5; } // 关键帧
+    static get SEI() { return 6; } // 补充增强信息单元（SEI）
+    static get SPS() { return 7; } // 序列参数集
+    static get PPS() { return 8; } // 图像参数集
+    static get AUD() { return 9; } // 分解符
 
@@ -31,4 +31,11 @@ static get TYPES() {
         this.payload = data;
-        this.nri = (this.payload[0] & 0x60) >> 5;
-        this.ntype = this.payload[0] & 0x1f;
+        /**
+         * nal单元（nalu）的头站1个字节（8个二进制位），也就是1个uint8，
+         * 第一位是0，称为  forbidden_zero_bit
+         * 第二、三取值0-3，取值越大，表示该nal越重要（nri）
+         * 第四到第八为nal类型（5位）
+         */
+        
+        this.nri = (this.payload[0] & 0x60) >> 5; // 取第2位和第3位，所以要与0x60（01100000）后再右移5位，
+        this.ntype = this.payload[0] & 0x1f; // 取第4位到第8位（5位）  1f 为 11111，所以要与1f
     }
@@ -35,0 +42,0 @@

src/util/SocketDataMerge.js

@@ -106,3 +106,3 @@ import ByteArray from './ByteArray' ;
             }            
-
+            // console.log(imsgType)
             switch(imsgType){
@@ -123,2 +123,3 @@ case 1603: // 视频数据
                     var timePoint = biXPelsPerMeter*1000 + Math.floor(biYPelsPerMeter/1000);
+                    
                     if(!this.start){                        
@@ -153,2 +154,3 @@ this.app.videoHeight = biHeight;
                 case 1604:
+                    console.log('1604')
                     // var audioSize=socketBA.ReadUint32();
@@ -155,0 +157,0 @@ // var audioSampleRate=socketBA.ReadUint32();

src/util/utils.js

@@ -197,1 +197,21 @@ export function appendByteArray(buffer1, buffer2)
 }
+
+/**
+ * 
+ * @param {Buffer} file 二进制的buffer
+ */
+export function downloadMp4 (file) {
+    let blob = new Blob([file], {
+        type: "text/plain;base64"
+    });
+    let reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onload = function (e) {
+        let a = document.createElement('a');
+        a.download = 'filename.mp4';
+        a.href = e.target.result;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+}

src/util/WebSocketUtil.js

@@ -9,3 +9,3 @@ import {xmlHeader,xmlHeartBody,xmlCloseBody} from './orderList';
     this.closeReason = reason || 'normal';
-    this.close(3001,'abc');
+    this.close(3001,this.closeReason);
     // console.time('close')
@@ -39,3 +39,3 @@ // console.log('close 方法已执行')
         this.socketDataMerge = new SocketDataMerge(this.app);
-        this.closed = true;
+        this.closed = false;
         this.finishSearch = false ;
@@ -57,2 +57,3 @@ this.WebSocketOpen  = this.WebSocketOpen.bind(this);
         if(type==='playback'){
+            this.type = type
             if(this.boncws!==null){
@@ -198,3 +199,3 @@ if(this.boncws.readyState==1){
         // console.timeEnd('close')
-        //console.log(this.socketDataMerge.videoDataQueue)
+        // console.log(this.socketDataMerge.videoDataQueue)
         if(this.boncws.closeReason==='normal'){
@@ -207,3 +208,3 @@ console.log('normal')//正常关闭
             this.boncws.removeEventListener('close',this.WebSocketClose);
-            
+            console.log('websocket端口成功')
         }else if(this.boncws.closeReason==='change'){
@@ -224,2 +225,3 @@ //因某些原因需要关闭
             setTimeout(() => {
+                console.log('websocket 重新连接' , this.type)
                 this.WebSocketInit();
@@ -325,7 +327,8 @@ }, 2000);
                 }catch(err){
-                    debugger;
+                    // debugger;
+                    console.log(err)
                 }
                 
             }
-        }, 30000);
+        }, 20000);
     }
@@ -332,0 +335,0 @@ handleError(e){

No alert changes

Improved metrics

Number of package files

42

increased by5%

Lines of code

5943

increased by4.56%

Worsened metrics

Total package byte prevSize

2705497

decreased by-1.57%

No dependency changes