Skip to content

在浏览器上播放H265视频流,通过websocket获取到每一帧h265流,并解析播放. 技术包含:WebAssembly(FFmpeg)解码;web worker; webgl;canvas

Notifications You must be signed in to change notification settings

chenchenwuai/H265Player

Repository files navigation

h265-player

🚀 h265 stream player 🌈. 在浏览器上播放 H265 视频流,技术方案为在 web worker 中将 h265 视频帧解码为 yuv 数据,并通过webgl进行绘制。

安装

npm i h265-stream-player

使用

import H265Player from 'h265-stream-player'

new H265Player(HTMLCanvasElement,Options)

api

HTMLCanvasElement

canvas dom,用来绘制解码出来的图像

Options

播放器的配置参数,具体有以下三个属性:

baseLibPath

设置此属性时,请先在 statics 文件夹下面找到 libffmpeg_265.jslibffmpeg_265.wasm 这两个文件。

此属性用来在 web worker 中拼接出 libffmpeg_265.jslibffmpeg_265.wasm 两个文件的下载路径,然后使用 importScript(libffmpeg_265.js)fetch(libffmpeg_265.wasm) 下载这两个文件,默认值为 /lib/

有两种设置方式

  • 相对路径

拼接规则为 location.origin + baseLibPath + 'libffmpeg_265.js', 例如:baseLibPath = '/public/',当前运行脚本的 location.originhttp://192.168.1.10:9000, 则最后的拼接地址为 http://192.168.1.10:9000/public/libffmpeg_265.js

  • 一种是绝对路径,拼接规则为 baseLibPath + 'libffmpeg_265.js'

  • 绝对路径

拼接规则为 baseLibPath + 'libffmpeg_265.js', 例如:baseLibPath = 'http://192.168.1.10:9000/public/' ,则最后的拼接地址为 http://192.168.1.10:9000/public/libffmpeg_265.js

无论设置哪一种方式,都必须要求可以通过此链接访问 libffmpeg_265.js 文件内容, libffmpeg_265.jslibffmpeg_265.wasm 这两个文件必须在同一个文件夹下面

debug

开启播放器 debug 模式

decoderLogLevel

设置解码器的日志等级,js-0; wasm-1; ffmpeg-2

方法

方法 说明 参数
isSupported 静态方法,判断当前是否支持h265播放所需要的环境
start ready监听回调触发后,调用此方法开始播放
feed 喂给播放器 一帧h265视频流 (arraybuffer,timestamp),arraybuffer是 ArrayBuffer类型,timestamp是number类型的时间戳
pause 暂停播放
play 开始播放
fullscreen 视频全屏
destroy 销毁播放器
on 监听事件 参照下面监听事件
off 取消监听事件

监听事件

事件 说明 回调值
ready 播放器已准备好,可以开始调用start方法和feed方法了
size 解码出来的视频的分辨率 {width,height}
play 视频正在播放
pause 视频暂停
error 视频播放出错

简单代码

import H265Player from 'h265-player'
const canvas = document.getElementById('canvas');

var player = new H265Player(canvas, {
  baseLibPath: "/statics/",
  decoderLogLevel: 0,
  debug: true
});
player.on("ready", () => {
  console.log("ready");
  player.start();
});
player.on("size", function (e) {
  console.log("size", e.width, e.height);
});
player.on("play", () => {
  console.log("play");
});
player.on("pause", () => {
  console.log("pause");
});
player.on("error", (e) => {
  console.log("player error", e);
});

function feed(arraybuffer, timestamp) {
  if (player) {
    player.feed(arraybuffer, timestamp);
  }
}

Thank you for your star

About

在浏览器上播放H265视频流,通过websocket获取到每一帧h265流,并解析播放. 技术包含:WebAssembly(FFmpeg)解码;web worker; webgl;canvas

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published