bonc-htmlplayer
Advanced tools
Comparing version 1.0.24 to 1.0.25
{ | ||
"name": "bonc-htmlplayer", | ||
"version": "1.0.24", | ||
"version": "1.0.25", | ||
"description": "东方国信的html播放器内核", | ||
@@ -5,0 +5,0 @@ "main": "./dist/BoncH5Player.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 |
@@ -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; |
@@ -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 @@ ] |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
11362891
60
53989
4
8
19