docs: 优化文档

zhaohappy · Dec 18, 2024 · 83101a5 · 83101a5
1 parent b595350
commit 83101a5
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 176 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 
 libmedia
 ======
-中文 | [English](README_en.md)
+中文 | [English](README_en.md) | [文档](https://zhaohappy.github.io/libmedia/docs)
 
-![](https://img.shields.io/badge/language-typescript-blue.svg) [![](https://img.shields.io/badge/base-cheap-green.svg)](https://github.com/zhaohappy/cheap) ![](https://img.shields.io/badge/feature-thread-red.svg) ![license](https://img.shields.io/github/license/zhaohappy/libmedia)
+![](https://img.shields.io/badge/language-typescript-blue.svg) [![](https://img.shields.io/badge/base-cheap-green.svg)](https://github.com/zhaohappy/cheap) ![](https://img.shields.io/badge/feature-thread-red.svg) ![license](https://img.shields.io/github/license/zhaohappy/libmedia) [![npm](https://img.shields.io/npm/v/@libmedia/avutil.svg?style=flat)](https://www.npmjs.com/settings/libmedia/packages)
 
 ### 介绍
 
@@ -85,31 +85,6 @@ libmedia 支持多线程，但需要页面可以使用 SharedArrayBuffer，你
 | rtmp     | ✅       | ❌        |
 | rtsp     | ✅       | ❌        |
 
-rtmp 和 rtsp 需要使用 WebSocket 或 WebTransport 代理 tcp 连接，avplayer 使用如下:
-
-```JavaScript
-
-const player = new AVPlayer()
-
-// 第一个参数是 Websocket 代理的 rtmp 地址
-player.load('rtmp://xxx.xxx.xxx.xxx/xxx/xxx', {
-  // uri 是源 rtmp 地址
-  uri: 'rtmp://xxx.xxx.xxx.xxx/xxx/xxx'
-})
-player.play()
-
-player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
-player.play()
-
-// 使用 wss 连接
-player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
-// 使用 ws 连接
-player.load('rtsp+ws://xxx.xxx.xxx.xxx/xxx')
-// 使用 webtransport 连接
-player.load('rtsp+webtransport://xxx.xxx.xxx.xxx/xxx')
-
-```
-
 
 ### 编解码器
 
@@ -182,65 +157,6 @@ player.load('rtsp+webtransport://xxx.xxx.xxx.xxx/xxx')
 | G.711 μ-law | ✅         | ✅          | ✅          | ❌                 |
 
 
-### 开发
-
-若你想集成此项目来开发，建议将本仓库作为子模块，项目使用了 [cheap](https://github.com/zhaohappy/cheap) 库，需要你对 cheap 的使用有所了解。凡是使用了 libmedia API 的地方都需要使用 cheap 插件来编译。
-
-当前本项目只支持使用 webpack 进行编译打包
-
-下面介绍如何编译 AVPlayer 和 AVTranscoder 工具
-
-```shell
-
-# 克隆项目以及所有子模块
-git clone https://github.com/zhaohappy/libmedia.git --recursive
-
-# 进入 libmedia 目录
-cd libmedia
-
-# 安装依赖
-npm install
-
-# 编译 AVPlayer 开发版
-npm run build-avplayer-dev
-
-# 编译 AVTranscoder 开发版
-npm run build-avtranscoder-dev
-
-# 启动本地 http 服务
-# 任何一个 http 服务都行，若报 edp 找不到，可以全局安装: npm install edp -g
-edp webserver start --port=9000
-
-# 浏览器访问 http://localhost:9000/test/avplayer.html
-
-```
-
-若要源码调试多线程 Worker 中的代码，设置 ```tsconfig.json``` 中```ENABLE_THREADS_SPLIT```宏为 ```true```并重新编译
-
-```json
-{
-  "cheap": {
-    "defined": {
-      "ENABLE_THREADS_SPLIT": true
-    }
-  }
-}
-```
-
-```tsconfig.json``` 还可设置其他宏来裁剪编译，你可以根据自己的需要更改相关设置，详情看 ```tsconfig.json``` -> ```cheap``` -> ```defined``` 中的配置
-
-### 示例
-
-```examples/demux.ts``` 是解封装的使用示例
-
-```examples/mux.ts``` 是封装的使用示例
-
-```examples/decode.ts``` 是解码的使用示例
-
-```test/avplayer.html``` 是 AVPlayer 的使用示例，也是在线 demo 的实现
-
-```test/avtranscoder.html``` 是一个 AVTranscoder 的使用示例，也是在线 demo 的实现
-
 ### 相关文章
 
 [下一代 Web 音视频技术会是什么样的](./articles/下一代%20Web%20音视频技术会是什么样的.md)

diff --git a/README_en.md b/README_en.md
@@ -1,8 +1,8 @@
 libmedia
 ======
-English | [中文](README.md)
+English | [中文](README.md) | [Document](https://zhaohappy.github.io/libmedia/docs)
 
-![](https://img.shields.io/badge/language-typescript-blue.svg) [![](https://img.shields.io/badge/base-cheap-green.svg)](https://github.com/zhaohappy/cheap) ![](https://img.shields.io/badge/feature-thread-red.svg) ![license](https://img.shields.io/github/license/zhaohappy/libmedia)
+![](https://img.shields.io/badge/language-typescript-blue.svg) [![](https://img.shields.io/badge/base-cheap-green.svg)](https://github.com/zhaohappy/cheap) ![](https://img.shields.io/badge/feature-thread-red.svg) ![license](https://img.shields.io/github/license/zhaohappy/libmedia) [![npm](https://img.shields.io/npm/v/@libmedia/avutil.svg?style=flat)](https://www.npmjs.com/settings/libmedia/packages)
 
 ### Introduction
 
@@ -84,31 +84,6 @@ if multi-threading is not supported, it will fall back to running on the main th
 | rtmp     | ✅       | ❌        |
 | rtsp     | ✅       | ❌        |
 
-rtmp and rtsp need use WebSocket or WebTransport proxy tcp connection，for example in avplayer:
-
-```JavaScript
-
-const player = new AVPlayer()
-
-// first url is the websocket proxy rtmp url 
-player.load('rtmp://xxx.xxx.xxx.xxx/xxx/xxx', {
-  // uri is the source rtmp url
-  uri: 'rtmp://xxx.xxx.xxx.xxx/xxx/xxx'
-})
-player.play()
-
-player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
-player.play()
-
-// use wss
-player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
-// use ws
-player.load('rtsp+ws://xxx.xxx.xxx.xxx/xxx')
-// use webtransport
-player.load('rtsp+webtransport://xxx.xxx.xxx.xxx/xxx')
-
-```
-
 ### Codecs
 
 Codecs are compiled into separate wasm modules, the decoders are in the ```dist/decode``` directory, and the encoders are in the ```dist/encode``` directory. There are three versions of the encoding and decoding wasm module: baseline, atomic, and simd. The baseline version's instruction set corresponds to the MVP version of WebAssembly, but it needs to support Mutable Globals, with the highest compatibility and the lowest performance; atomic version add the atomic operation instruction set and Bulk memory instruction set; simd version add the simd vector acceleration instruction set, has the highest performance. The current simd version is automatically optimized by the compiler, and different codecs have different effects (currently I have not seen any codec projects has optimized for the wasm simd instruction set. If you want higher acceleration effects, you may want to optimize by yourself).
@@ -179,66 +154,6 @@ Codecs are compiled into separate wasm modules, the decoders are in the ```dist/
 | G.711 A-law | ✅         | ✅          | ✅          | ❌                 |
 | G.711 μ-law | ✅         | ✅          | ✅          | ❌                 |
 
-
-### Start
-
-If you want to integrate this project for development, it is recommended to use libmedia as a sub-module. The project dependence on [cheap](https://github.com/zhaohappy/cheap) library, which requires you to understanding of the usage of cheap.
-
-Currently, this project only supports using webpack for compilation and packaging.
-
-Here's how to compile the AVPlayer and AVTranscoder tool
-
-```shell
-
-# Clone the project and all submodules
-git clone git@github.com:zhaohappy/libmedia.git --recursive
-
-# enter libmedia directory
-cd libmedia
-
-# Install dependencies
-npm install
-
-# Compile AVPlayer with development mode
-npm run build-avplayer-dev
-
-# Compile AVTranscoder with development mode
-npm run build-avtranscoder-dev
-
-# Start local http service
-# Any http service will do. If it reports that edp cannot be found, you can install it globally use: npm install edp -g
-edp webserver start --port=9000
-
-# use browser access http://localhost:9000/test/avplayer.html
-
-```
-
-To debug the code in multi-threaded Worker from source, set the ```ENABLE_THREADS_SPLIT``` macro in ```tsconfig.json``` to ```true``` and recompile.
-
-```json
-{
-  "cheap": {
-    "defined": {
-      "ENABLE_THREADS_SPLIT": true
-    }
-  }
-}
-```
-
-```tsconfig.json``` can also set other macros to tailor compilation. You can change the relevant settings according to your own needs. For details, see ```tsconfig.json``` -> ```cheap``` -> Configuration in ```defined```
-
-### Example
-
-```examples/demux.ts``` is an example of demux
-
-```examples/mux.ts``` is an example of mux
-
-```examples/decode.ts``` is an example of decode
-
-```test/avplayer.html``` is an example of using AVPlayer and also the implementation of online demo.
-
-```test/avtranscode.html``` is an example of using AVTranscoder and also the implementation of online demo.
-
 ### License
 
 libmedia uses the LGPL open source license. You need to comply with the license requirements. For details, see [LGPL](https://github.com/zhaohappy/libmedia/blob/master/COPYING.LGPLv3)

diff --git a/site/docs/guide/player.md b/site/docs/guide/player.md
@@ -147,6 +147,71 @@ await player.play()
 
 ```
 
+## rtsp 和 rtmp
+
+rtmp 和 rtsp 需要使用 WebSocket 或 WebTransport 代理 tcp 连接，avplayer 使用如下:
+
+```javascript
+
+const player = new AVPlayer()
+
+// 第一个参数是 Websocket 代理的 rtmp 地址
+player.load('rtmp://xxx.xxx.xxx.xxx/xxx/xxx', {
+  // uri 是源 rtmp 地址
+  uri: 'rtmp://xxx.xxx.xxx.xxx/xxx/xxx'
+})
+player.play()
+
+player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
+player.play()
+
+// 使用 wss 连接
+player.load('rtsp://xxx.xxx.xxx.xxx/xxx')
+// 使用 ws 连接
+player.load('rtsp+ws://xxx.xxx.xxx.xxx/xxx')
+// 使用 webtransport 连接
+player.load('rtsp+webtransport://xxx.xxx.xxx.xxx/xxx')
+
+```
+
+## 开发
+
+```shell
+
+# 克隆项目以及所有子模块
+git clone https://github.com/zhaohappy/libmedia.git --recursive
+
+# 进入 libmedia 目录
+cd libmedia
+
+# 安装依赖
+npm install
+
+# 编译 AVPlayer 开发版
+npm run build-avplayer-dev
+
+# 启动本地 http 服务
+# 任何一个 http 服务都行，若报 edp 找不到，可以全局安装: npm install edp -g
+edp webserver start --port=9000
+
+# 浏览器访问 http://localhost:9000/test/avplayer.html
+
+```
+
+若要源码调试多线程 Worker 中的代码，设置 ```tsconfig.json``` 中```ENABLE_THREADS_SPLIT```宏为 ```true```并重新编译
+
+```json
+{
+  "cheap": {
+    "defined": {
+      "ENABLE_THREADS_SPLIT": true
+    }
+  }
+}
+```
+
+```tsconfig.json``` 还可设置其他宏来裁剪编译，你可以根据自己的需要更改相关设置，详情看 ```tsconfig.json``` -> ```cheap``` -> ```defined``` 中的配置
+
 ## 注意事项
 
 - AVPlayer 的接口绝大多数都是异步的，你需要自己确保接口调用时序，不能某个接口还未执行完成就调另一个接口。唯一的例外是 seeking 状态下可以调用 stop 接口。

diff --git a/site/docs/guide/transcode.md b/site/docs/guide/transcode.md
@@ -157,6 +157,44 @@ transcoder.addTask({
 
 ```
 
+## 开发
+
+```shell
+
+# 克隆项目以及所有子模块
+git clone https://github.com/zhaohappy/libmedia.git --recursive
+
+# 进入 libmedia 目录
+cd libmedia
+
+# 安装依赖
+npm install
+
+# 编译 AVTranscoder 开发版
+npm run build-avtranscoder-dev
+
+# 启动本地 http 服务
+# 任何一个 http 服务都行，若报 edp 找不到，可以全局安装: npm install edp -g
+edp webserver start --port=9000
+
+# 浏览器访问 http://localhost:9000/test/avtranscoder.html
+
+```
+
+若要源码调试多线程 Worker 中的代码，设置 ```tsconfig.json``` 中```ENABLE_THREADS_SPLIT```宏为 ```true```并重新编译
+
+```json
+{
+  "cheap": {
+    "defined": {
+      "ENABLE_THREADS_SPLIT": true
+    }
+  }
+}
+```
+
+```tsconfig.json``` 还可设置其他宏来裁剪编译，你可以根据自己的需要更改相关设置，详情看 ```tsconfig.json``` -> ```cheap``` -> ```defined``` 中的配置
+
 ## 注意事项
 
 - wasm 文件建议托管到自己的 cdn 上，也可以使用示例里面的 ```cdn.jsdelivr.net``` cdn 的资源，查看[详情](./wasm.md#使用)
diff --git a/site/docs/index.md b/site/docs/index.md
@@ -17,14 +17,14 @@ features:
     description: '用户的数据在本地读取，无需上传到服务器'
   - title: '性能强大'
     description: '设计在多线程上并且没有数据拷贝开销，与 Wasm 模块互操作开销可忽略不计；并支持 Webcodecs 使用硬件编解码器'
+  - title: '完善的编解码器支持'
+    description: '支持视频编码格式 H265、H264、H266、VP9、VP8、AV1 和音频编码格式 AAC、MP3、FLAC、SPEEX、OPUS、G711'
   - title: '可扩展性'
     description: '提供低级的 API，可以应对各种使用场景，可以基于这些低级 API 实现更加复杂的业务逻辑'
   - title: '支持多种媒体格式'
     description: '支持 mp4、mov、mpegts、flv、matroska、webm、mp3、ogg、flac、aac、wav 封装格式'
-  - title: '完善的编解码器支持'
-    description: '支持视频编码格式 H265/H264/H266/VP9/VP8/AV1 和音频编码格式 AAC/MP3/FLAC/SPEEX/G711/OPUS'
   - title: '丰富的音视频协议支持'
-    description: '支持 hls/dash/rtmp/rtsp 协议'
+    description: '支持 hls、dash、rtmp、rtsp 协议'
   - title: '开箱即用的强大工具'
     description: '内部实现了播放器和转码器可快速集成使用'
 ---