Skip to content

Commit

Permalink
docs: update 2.0 readme and example
Browse files Browse the repository at this point in the history
  • Loading branch information
@ForeverSc
ForeverSc committed Aug 13, 2024
1 parent 5652607 commit c21f059
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 4 deletions.
93 changes: 91 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,104 @@ Simultaneously retrieves packet data on all streams at a certain time point and
Parameters:
- `time`: Required, in seconds.

```typescript
getMediaInfo(): Promise<WebMediaInfo> // 2.0 New
```
Get the media information of a file, the output is referenced from `ffprobe`
```json
{
"format_name": "mov,mp4,m4a,3gp,3g2,mj2",
"duration": 10.026667,
"bit_rate": "629116",
"start_time": 0,
"nb_streams": 4,
"streams": [
{
"id": 1,
"index": 0,
"codec_type": 0,
"codec_type_string": "video",
"codec_name": "h264",
"codec_string": "avc1.4d400c",
"profile": "",
"pix_fmt": "",
"level": -99,
"width": 320,
"height": 176,
"channels": 0,
"sample_rate": 0,
"sample_fmt": "",
"bit_rate": "300570",
"extradata_size": 41,
"extradata": Uint8Array,
"r_frame_rate": "25/1",
"avg_frame_rate": "25/1",
"sample_aspect_ratio": "N/A",
"display_aspect_ratio": "N/A",
"start_time": 0,
"duration": 10,
"rotation": 0,
"nb_frames": "250",
"tags": {
"creation_time": "2012-03-13T08:58:06.000000Z",
"language": "und",
"vendor_id": "[0][0][0][0]",
"encoder": "JVT/AVC Coding"
}
},
{
"id": 2,
"index": 1,
"codec_type": 1,
"codec_type_string": "audio",
"codec_name": "aac",
"codec_string": "mp4a.40.2",
"profile": "",
"pix_fmt": "",
"level": -99,
"width": 0,
"height": 0,
"channels": 2,
"sample_rate": 48000,
"sample_fmt": "",
"bit_rate": "160545",
"extradata_size": 2,
"extradata": Uint8Array,
"r_frame_rate": "0/0",
"avg_frame_rate": "0/0",
"sample_aspect_ratio": "N/A",
"display_aspect_ratio": "N/A",
"start_time": 0,
"duration": 10.026666666666666,
"rotation": 0,
"nb_frames": "470",
"tags": {
"creation_time": "2012-03-13T08:58:06.000000Z",
"language": "und",
"vendor_id": "[0][0][0][0]"
}
}
]
}
```

```typescript
setLogLevel(level: AVLogLevel) // 2.0 New
```
Parameters:
- `level`: Required, output log level, see `AVLogLevel` for details.

```typescript
destroy(): void
```
Destroys the instance and releases the worker.

## Custom Demuxer
Currently, two versions of the demuxer are provided by default to support different formats:
- `dist/wasm-files/ffmpeg.js`: Full version (gzip: 941 kB), larger in size, supports mov, mp4, m4a, 3gp, 3g2, mj2, avi, flv, matroska, webm, m4v, mpeg, asf
- `dist/wasm-files/ffmpeg-mini.js`: Minimalist version (gzip: 115 kB), smaller in size, only supports mov, mp4, m4a, 3gp, 3g2, matroska, webm, m4v
- `dist/wasm-files/ffmpeg.js`: Full version (gzip: 996 kB), larger in size, supports mov, mp4, m4a, 3gp, 3g2, mj2, avi, flv, matroska, webm, m4v, mpeg, asf
- `dist/wasm-files/ffmpeg-mini.js`: Minimalist version (gzip: 456 kB), smaller in size, only supports mov, mp4, m4a, 3gp, 3g2, matroska, webm, m4v
> If you want to use a smaller size version, you can use version 1.0 of web-demuxer, the lite version is only 115KB
> Version 1.0 is written in C, focuses on WebCodecs, and is small in size, while version 2.0 uses C++ Embind, which provides richer media information output, is easier to maintain, and is large in size
You can also implement a demuxer for specific formats through custom configuration:

Expand Down
92 changes: 90 additions & 2 deletions README_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,15 +162,103 @@ getAVPackets(time: number): Promise<WebAVPacket[]>
参数:
- `time`: 必填，单位为s

```typescript
getMediaInfo(): Promise<WebMediaInfo> // 2.0新增
```
获取文件的媒体信息, 输出结果参考自`ffprobe`
```json
{
"format_name": "mov,mp4,m4a,3gp,3g2,mj2",
"duration": 10.026667,
"bit_rate": "629116",
"start_time": 0,
"nb_streams": 4,
"streams": [
{
"id": 1,
"index": 0,
"codec_type": 0,
"codec_type_string": "video",
"codec_name": "h264",
"codec_string": "avc1.4d400c",
"profile": "",
"pix_fmt": "",
"level": -99,
"width": 320,
"height": 176,
"channels": 0,
"sample_rate": 0,
"sample_fmt": "",
"bit_rate": "300570",
"extradata_size": 41,
"extradata": Uint8Array,
"r_frame_rate": "25/1",
"avg_frame_rate": "25/1",
"sample_aspect_ratio": "N/A",
"display_aspect_ratio": "N/A",
"start_time": 0,
"duration": 10,
"rotation": 0,
"nb_frames": "250",
"tags": {
"creation_time": "2012-03-13T08:58:06.000000Z",
"language": "und",
"vendor_id": "[0][0][0][0]",
"encoder": "JVT/AVC Coding"
}
},
{
"id": 2,
"index": 1,
"codec_type": 1,
"codec_type_string": "audio",
"codec_name": "aac",
"codec_string": "mp4a.40.2",
"profile": "",
"pix_fmt": "",
"level": -99,
"width": 0,
"height": 0,
"channels": 2,
"sample_rate": 48000,
"sample_fmt": "",
"bit_rate": "160545",
"extradata_size": 2,
"extradata": Uint8Array,
"r_frame_rate": "0/0",
"avg_frame_rate": "0/0",
"sample_aspect_ratio": "N/A",
"display_aspect_ratio": "N/A",
"start_time": 0,
"duration": 10.026666666666666,
"rotation": 0,
"nb_frames": "470",
"tags": {
"creation_time": "2012-03-13T08:58:06.000000Z",
"language": "und",
"vendor_id": "[0][0][0][0]"
}
}
]
}
```
```typescript
setLogLevel(level: AVLogLevel) // 2.0新增
```
参数:
- `level`: 必填，输出日志等级, 详见`AVLogLevel`

```typescript
destroy(): void
```
销毁实例，释放worker

## 自定义Demuxer
目前默认提供两个版本的demuxer, 用于支持不同的格式:
- `dist/wasm-files/ffmpeg.js`: 完整版(gzip: 941 kB), 体积较大，支持mov,mp4,m4a,3gp,3g2,mj2,avi,flv,matroska,webm,m4v,mpegi,asf
- `dist/wasm-files/ffmpeg-mini.js`: 精简版本(gzip: 115 kB)，体积小，仅支持mov,mp4,m4a,3gp,3g2,matroska,webm,m4v
- `dist/wasm-files/ffmpeg.js`: 完整版(gzip: 996 kB), 体积较大，支持mov,mp4,m4a,3gp,3g2,mj2,avi,flv,matroska,webm,m4v,mpegi,asf
- `dist/wasm-files/ffmpeg-mini.js`: 精简版本(gzip: 456 kB)，体积小，仅支持mov,mp4,m4a,3gp,3g2,matroska,webm,m4v
> 如果你想使用体积更小的版本，可以使用1.0版本的web-demuxer，精简版本仅115KB
> 1.0版本使用C编写，聚焦WebCodecs，体积小，2.0版本使用C++ Embind，提供了更丰富的媒体信息输出，更易维护，体积大
你也可以通过自定义配置，实现指定格式的demxuer：

Expand Down
20 changes: 20 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ <h1>Web-Demuxer</h1>
<ul>
<li><a href="#example-seek">Seek Video Frame</a></li>
<li><a href="#example-play">Play Video</a></li>
<li><a href="#example-get-media-info">Get Media Info</a></li>
<li><a href="#example-get-all-video-packets">Get All Video Packets</a></li>
</ul>
</details>
Expand Down Expand Up @@ -88,6 +89,18 @@ <h3>Play Video</h3>
<canvas id="example-play-canvas" width="800px" height="450px"></canvas>
</card>
</section>
<section id="example-get-media-info">
<hgroup>
<h3>Get Media Info</h3>
<p>Select a video file and get media info, open devtools to see console output</p>
</hgroup>
<card>
<fieldset role="group">
<input type="file" id="example-get-media-info-file">
<button id="example-get-media-info-btn">Get</button>
</fieldset>
</card>
</section>
<section id="example-get-all-video-packets">
<hgroup>
<h3>Get All Video Packets</h3>
Expand Down Expand Up @@ -209,6 +222,13 @@ <h3>Get All Video Packets</h3>
console.log('all video packets:', await getAllPackets(file));
});

document.getElementById('example-get-media-info-btn').addEventListener('click', async () => {
const file = document.getElementById('example-get-media-info-file').files[0];
await demuxer.load(file);
const mediaInfo = await demuxer.getMediaInfo();
console.log('media info: ', mediaInfo);
});

function wait(time) {
return new Promise((resolve) => {
setTimeout(resolve, time)
Expand Down

0 comments on commit c21f059

Please sign in to comment.