{"id":17324866,"url":"https://github.com/numberwolf/h265web.js-wasm-decoder","last_synced_at":"2025-04-14T16:54:49.309Z","repository":{"id":49135776,"uuid":"339274340","full_name":"numberwolf/h265web.js-wasm-decoder","owner":"numberwolf","description":"🔥WebAssembly API H.265/HEVC Decoder, return YUV Frame.","archived":false,"fork":false,"pushed_at":"2021-05-23T09:11:35.000Z","size":3033,"stargazers_count":98,"open_issues_count":2,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T05:31:39.257Z","etag":null,"topics":["h265","h265-wasm","h265-web-player","hevc-wasm","webassembly"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/numberwolf.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-16T03:27:05.000Z","updated_at":"2025-01-24T09:16:46.000Z","dependencies_parsed_at":"2022-08-13T18:30:25.713Z","dependency_job_id":null,"html_url":"https://github.com/numberwolf/h265web.js-wasm-decoder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numberwolf%2Fh265web.js-wasm-decoder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numberwolf%2Fh265web.js-wasm-decoder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numberwolf%2Fh265web.js-wasm-decoder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/numberwolf%2Fh265web.js-wasm-decoder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/numberwolf","download_url":"https://codeload.github.com/numberwolf/h265web.js-wasm-decoder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248923251,"owners_count":21183945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["h265","h265-wasm","h265-web-player","hevc-wasm","webassembly"],"created_at":"2024-10-15T14:11:51.184Z","updated_at":"2025-04-14T16:54:49.289Z","avatar_url":"https://github.com/numberwolf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# h265web.js-wasm-decoder\n\n\u003e #### [h265web.js播放器 - https://github.com/numberwolf/h265web.js](https://github.com/numberwolf/h265web.js) 底层解码API    \n\u003e #### 可以直接用于自定义开发H.265播放器\n\n| Demo | 媒资信息 |\n| ---- | ---- |\n| \u003cimg src=\"assets/demo-wasm.png\" width=\"300\"\u003e | Input #0, hevc, from `'res/video40_265_moov.hevc'`:\u003cbr\u003e\u0026nbsp;\u0026nbsp;Duration: N/A, bitrate: N/A\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Stream #0:0: `Video: hevc (Main), yuv420p(tv), 1280x720, 25 fps, 25 tbr, 1200k tbn, 25 tbc` |\n\n## 目录\n\n- [0、说明](#0说明)\n\n\t- [当前能力](#当前能力)\n\n\t- [当前版本token](#当前版本的token)\n\n\t- [联系我](#联系我)\n\n\n- [1、快捷方式使用 - 完整Demo](#1快捷方式使用)\n\n- [2、解码SDK使用文档](#2解码sdk使用文档)\n\n\t- [文件说明](#文件说明)\n\n\t- [安装](#安装)\n\n\t- [H.265/HEVC 数据解析器使用 - 分割帧](#h265数据解析器使用)\n\n\t- [H.265/HEVC 解码器使用](#h265解码器使用)\n\n- [3、其它](#3其它)\n\n\t- [捐赠](#捐赠)\n\t\n\t- [FFmpeg转码H.265/HEVC编码的265测试文件](#ffmpeg转码h265编码的265测试文件)\n\n\n\n### 0、说明 ###\n\n#### 当前能力 ####\n\n* 能力\n\n|  能力 | 是否支持 | 其他 |\n| ---- | ---- |  ----  |\n| HEVC/H.265 Nalu解析 | 是 |  ----  | ---- |\n| HEVC/H.265 帧解码 | 是 | ---- | ---- |\n| HEVC/H.265 多窗口播放 | 是 | ---- | ---- |\n\n\n* 协议\n\n|  协议 | 是否支持 | 说明 |\n| ---- | ---- | ---- |\n| HEVC/H.265 点播 | 是 | ---- |\n| HEVC/H.265 点播 | 是 | ---- |\n\n\u003cbr\u003e\n\n#### 当前版本的token ####\n\n```javascript\ntoken = \"base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1\";\n```\n\n\u003cbr\u003e\n\n#### 联系我 ####\n\n* Github: https://github.com/numberwolf\n* Email(porschegt23@foxmail.com)\n* QQ: 531365872\n* Discord:numberwolf#8694\n* 微信:numberwolf11\n\n\u003cbr\u003e\n\n## 1、快捷方式使用 ##\n\n* 1）使用流程也可以直接看 [`example.js`](example.js) 和 [`example.html`](example.html) 的Demo使用\n\n* 2）自己直接运行Demo\n\n\t* 将以下文件拷贝到http服务器下同目录访问即可\n\n\t\t* [example.html](example.html)\n\t\t* [example-dist.js](example-dist.js)\n\t\t* [missile-dec.wasm](missile-dec.wasm)\n\n* 3）或者自己编译Demo\n\n\t* 编译\n\t\t```bash\n\t\tnpm start\n\t\t```\n\n\t* 访问 \n\t\t* [http://127.0.0.1:8000/example.html](http://127.0.0.1:8000/example.html) 即可\n\n\u003cbr\u003e\n\n## 2、播放器SDK使用文档 ##\n\n### 文件说明 ###\n\n* 核心文件\n\n|  文件 | 必要 | 说明 | 其他 |\n| ---- | ---- |  ----  |  ---- |\n| [index.js](index.js) | 是 |  SDK入口文件  | ---- |\n| [decoder.js](decoder.js) | 是 |  H.265解码能力  | ---- |\n| [missile-dec.wasm](missile-dec.wasm) | 是 |  解码WASM  | ---- |\n| [raw-parser.js](raw-parser.js) | 是 | 解析265流并分割Nalu |  ----  |\n| [package.json](package.json) | 否 | ---- |  ----  |\n| [package-lock.js](package-lock.js) | 否 | ---- |  ----  |\n\n\u003cbr\u003e\n\n* Sdk使用示例Demo文件\n\n|  文件 |  说明 | 其他 |\n| ---- |   ----  |  ---- |\n| [example.html](example.html) | 示例Html  | ---- |\n| [example.js](example.js) | 示例API使用方法JS文件  | ---- |\n| [example-dist.js](example-dist.js) | 直接编译好的可以直接使用的js文件  | 与wasm放同一个目录 |\n| [render-yuv420p.js](render-yuv420p.js) | 渲染`YUV420P` |  这个最好自己写 这里只是一个demo |\n\n\n\u003cbr\u003e\n\n### 安装 ###\n\n* 将`核心文件`拷贝到你项目下同一目录\n\n\t* [index.js](index.js)\n\t* [decoder.js](decoder.js)\n\t* [missile-dec.wasm](missile-dec.wasm)\n\t* [raw-parser.js](raw-parser.js)\n\n* 在你的工程文件引入 [index.js](index.js)\n\n\u003cbr\u003e\n\n### H265数据解析器使用 ###\n\n* 1）引入文件\n\n\t```javascript\n\timport MissileEngineDecoder from './index';\n\t```\n\n* 2）新建H265数据解析器\n\n\t```javascript\n\tvar rawParserObj = new MissileEngineDecoder.CRawParser();\n\t```\n\n* 3）将H265的字节流数据`喂给解析器`\n\n\t##### 输入数据 `Uint8Array` 类型\n\n\t```javascript\n\t// Uint8Array chunk\n\trawParserObj.appendStreamRet(chunk);\n\t```\n\n* 4）从`解析器吐出` 一帧H265 数据\n\n\t##### 返回数据 `Uint8Array` 类型 (失败为`false`)\n\n\t```javascript\n\tlet nalBuf = rawParserObj.nextNalu(); // nal\n    if (nalBuf != false) {\n    \t// todo\n    }\n\t```\n\n* 5）完整示例代码\n\n\t```javascript\n\timport MissileEngineDecoder from './index';\n\tvar url265 = \"res/video40_265_moov.hevc\";\n\tvar rawParserObj = new MissileEngineDecoder.CRawParser();\n    fetch(url265).then(function(response) {\n        let pump = function(reader) {\n            return reader.read().then(function(result) {\n                if (result.done) {\n                    // todo\n                }\n                let chunk = result.value;\n                rawParserObj.appendStreamRet(chunk);\n                return pump(reader);\n            });\n        }\n        return pump(response.body.getReader());\n    })\n    .catch(function(error) {\n        console.log(error);\n    });\n    for(var i = 0; i \u003c 100; i++) {\n\t    let nalBuf = rawParserObj.nextNalu(); // nal\n\t    if (nalBuf != false) {\n\t    \t// todo\n\t    }\n\t}\n\t```\n\n\n\n\u003cbr\u003e\n\n### H265解码器使用 ###\n\n* 1）引入文件\n\n\t```javascript\n\timport MissileEngineDecoder from './index';\n\t```\n\n* 2）新建H265解码器\n\n\t```javascript\n\tvar token = \"base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1\";\n\tvar version = '100.1.0';\n\tvar decoderMod = null;\n\tdecoderMod = new MissileEngineDecoder.CMissileDecoder(token, version);\n\t```\n\n* 3）解码器绑定回调事件 - 获取解码结果数据\n\n\t* 初始化成功回调 `decoderMod.initFinish = xxx`\n\t* 绑定解码成功事件 `decoderMod.bindCallback(callback)`\n\n\t\t##### a）解码成功事件函数原型\n\t\t```javascript\n\t\tfunction(\n\t\t\ty, u, v, \n\t\t\tstride_y, stride_u, stride_v, \n\t\t\twidth, height, pts,\n\t\t\tpix_name\n\t\t) {\n\t\t\t// @TODO\n\t\t}\n\t\t```\n\n\t\t#### b）解码回调数据说明\n\t\t* y, u, v \n\t\t\t* 说明：解码最终YUV数据 `Uint8Array` 类型\n\t\t* stride_y, stride_u, stride_v \n\t\t\t* 说明：解码stride长度 `int` 类型\n\t\t* width, height, pts \n\t\t\t* 说明：解码图像 长、宽、时间戳（用户传入一致）\n\t\t* pix_name \n\t\t\t* 说明：解码YUV格式\n\n\t* 代码如下\n\n\t\t```javascript\n\t\t// 解码器初始化成功事件\n\t\tdecoderMod.initFinish = () =\u003e {\n\t\t\tconsole.log(\"init Finshed\");\n\n\t\t\t// 解码结果回调\n\t\t\tlet bind_ret = decoderMod.bindCallback(function(\n\t\t\t\ty, u, v, \n\t\t\t\tstride_y, stride_u, stride_v, \n\t\t\t\twidth, height, pts,\n\t\t\t\tpix_name) {\n\n\t\t\t\tconsole.log(\"======\u003e One Frame \");\n\t\t\t\tconsole.log(\"======\u003e ======\u003e width, height, pts\", width, height, pts);\n\t\t\t\tconsole.log(\"======\u003e ======\u003e pix_name\", pix_name);\n\t\t\t\tconsole.log(\"======\u003e ======\u003e Y \", stride_y, y);\n\t\t\t\tconsole.log(\"======\u003e ======\u003e U \", stride_u, u);\n\t\t\t\tconsole.log(\"======\u003e ======\u003e V \", stride_v, v);\n\t\t\t});\n\n\t\t\t// todo\n\t\t};\n\t\t```\n\n* 4）解码器初始化\n\n\t\u003e 初始化成功后，会调用 `decoderMod.initFinish`\n\n\t```javascript\n\tdecoderMod.initDecoder();\n\t```\n\n* 5）解码一帧数据 - 解码结果最终会通过 `decoderMod.bindCallback(callback)` 回调回来\n\n\t* `Uint8Array` nalBuf 一帧265数据\n\t* `float32` pts 时间戳毫秒数据\n\n\t```javascript\n\tdecoderMod.decodeNalu(nalBuf, pts);\n\t```\n\n\u003cbr\u003e\n\n## 3、其它 ##\n\n### 捐赠 ###\n\n|  微信 | 支付宝 | PayPal |\n|  ---- | ----  | ---- |\n| \u003cimg src=\"assets/donate/wechat.JPG\" height=\"500\"\u003e | \u003cimg src=\"assets/donate/alipay.JPG\" height=\"500\"\u003e | TODO |\n\n\u003cbr\u003e\n\n\n### FFmpeg转码H265编码的265测试文件 ###\n\n* 用`ffmpeg`转码一个测试 `H.265/HEVC的` Demo文件\n\n\t```shell\n\tffmpeg -i input265.mp4 -vcodec libx265 -an -vtag hev1 -y video40_265_moov.h265\n\t```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumberwolf%2Fh265web.js-wasm-decoder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnumberwolf%2Fh265web.js-wasm-decoder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnumberwolf%2Fh265web.js-wasm-decoder/lists"}