{"id":22283736,"url":"https://github.com/veaba/typescript-flv.js","last_synced_at":"2025-03-25T19:51:30.592Z","repository":{"id":104582221,"uuid":"165192350","full_name":"veaba/typescript-flv.js","owner":"veaba","description":"fork@xxk 的flv.js，本项目以学习为目的，使用typescript重写flv.js，祝我好运。2019 Flag。process 30%","archived":false,"fork":false,"pushed_at":"2019-12-20T12:23:23.000Z","size":155,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T17:39:38.060Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/veaba.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-11T06:35:08.000Z","updated_at":"2021-03-19T03:30:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"22268b9b-901e-4033-8ada-bf66d262208b","html_url":"https://github.com/veaba/typescript-flv.js","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/veaba%2Ftypescript-flv.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Ftypescript-flv.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Ftypescript-flv.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/veaba%2Ftypescript-flv.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/veaba","download_url":"https://codeload.github.com/veaba/typescript-flv.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245535421,"owners_count":20631293,"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":[],"created_at":"2024-12-03T16:41:56.955Z","updated_at":"2025-03-25T19:51:30.569Z","avatar_url":"https://github.com/veaba.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 说明\n\u003e 本着学习的目的(typeScript、以及更高的知识点)，于是使用TypeScript重写  @xxk 的flv.js ，原项目 https://github.com/Bilibili/flv.js  ，由于是个人学习的项目，这里强烈不推荐用于生产环境！\n\n\u003e 本来fork 原项目，在上面改动的，结果发现clone 不下来，一直try again (y/n)，于是启用新项目来开发。\n\n\n---------------------------------------------------------------------\n\n## 开发\n- todo 后续增加socket去替换原生的websocket\n- 后续可以考虑用xhr 异步的方式\n- 关于ts 的一些内容\n    - private 与private static 的区别\n```text\nprivate GLOBAL_TAG: string;\nprivate FORCE_GLOBAL_TAG: boolean;\nprivate ENABLE_INFO: boolean;\nprivate ENABLE_WARN: boolean;\nprivate ENABLE_VERBOSE: boolean;\nprivate ENABLE_CALLBACK: boolean;\nprivate emitter: any;\nprivate ENABLE_ERROR: boolean;\nprivate ENABLE_DEBUG: boolean;\nprivate static FORCE_GLOBAL_TAG: boolean;\nprivate static GLOBAL_TAG: string;\nprivate static emitter: any;\nprivate static ENABLE_CALLBACK: boolean;\nprivate static ENABLE_ERROR: boolean;\nprivate static ENABLE_INFO: boolean;\nprivate static ENABLE_WARN: boolean;\nprivate static ENABLE_DEBUG: boolean;\nprivate static ENABLE_VERBOSE: boolean;\n\n```\n\n## 如何使用该项目\n```shell \ngit clone https://github.com/veaba/typescript-flv.js.git\nnpm install \nnpm run dev  # 会启动一个前台的服务器web页面，8081，并自动生成在内存里面的执行index文件，TODO 后续会生成dist文件夹，比较直观点\n\n```\n## 安排src目录 `♪(^∇^*) `(抄人家的~~ )\n```text\n--/src    \n   -- /core\n   -- /demux\n   -- io\n   -- /player\n   -- /remux\n   -- /utils\n   \n\n```\n---------------------------------------------------------------------\n## 如何安排从头开始的构建工作？\n`const player = flv.createPlayer()`-\u003e`player.attachMediaElement(element)`-\u003e`player.play()`\n\u003e init如果失败\n- init\n\t- [MSEController] \u003e MediaSource onSourceOpen 打开媒体源，不一定成功，可以能失败\n\t- [IOController] \u003e Loader error, code = -1, msg = Failed to fetch 拉取失败\n\t- [TransmuxingController] \u003e IOException: type = Exception, code = -1, msg = Failed to fetch//传动失败，发送异常，代码-1，描述 拉取失败\n\t\n![init](./demo/init.jpg)\n\n- load 视频\n\t- [MSEController] \n\t\u003e MediaSource onSourceOpen 打开资源\n\t- [FLVDemuxer] \n\t\u003e Parsed onMetaData 解析元数据\n\t- [FLVDemuxer] \n\t\u003e Parsed AVCDecoderConfigurationRecord AVC解码器配置记录\n\t- [FLVDemuxer] \n\t\u003e Parsed AudioSpecificConfig 解析音频特定配置\n\t- [MSEController] \n\t\u003e Received Initialization Segment, mimeType: video/mp4;codecs=avc1.64001e 收到视频初始化数据，类型巴拉巴拉\n\t- [MSEController] \n\t\u003e Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5 收到音频初始化数据，类型巴拉巴拉\n\t- [MSEController] \n\t\u003e MediaSource onSourceEnded 媒体资源解析完毕\n## flv 函数结构\n```html\n\n// 向window 提供的函数\n// flv_destory(){},\n// flv_load(){},\n// flv_load_mds(){},\n// flv_pause(){},\n// flv_seekto(){}\n// flv_start(){}\n// flvsjs 构造函数\nconst flvjs = {\n    BaseLoader: ƒ BaseLoader(typeName)\n    ErrorDetails: {NETWORK_EXCEPTION: \"Exception\", NETWORK_STATUS_CODE_INVALID: \"HttpStatusCodeInvalid\", NETWORK_TIMEOUT: \"ConnectingTimeout\", NETWORK_UNRECOVERABLE_EARLY_EOF: \"UnrecoverableEarlyEof\", MEDIA_MSE_ERROR: \"MediaMSEError\", …}\n    ErrorTypes: {NETWORK_ERROR: \"NetworkError\", MEDIA_ERROR: \"MediaError\", OTHER_ERROR: \"OtherError\"}\n    Events: {ERROR: \"error\", LOADING_COMPLETE: \"loading_complete\", RECOVERED_EARLY_EOF: \"recovered_early_eof\", MEDIA_INFO: \"media_info\", METADATA_ARRIVED: \"metadata_arrived\", …}\n    FlvPlayer: ƒ FlvPlayer(mediaDataSource, config)\n    LoaderErrors: {OK: \"OK\", EXCEPTION: \"Exception\", HTTP_STATUS_CODE_INVALID: \"HttpStatusCodeInvalid\", CONNECTING_TIMEOUT: \"ConnectingTimeout\", EARLY_EOF: \"EarlyEof\", …}\n    LoaderStatus: {kIdle: 0, kConnecting: 1, kBuffering: 2, kError: 3, kComplete: 4}\n    LoggingControl: ƒ LoggingControl()\n    NativePlayer: ƒ NativePlayer(mediaDataSource, config)\n    createPlayer: ƒ createPlayer(mediaDataSource, optionalConfig)\n    getFeatureList: ƒ getFeatureList()\n    isSupported: ƒ isSupported()\n    version: (...)\n    get version: ƒ ()\n    __proto__: Object\n}\n// flve.js 实例\n```\n## 视频格式与浏览器的支持情况\n\n- MP4 H.264视频编码、AAC音频编码的 MPEG 4 文件\n- WebM VP8视频编码、Vorbis音频编码的 WebM文件\n- Ogg Theora视频编码、Vorbis音频编码的Ogg文件\n\n|浏览器|MP4|WebM|Ogg|\n|----|----|----|----|\n|IE|√|x|x|\n|Chrome|√|√|√|\n|Firefox|√|√|√|\n|Safari|√|x|x|\n|Opera|(25以上)√|√|√|\n|||||\n\n## demo框架\n### dev\n- webpack\n- webpack-cli\n- webpack-dev-middleware\n- webpack-hot-middleware\n- express\n- ts-loader\n- json-parse-better-errors  什么玩意？\n- neo-async  ???\n- webpack-sources  ? \n- loader-runner ??\n- watchpack  ?\n- mkdirp\n- acorn-dynamic-import ?\n- acorn\n## 规划与设计\n```txt\n    dist/\n    ---- flvts.min.js   //压缩过的代码\n    ---- flvts.all.js   //格式化的代码\n    src/\n    ---- core/      //核心代码\n        ---- features.ts                              || finished 2019年12月19日\n        ---- media-info.ts\n        ---- media-segment-info.ts\n        ---- mse-controller.ts\n        ---- transmuxer.ts\n        ---- transmuxing-controller.ts\n        ---- transmuxing-events.ts\n        ---- transmuxing-worker.ts \n    ---- demux/     // 混码？啥意思\n        ---- amf-parser.ts\n        ---- demux-error.ts\n        ---- exp-golomb.ts\n        ---- flv-demuxer.ts\n        ---- sps-parser.ts\n    ---- io/        // 输入输出，干吗的？(⊙o⊙)…\n        ---- fetch-stream-loader.ts                  || finished 2019年12月20日\n        ---- io-controller.ts                        || finished 2019年12月19日\n        ---- loader.ts                               || finished 2019年12月20日\n        ---- param-seek-handler.ts                   || finished 2019年12月20日\n        ---- range-seek-handler.ts                   || finished 2019年12月20日\n        ---- speed-sampler.ts                        || finished 2019年12月20日\n        ---- websocket-loader.ts                     || finished 2019年12月20日\n        ---- xhr-msstream-loader.ts                  || finished 2019年12月20日\n        ---- xhr-range-loader.ts                     || finished 2019年12月20日\n    ---- player/    // 播放器\n        ---- flv-player.ts\n        ---- native-player.ts\n        ---- player-error.ts\n        ---- player-events.ts\n    ---- remux/     // 似乎和demux 是相反的意思~\n        ---- aac-silent.ts\n        ---- mp4-generator.ts\n        ---- mp4-remuxer.ts\n    ---- utils/     // 工具类函数\n        ---- browser.ts                               || finished 2019年12月20日\n        ---- exception.ts                             || finished 2019年12月20日\n        ---- logger.ts                                || finished 2019年12月20日\n        ---- logging-control.ts\n        ---- polyfill.ts\n        ---- utf8-conv.ts\n    ---- flvts.js\n    ---- config.ts\n    ---- index.ts\n    READEME.md \n```\n## 吐槽\n## 知识点\u0026专业词汇\n|en|desc|todo|\n|----|----|----|\n|demux|||\n|demuxer|ffmpeg接口,视音频分离器||\n|muxer|ffmpeg接口，视音频复用器，其实是将音轨和视频画面合并起来的意思吗？||\n|remux|ffmpeg,封装格式转换||\n|h.264|||\n| [MSE](./docs/MSE) |Media Source Extensions API |媒体源拓展API。无需插件就可以基于web的流媒体功能|\n| [MediaSource](./docs/MediaSource) |媒体资源API,一个包含即将播放的媒体文件和准备状态等信息的容器|见./docs/MediaSource.md也可见MDN|\n|SourceBuffer|对象，代表多个组件整个串流的不同媒体块||\n|MIME|多用途互联网邮件拓展类型|一个字符串类型，定义一些规格:video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"|\n|HTMLMediaElement||https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement|\n|HTMLVideoElement|继承自HTMLMediaElement|https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLVideoElement|\n|HTMLAudioElement|访问`\u003caudio\u003e`元素|https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLAudioElement|\n## LICENSE\n\u003e 我应该可以这么做吧~~（用typescript重写别人的项目~~，不太懂，有问题请联系我。）\n原项目 https://github.com/Bilibili/flv.js   Bilibili /flv.js\n\nApache LICENSE 2.0\n\n\n## Reference（参考索引）\n\n`@1` https://blog.csdn.net/leixiaohua1020/article/details/39802819\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Ftypescript-flv.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fveaba%2Ftypescript-flv.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fveaba%2Ftypescript-flv.js/lists"}