Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

lzk90s/h265-video-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

web-video-player

web 视频播放器(fork from WasmVideoPlayer

相比 WasmVideoPlayer,做了以下修改

  • 用 yarn 管理工程依赖,添加 eslint
  • 代码结构调整,公共部分抽取,js 使用 class 方式
  • 去掉 wasm 部分,改为通过 websocket 调用 native-decoder,图片数据量比较大,websocket 需要做压缩
  • 支持无音频视频播放

背景

浏览器不原生支持h265,有的方案是采用的web assembly方式,把ffmpeg编译为wasm来供js使用,但是这样性能较差,web assembly限制比较多,1080P的视频播放卡顿。 本方案把视频解码功能提取出来,编译为本地解码,js通过websocket把h264/h265视频数据给native-decoder, native-decoder解码后,通过websocket把YUV的视频数据返回给浏览器, 浏览器再进行显示,经测试,性能比wasm版本的要好,可以流畅播放H265的视频

功能

  • 支持实时流和文件播放
  • 支持 h264 和 h265 编码格式的视频
  • 解决 chrome 不支持 h265 的问题,需要配合 native-decoder 工程使用,比 wasm 版本的性能高,1080P 视频可以流畅播放
  • 无音频视频播放
  • websocket 自动重连

使用方法

yarn add --global parcel
yarn install
yarn build && yarn serve

示例参考 example/index.html

浏览器访问 http://localhost:9080

注意

使用前,需要打开 native-decoder 程序

问题

经过测试,虽然可以流畅的播放1080P的视频,但CPU的占用率依然高,i5的cpu,chrome浏览器同时播放3-4路视频cpu占用率100%。 经分析,cpu占用高的原因是chrome是多进程架构,进程间是通过chrome的RPC通信的,视频数据要经过 native-decoder -> chrome网络服务 -> chrome主进程 -> chrome GPU进程,解码后的视频数据量大, CPU消耗在大量的拷贝数据上。

基于以上分析,这个方案还是有局限性的。目前,在考虑另一个方案,解码和显示都不在chrome完成,在外部解码并显示,在chrome上遮一层视频播放框,绕过chrome的RPC机制。

新方案还在开发中

Releases

No releases published

Packages

No packages published