bonc-htmlplayer - npm Package Compare versions

Comparing version 1.0.23 to 1.0.24

package.json

 {
   "name": "bonc-htmlplayer",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "东方国信的html播放器内核",
@@ -5,0 +5,0 @@ "main": "./dist/BoncH5Player.js",

src/h264canvasplayer/player.js

@@ -9,2 +9,3 @@ // import './libffmpeg_264_265.js';
 
+
 class H265CanvasPlayer {
@@ -50,86 +51,54 @@ constructor(app, option) {
         // import('./libffmpeg_264_265.js').then(res=>{})
-        self.Module = {
-            locateFile: function (wasm) {
-              return  wasm;
-            }
-        }
-        var scriptNode = document.createElement('script')
-        scriptNode.src = './libffmpeg_264_265.js'
-        document.querySelector('body').appendChild(scriptNode)
         
-            Module.onRuntimeInitialized = () => {
-            var _this = this
-            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++) {
-                    let src = addr_y + i * stride_y
-                    let tmp = Module.HEAPU8.subarray(src, src + width)
-                    tmp = new Uint8Array(tmp)
-                    data.set(tmp, pos)
-                    pos += tmp.length
-                }
-                for (let i = 0; i < height / 2; i++) {
-                    let src = addr_u + i * stride_u
-                    let tmp = Module.HEAPU8.subarray(src, src + width / 2)
-                    tmp = new Uint8Array(tmp)
-                    data.set(tmp, pos)
-                    pos += tmp.length
-                }
-                for (let i = 0; i < height / 2; i++) {
-                    let src = addr_v + i * stride_v
-                    let tmp = Module.HEAPU8.subarray(src, src + width / 2)
-                    tmp = new Uint8Array(tmp)
-                    data.set(tmp, pos)
-                    pos += tmp.length
-                }
-                var obj = {
-                    data: data,
-                    width,
-                    height
-                }
-                // 处理音频
-                if (!this.isStart) {
-                    this.isStart = true;
-                    this.app.dispatch('startSuccess')
-                }
-                _this.displayVideoFrame(obj);
-            })
-            this.modulestart = Module._openDecoder(1, this.videoCallback, 0)
-        }
-        
-        
+
+
     }
 
 
-        handleAudio() {
-            this.audioPlayer.loadNextBuffer(this.bufferArray)
+    handleAudio() {
+        this.audioPlayer.loadNextBuffer(this.bufferArray)
+    }
+    playBuffer(videoBuffer) {
+        // debugger
+        if (this.modulestart !== 0) {
+            return
         }
-        playBuffer(videoBuffer) {
-            // debugger
-            if (this.modulestart !== 0) {
-                return
+        // console.log(videoBuffer)
+        // var typedArray = new Uint8Array(videoBuffer);
+        var h265Buffer = new ByteArray(videoBuffer)
+        h265Buffer.offset += 4
+        var nalu = h265Buffer.ReadUint16()
+        // F位 
+        var F = nalu >> 15
+        // console.log('F', F)
+        // naltype
+        var naltype = (nalu >> 9) & 127
+        // console.log('naltype', naltype)
+        /**
+        1 NAL_UNIT_CODED_SLICE_TRAIL_R
+        19 NAL_UNIT_CODED_SLICE_IDR
+        32 NAL_UNIT_VPS
+        33 NAL_UNIT_SPS
+        34 NAL_UNIT_PPS
+        39 NAL_UNIT_SEI
+         */
+        // 如果已经初始化并且是关键帧或非关键帧
+        if (this.initialized && (naltype == 1 || naltype == 19)) {
+            try {
+                var typedArray = new Uint8Array(videoBuffer);
+                var size = typedArray.length;
+                var cacheBuffer = Module._malloc(size);
+                Module.HEAPU8.set(typedArray, cacheBuffer);
+                var ret = Module._decodeData(cacheBuffer, size, this.pts++, 1);
+            } catch(e) {
+                console.log(e)
             }
-            // console.log(videoBuffer)
-            // var typedArray = new Uint8Array(videoBuffer);
-            var h265Buffer = new ByteArray(videoBuffer)
-            h265Buffer.offset += 4
-            var nalu = h265Buffer.ReadUint16()
-            // F位 
-            var F = nalu >> 15
-            // console.log('F', F)
-            // naltype
-            var naltype = (nalu >> 9) & 127
-            // console.log('naltype', naltype)
-            /**
-            1 NAL_UNIT_CODED_SLICE_TRAIL_R
-            19 NAL_UNIT_CODED_SLICE_IDR
-            32 NAL_UNIT_VPS
-            33 NAL_UNIT_SPS
-            34 NAL_UNIT_PPS
-            39 NAL_UNIT_SEI
-             */
-            // 如果已经初始化并且是关键帧或非关键帧
-            if (this.initialized && (naltype == 1 || naltype == 19)) {
+            if (cacheBuffer != null) {
+                Module._free(cacheBuffer);
+                cacheBuffer = null;
+            }
+        } else if (naltype !== 1 && naltype != 19) {
+            // 如果没有初始化 并且不是关键帧或非关键帧
+            if (!this.naltypeObj[naltype]) {
+                this.naltypeObj[naltype] = true
                 try {
@@ -141,3 +110,5 @@ var typedArray = new Uint8Array(videoBuffer);
                     var ret = Module._decodeData(cacheBuffer, size, this.pts++, 1);
-                } catch { }
+                } catch (e){
+                    console.log(e)
+                }
                 if (cacheBuffer != null) {
@@ -147,73 +118,116 @@ Module._free(cacheBuffer);
                 }
-            } else if (naltype !== 1 && naltype != 19) {
-                // 如果没有初始化 并且不是关键帧或非关键帧
-                if (!this.naltypeObj[naltype]) {
-                    this.naltypeObj[naltype] = true
-                    try {
-                        var typedArray = new Uint8Array(videoBuffer);
-                        var size = typedArray.length;
-                        var cacheBuffer = Module._malloc(size);
-                        Module.HEAPU8.set(typedArray, cacheBuffer);
-                        var ret = Module._decodeData(cacheBuffer, size, this.pts++, 1);
-                    } catch { }
-                    if (cacheBuffer != null) {
-                        Module._free(cacheBuffer);
-                        cacheBuffer = null;
-                    }
-                }
-                if (Object.keys(this.naltypeObj).length == 4) {
-                    this.initialized = true
-                }
             }
-            // console.log(nalu)
-            // debugger
-            // var size = typedArray.length;
-            // var cacheBuffer = Module._malloc(size);
-            // Module.HEAPU8.set(typedArray, cacheBuffer);
-            // // console.time('decode')
-
-            // if(size < CHUNK_SIZE) {
-            //     console.log('Flush frame data')
-            //     Module._flushDecoder();
-            //     Module._closeDecoder();
-            // }
+            if (Object.keys(this.naltypeObj).length == 4) {
+                this.initialized = true
+            }
         }
+        // console.log(nalu)
+        // debugger
+        // var size = typedArray.length;
+        // var cacheBuffer = Module._malloc(size);
+        // Module.HEAPU8.set(typedArray, cacheBuffer);
+        // // console.time('decode')
 
-        displayVideoFrame(obj) {
-            var data = new Uint8Array(obj.data);
-            var width = obj.width;
-            var height = obj.height;
-            var yLength = width * height;
-            var uvLength = (width / 2) * (height / 2);
-            if (!this.webglPlayer) {
-                const canvasId = this.canvasId;
-                var canvas = document.getElementById(canvasId);
-                this.webglPlayer = new WebGLPlayer(canvas, {
-                    preserveDrawingBuffer: true
-                });
-            }
-            this.webglPlayer.renderFrame(data, width, height, yLength, uvLength);
+        // if(size < CHUNK_SIZE) {
+        //     console.log('Flush frame data')
+        //     Module._flushDecoder();
+        //     Module._closeDecoder();
+        // }
+    }
+
+    displayVideoFrame(obj) {
+        var data = new Uint8Array(obj.data);
+        var width = obj.width;
+        var height = obj.height;
+        var yLength = width * height;
+        var uvLength = (width / 2) * (height / 2);
+        if (!this.webglPlayer) {
+            const canvasId = this.canvasId;
+            var canvas = document.getElementById(canvasId);
+            this.webglPlayer = new WebGLPlayer(canvas, {
+                preserveDrawingBuffer: true
+            });
         }
+        this.webglPlayer.renderFrame(data, width, height, yLength, uvLength);
+    }
 
-        localRecord(name) {
-            this.recoder.startRecord(name)
+    localRecord(name) {
+        this.recoder.startRecord(name)
+    }
+    finishRecord() {
+        this.recoder.endRecord();
+    }
+    destroy() {
+        // 清除画布
+        console.log('h265主动销毁')
+        this.webglPlayer && this.webglPlayer.clear();
+        this.app.node = null
+        this.isStart = false;
+        Module._closeDecoder()
+        // this.modulestart
+    }
+    muted() {
+        this.audioPlayer.audioNode.muted = !this.audioPlayer.audioNode.muted;
+        return this.audioPlayer.audioNode.muted;
+    }
+    setVolume(volume) {
+        this.audioPlayer.audioNode.volume = volume;
+    }
+}
+
+
+
+self.Module = {
+    locateFile: function (wasm) {
+        return wasm;
+    }
+}
+var scriptNode = document.createElement('script')
+scriptNode.src = './libffmpeg_264_265.js'
+document.querySelector('body').appendChild(scriptNode)
+
+Module.onRuntimeInitialized = () => {
+
+    self.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++) {
+            let src = addr_y + i * stride_y
+            let tmp = Module.HEAPU8.subarray(src, src + width)
+            tmp = new Uint8Array(tmp)
+            data.set(tmp, pos)
+            pos += tmp.length
         }
-        finishRecord() {
-            this.recoder.endRecord();
+        for (let i = 0; i < height / 2; i++) {
+            let src = addr_u + i * stride_u
+            let tmp = Module.HEAPU8.subarray(src, src + width / 2)
+            tmp = new Uint8Array(tmp)
+            data.set(tmp, pos)
+            pos += tmp.length
         }
-        destroy() {
-            // 清除画布
-            this.webglPlayer && this.webglPlayer.clear();
-            this.isStart = false;
-            // this.modulestart
+        for (let i = 0; i < height / 2; i++) {
+            let src = addr_v + i * stride_v
+            let tmp = Module.HEAPU8.subarray(src, src + width / 2)
+            tmp = new Uint8Array(tmp)
+            data.set(tmp, pos)
+            pos += tmp.length
         }
-        muted() {
-            this.audioPlayer.audioNode.muted = !this.audioPlayer.audioNode.muted;
-            return this.audioPlayer.audioNode.muted;
+        var obj = {
+            data: data,
+            width,
+            height
         }
-        setVolume(volume) {
-            this.audioPlayer.audioNode.volume = volume;
+        // 处理音频
+        if (!this.isStart) {
+            this.isStart = true;
+            this.app.dispatch('startSuccess')
         }
-    }
+        _this.displayVideoFrame(obj);
+    })
+    this.modulestart = Module._openDecoder(1, this.videoCallback, 0)
+}
 
-    export default H265CanvasPlayer
+
+
+export default H265CanvasPlayer

src/h264player/controller/buffer.js

@@ -124,4 +124,4 @@
         }catch (e){
-            debugger
-            console.log(e,this.type)
+            // debugger
+            console.log(e,this.type,this.videoNode.id,e.name)
             if (e.name === 'QuotaExceededError'){
@@ -131,2 +131,5 @@ console.error(`${this.type} buffer quota full`);
                 return;
+            }else if(e.name ==='InvalidStateError'){
+                this.dispatch('restart')
+                return
             }
@@ -133,0 +136,0 @@ //debug.error(`Error occured while appending ${this.type} buffer -  ${e.name}: ${e.message}`);

src/h264player/player.js

@@ -157,15 +157,17 @@ import { extractNALubonc } from './utils'
         for (let type in this.remuxController.tracks) {
-            let track = this.remuxController.tracks[type];
+            // let track = this.remuxController.tracks[type];
 
-            let sb;
+            // let sb;
 
-            if (type == 'audio') {
-                if (this.remuxController.hasAudio == false) return;
-                let audioCodec = 'audio/mp4; codecs=' + 'mp4a.40.' + 2;
-                sb = this.mediaSource.addSourceBuffer(audioCodec);
-            } else {
-                // debugger
-                sb = this.mediaSource.addSourceBuffer(`${type}/mp4; codecs="${track.mp4track.codec}"`);
-            }
-            sb.mode = 'sequence'
+            // if (type == 'audio') {
+            //     if (this.remuxController.hasAudio == false) return;
+            //     let audioCodec = 'audio/mp4; codecs=' + 'mp4a.40.' + 2;
+            //     sb = this.mediaSource.addSourceBuffer(audioCodec);
+            // } else {
+            //     // debugger
+            //     sb = this.mediaSource.addSourceBuffer(`${type}/mp4; codecs="${track.mp4track.codec}"`);
+            // }
+            // sb.mode = 'sequence'
+            var sb = this.addSourceBuffer(type)
+            if(!sb) return
             this.bufferControllers[type] = new BufferController(sb, type, this.app.node);
@@ -177,2 +179,16 @@ this.sourceBuffers[type] = sb;
     }
+    addSourceBuffer(type){
+        
+        var sb
+        let track = this.remuxController.tracks[type];
+        if (type == 'audio') {
+            if (this.remuxController.hasAudio == false) return;
+            let audioCodec = 'audio/mp4; codecs=' + 'mp4a.40.' + 2;
+            sb = this.mediaSource.addSourceBuffer(audioCodec);
+        } else {
+            // debugger
+            sb = this.mediaSource.addSourceBuffer(`${type}/mp4; codecs="${track.mp4track.codec}"`);
+        }
+        return sb
+    }
     onBuffer(data) {
@@ -195,2 +211,7 @@ if(data.isStart){
             this.mediaSource.removeSourceBuffer(this.sourceBuffers[data.type]);
+            // 重新把buffer填上
+            var sb = this.addSourceBuffer(data.type);
+            this.bufferControllers[type] = new BufferController(sb, type, this.app.node);
+            this.sourceBuffers[type] = sb;
+            this.bufferControllers[type].on('error', this.onBufferError.bind(this));
         }
@@ -406,5 +427,5 @@ if (this.mediaSource.sourceBuffers.length == 0) {
             if(bufferLength<0){
-                console.log('this.app.node.buffered.end(0)',this.app.node.buffered.end(0))
-                console.log('this.app.node.currentTime',this.app.node.currentTime)
-                console.log('播超了')
+                // console.log('this.app.node.buffered.end(0)',this.app.node.buffered.end(0))
+                // console.log('this.app.node.currentTime',this.app.node.currentTime)
+                // console.log('播超了')
                 this.app.node.pause();   
@@ -422,2 +443,3 @@ }
                 this.app.node.playbackRate = 1.25;
+                this.app.node.play();
                 // console.log('加速=1.25');
@@ -427,24 +449,31 @@ }
                 this.app.node.playbackRate = 2;
+                this.app.node.play();
                 // console.log('加速=2');
-            }
-            else if (bufferLength > 7 && bufferLength <= 9) {
-
+            }else if (bufferLength > 7 && bufferLength <= 9) {
                 this.app.node.playbackRate = 4;
+                this.app.node.play();
                 // console.log('加速=4',bufferLength);
-            } else if (bufferLength > 9 && bufferLength <= 11) {
-                this.app.node.playbackRate = 5;
-                // console.log('加速=5',bufferLength);
-            } else if (bufferLength > 11 && bufferLength <= 14) {
-                this.app.node.playbackRate = 6;
-                // console.log('加速=6',bufferLength);
-            } else if (bufferLength > 14 && bufferLength <= 16) {
-                this.app.node.playbackRate = 7;
-                // console.log('加速=7',bufferLength);
-            } else if (bufferLength > 16 && bufferLength <= 20) {
-                this.app.node.playbackRate = 8;
-                // console.log('加速=8',bufferLength);
-            } else if (bufferLength > 20) {
-                this.app.node.playbackRate = 15;
-                // console.log('加速=16',bufferLength);
+            }else if(bufferLength>9){
+                this.app.node.currentTime = this.app.node.buffered.end(0)-2
             }
+            // else if (bufferLength > 9 && bufferLength <= 11) {
+            //     this.app.node.playbackRate = 5;
+            //     this.app.node.play();
+            //     // console.log('加速=5',bufferLength);
+            // } else if (bufferLength > 11 && bufferLength <= 14) {
+            //     this.app.node.playbackRate = 6;
+            //     this.app.node.play();
+            //     // console.log('加速=6',bufferLength);
+            // } else if (bufferLength > 14 && bufferLength <= 16) {
+            //     this.app.node.playbackRate = 7;
+            //     // console.log('加速=7',bufferLength);
+            // } else if (bufferLength > 16 && bufferLength <= 20) {
+            //     this.app.node.playbackRate = 8;
+            //     // console.log('加速=8',bufferLength);
+            //     this.app.node.play();
+            // } else if (bufferLength > 20) {
+            //     this.app.node.playbackRate = 15;
+            //     // console.log('加速=16',bufferLength);
+            //     this.app.node.play();
+            // }
         }
@@ -451,0 +480,0 @@

src/index.js

@@ -69,4 +69,3 @@ import Event from './util/event';
 
-        //this.H264Mp4Player = new H264Mp4Player(this);
-        // this.H264CanvasPlayer = new H264CanvasPlayer(this);
+        
         const centerInfo = configs.centerInfo;
@@ -103,2 +102,7 @@
         }.bind(this));
+        this.on('restart',()=>{
+            console.log('刷新')
+            // debugger
+            this.changeVideo(this.jsonbonc)
+        })
         // 得到视频编码类型，实例化player
@@ -119,3 +123,11 @@ this.on('onGetVideoCode',this.makePlayer.bind(this))
                 }else{
+                    // this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
+                    // this._player = this._h265player
+                    
+                    this.webSocketController.socketDataMerge.ifDispatchBuf_h265 = false
+                    // console.log('实例化h264')
+                    // validateConfigs.call(this, this.configs) //对配置项进行验证
+                    // this._player = new H264Mp4Player(this);
                     this.closeVideo('normal')
+                    this.dispatch('clearOrder')
                     this.dispatch('error','h265视频仅允许1路')
@@ -340,6 +352,5 @@ }
         // this.H264Mp4Player.destroy();
-        this.node.src = '';
-        this._player.destroy();
+        this.node && (this.node.src = '');
+        this._player && this._player.destroy();
         
-        // this._player = null;
         this.currentTime = null;
@@ -350,13 +361,16 @@ this.webSocketController.socketDataMerge.ifDispatchVideoType = true;
         }
-        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) //对配置项进行验证
-                this._player = new H264Mp4Player(this);
-                break;
+        // console.log(this.configs.playerClassName)
+        if(this._player){
+            switch (this._player.constructor.name) {
+                case 'H265CanvasPlayer':
+                    // this._player = new H264CanvasPlayer(this);
+                    break;
+                default:
+                    delete this._player;
+                    validateConfigs.call(this, this.configs) //对配置项进行验证
+                    this._player = new H264Mp4Player(this);
+                    break;
+            }
         }
+        
     }
@@ -541,3 +555,11 @@ /**重启视频 */
             // 正放
-            this._player.playBuffer(videoBuffer);
+            if(this._player){
+                this._player.playBuffer(videoBuffer);
+            }else{
+                // debugger
+                var codeType = this.webSocketController.socketDataMerge.codeType
+                this.makePlayer(codeType)
+                this._player.playBuffer(videoBuffer);
+            }
+            
         }
@@ -544,0 +566,0 @@ }

src/util/SocketDataMerge.js

@@ -33,3 +33,4 @@ import ByteArray from './ByteArray';
         this.accumulateBitNum = 0;
-        this.ifDispatchBuf = true;// 是否
+        this.ifDispatchBuf = true;// 是否,外部修改
+        this.ifDispatchBuf_h265 = true;
         this.ifDispatchVideoError = true;
@@ -153,9 +154,12 @@ this.ifDispatchVideoType = true;
                     }
-                    if (this.ifDispatchVideoType) {
+                    if (this.ifDispatchVideoType || this.codeType!==biClrUsed ) {
                         console.log(biClrUsed)
                         if (biClrUsed === 'H264') {
+                            this.codeType = 'H264'
                             this.app.dispatch('onGetVideoCode','H264');
                         } else {
                             // 验证是否具备h265解码的功能
+                            this.codeType = 'H265'
                             this.app.dispatch('onGetVideoCode','H265');
+
                             this.app.dispatch('h265Info',{
@@ -175,5 +179,5 @@ videoCanvasHeight:biHeight,
 
-                    var h264buf = socketBA.SliceNewAB(biSizeImage);
-                    if (this.ifDispatchBuf) {
-                        this.app.dispatch('videoBufferAdd', h264buf);
+                    var videoBuf = socketBA.SliceNewAB(biSizeImage);
+                    if (this.ifDispatchBuf && this.ifDispatchBuf_h265) {
+                        this.app.dispatch('videoBufferAdd', videoBuf);
                     } else {
@@ -180,0 +184,0 @@ console.log('丢弃')

src/util/WebSocketUtil.js

@@ -7,2 +7,3 @@ import { xmlHeader, xmlHeartBody, xmlCloseBody, xmlPlayControl ,xmlPlayRecord} from './orderList';
 // reason 'change'
+var packagenum = 0
 window.WebSocket.prototype.normalClose = function (reason) {
@@ -214,2 +215,7 @@ this.closeReason = reason || 'normal';
             console.log('websocket端口成功')
+            // 由于收到多路h265信号需要控制该值为false，断开后恢复
+            this.socketDataMerge.ifDispatchBuf_h265 = true
+            // 对于h265还要清除_player
+            // debugger
+            this.app._player = null
         } else if (this.boncws.closeReason === 'change') {
@@ -221,3 +227,3 @@ //因某些原因需要关闭
         } else {
-            //非正常断开连接、需要重连
+            //非正常断开连接、需要重连Í
             if (!this.closed) {
@@ -228,3 +234,2 @@ console.log('发出断开的消息')
             }
-
             console.log('abnormal')
@@ -237,2 +242,4 @@ setTimeout(() => {
         }
+        // this.SocketDataMergeb缓存数据块指针归零
+        this.socketDataMerge.wholeOffset = 0;
 
@@ -246,2 +253,3 @@ }
     WebSocketMessage(evt) {
+        // console.log('窗格号'+ this.app.configs.videoId+"," + '收到包数量:'+ packagenum++)
         //console.time("str")  //开始
@@ -248,0 +256,0 @@ this.socketDataMerge.addDataPackage(evt);

webpack.config.js

@@ -6,4 +6,6 @@ const path = require('path');
         {
-            from :'./src/h264canvasplayer/libffmpeg_264_265.wasm',
-            
+            from :'./src/h264canvasplayer/libffmpeg_264_265.wasm',    
+        },
+        {
+            from :'./src/h264canvasplayer/libffmpeg_264_265.js',    
         }
@@ -10,0 +12,0 @@ ]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

5565857

decreased by-24.46%

Number of package files

38

decreased by-11.63%

Lines of code

18435

decreased by-27.51%

No dependency changes