bonc-htmlplayer - npm Package Compare versions

Comparing version 1.0.24 to 1.0.25

package.json

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

src/h264canvasplayer/player.js

@@ -9,9 +9,23 @@ // import './libffmpeg_264_265.js';
 
+// window.addEventListener('message', function (e) {
+//     debugger
+//     console.log(e)
+//     console.log(e.data)  //e.data为传递过来的数据
+//     console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
+//     console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
+// })
 
 class H265CanvasPlayer {
     constructor(app, option) {
+        var _this = this
         this.app = app;
         this.pts = 0;
-        this.canvasId = option.canvasId;
+        // this.canvasId = option.canvasId;
+        canvasId = option.canvasId;
         this.audioId = option.audioId;
+        this.iframeId = option.iframeId;
+        // this.iframeUrl = option.iframeUrl;
+        // this.iframeUrl = './h265Page/player.html'
+        this.iframeNode = document.getElementById(this.iframeId);
+        // this.iframeNode.src = this.iframeUrl;
         this.app.node = document.getElementById(this.canvasId);
@@ -52,2 +66,5 @@ var audioNode = document.getElementById(this.audioId);
         
+        this.iframeNode.contentWindow.addEventListener('message',function(){   
+            this.app.dispatch('startSuccess')
+        }.bind(this))
 
@@ -61,93 +78,100 @@
     }
-    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)
-            }
-            if (cacheBuffer != null) {
-                Module._free(cacheBuffer);
-                cacheBuffer = null;
-            }
-        } 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 (e){
-                    console.log(e)
-                }
-                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();
-        // }
+    playBuffer(videoBuffer){
+        this.iframeNode.contentWindow.postMessage({
+            type:'bufferData',
+            value:videoBuffer
+        })
     }
+    // playBuffer(videoBuffer) {
+    //     // debugger
+    //     if (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)
+    //         }
+    //         if (cacheBuffer != null) {
+    //             Module._free(cacheBuffer);
+    //             cacheBuffer = null;
+    //         }
+    //     } 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 (e){
+    //                 console.log(e)
+    //             }
+    //             // 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')
 
-    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) {
@@ -162,6 +186,9 @@ this.recoder.startRecord(name)
         console.log('h265主动销毁')
-        this.webglPlayer && this.webglPlayer.clear();
-        this.app.node = null
-        this.isStart = false;
-        Module._closeDecoder()
+        // this.webglPlayer && this.webglPlayer.clear();
+        // this.app.node = null
+        // this.isStart = false;
+        // webglPlayer = null
+        this.iframeNode.contentWindow.postMessage({
+            type:'closeVideo'
+        })
         // this.modulestart
@@ -178,4 +205,5 @@ }
 
-
-
+var modulestart
+var canvasId
+self.webglPlayer = null
 self.Module = {
@@ -189,47 +217,65 @@ locateFile: function (wasm) {
 document.querySelector('body').appendChild(scriptNode)
+self.decodeCallback = function (addr_y, addr_u, addr_v, stride_y, stride_u, stride_v, width, height, pts, id) {
+    // debugger
+    // 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
+    // }
+    console.log(123)
+    // 处理音频
+    // if (!this.isStart) {
+    //     this.isStart = true;
+    //     this.app.dispatch('startSuccess')
+    // }
+    // self.displayVideoFrame(obj);
+}
+self.Module.onRuntimeInitialized = () => {
+    
+    self.videoCallback = Module.addFunction(self.decodeCallback)
+    // debugger
+    modulestart = Module._openDecoder(1, self.videoCallback, 0)
+}
 
-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
-        }
-        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)
+self.displayVideoFrame= function(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 (!self.webglPlayer) {
+        
+        var canvas = document.getElementById(canvasId);
+        self.webglPlayer = new WebGLPlayer(canvas, {
+            preserveDrawingBuffer: true
+        });
+    }
+    self.webglPlayer.renderFrame(data, width, height, yLength, uvLength);
 }
 
 
-
 export default H265CanvasPlayer

src/index.js

@@ -115,19 +115,21 @@ import Event from './util/event';
             case 'H265':
+                this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
+                this._player = this._h265player
                 // 判断是否可以实例化h265
-                if(this.validateH265()){
-                    console.log('实例化h265')
-                    this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
-                    this._player = this._h265player
-                }else{
-                    // this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
-                    // this._player = this._h265player
+                // if(this.validateH265()){
+                //     console.log('实例化h265')
+                //     this._h265player = this._h265player || new H265CanvasPlayer(this,this.configs);
+                //     this._player = this._h265player
+                // }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路')
-                }
+                //     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路')
+                // }
                 
@@ -134,0 +136,0 @@ break;

webpack.config.js

@@ -10,2 +10,6 @@ const path = require('path');
             from :'./src/h264canvasplayer/libffmpeg_264_265.js',    
+        },
+        {
+            from :'./src/h264canvasplayer/h265Page',
+            to:'./h265Page'
         }
@@ -12,0 +16,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

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

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

Improved metrics

Total package byte prevSize

11362891

increased by104.15%

Number of package files

60

increased by57.89%

Lines of code

53989

increased by192.86%

Worsened metrics

Number of low quality alerts

4

increased by100%

Number of low supply chain risk alerts

8

increased by100%

Number of medium supply chain risk alerts

19

increased by111.11%

No dependency changes