goldvideo / h265player

一套完整的Web版H.265播放器解决方案,非常适合学习交流和实际应用。基于JS码流解封装、WebAssembly(FFmpeg)视频解码,利用Canvas画布投影、AudioContext播放音频。
https://goldvideo.github.io/h265player/
1.53k stars 298 forks source link

内存溢出问题 #49

Open fzw2408 opened 3 years ago

fzw2408 commented 3 years ago

这种问题有解吗?

image

fzw2408 commented 3 years ago

imageData.js HLS模式下,此处只吞不吐。

insertSort(array, value) { let length = array.length

if (length === 0) {
  array.push(value)
  return 0
}
for (let i = 0; i < length; i++) {
  if (value.pts < array[i].pts) {
    let j = length
    while (j > i) {
      array[j] = array[j - 1]
      j--
    }
    array[i] = value
    return i
  }
}
array.push(value)
return array.length - 1

}

find(time) { let pool = this.pool let length = pool.length if (!this.isBuffered(time)) { return } if (length === 0) { return } let index = this.findIndex(time) if (index !== -1) { let image = pool[index] this.checkBuffer(time) if(pool.length > 10) pool.shift() //这里作为消费者,消费了直接清理掉。 对内存溢出现象有所缓和。 // console.log('oldlen:',length,'nowlen:',pool.length) return image } return }

jarry commented 3 years ago

imageData.js HLS模式下,此处只吞不吐。

insertSort(array, value) { let length = array.length

if (length === 0) {
  array.push(value)
  return 0
}
for (let i = 0; i < length; i++) {
  if (value.pts < array[i].pts) {
    let j = length
    while (j > i) {
      array[j] = array[j - 1]
      j--
    }
    array[i] = value
    return i
  }
}
array.push(value)
return array.length - 1

}

find(time) { let pool = this.pool let length = pool.length if (!this.isBuffered(time)) { return } if (length === 0) { return } let index = this.findIndex(time) if (index !== -1) { let image = pool[index] this.checkBuffer(time) if(pool.length > 10) pool.shift() //这里作为消费者,消费了直接清理掉。 对内存溢出现象有所缓和。 // console.log('oldlen:',length,'nowlen:',pool.length) return image } return }

👍谢谢!

yiwen03 commented 3 years ago

这种问题有解吗?

image

你这个看着是数据有问题啊。。。wasm解码报错了

yiwen03 commented 3 years ago

这种问题有解吗? image

你这个看着是数据有问题啊。。。wasm解码报错了

invalid NAL unit,这是wasm内部报的,解码出问题了,数据都堆积了,所以报错了。

fzw2408 commented 3 years ago

@yiwen03 我在调试的时候经常切换页面,切换页面后,http请求没有暂停,但是canvas渲染停止消耗 imagedata.js里面的 image。 http 请求回来的ts文件不断解码数据撑爆了。后面我加了上面 if(pool.length > 1) pool.shift() //这里作为消费者,消费了直接清理掉。 对内存溢出现象有所缓和。 // console.log('oldlen:',length,'nowlen:',pool.length)
1.来消除 渲染后的数据堆积。 2.同时在页面没有显示或者最小化的时候关闭http请求。重新查看的时候在重新请求。

zhejinjiang commented 2 years ago

if (index !== -1) { this.pool = pool = pool.slice(index); let image = pool[0]; this.checkBuffer(time); return image; }

zhejinjiang commented 2 years ago

我这边有个问题,就是我调用destroy后并把player对象丢掉,imageData的pool的数据并没有被丢掉(没有被垃圾回收),目前没查到哪里还在引用。目前我的做法是在player.destroy的时候,同时清除pool。