diff --git a/README.md b/README.md index d32f7d4..3a5b2b2 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,8 @@ npm install web-demuxer import { WebDemuxer } from "web-demuxer" const demuxer = new WebDemuxer({ - wasmLoaderPath: "", // wasm file path + // ⚠️ you need to put the dist/wasm-files file in the npm package into a static directory like public, making sure that the js and wasm in wasm-files are in the same directory + wasmLoaderPath: "https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/wasm-files/ffmpeg.js", }) // Take the example of seeking a video frame at a specified point in time @@ -50,10 +51,19 @@ async function seek(time) { ``` ## Examples -- [Seek Video Frame](https://foreversc.github.io/web-demuxer/#example-seek): [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L96) -- [Play Video](https://foreversc.github.io/web-demuxer/#example-play): [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L123) +- [Seek Video Frame](https://foreversc.github.io/web-demuxer/#example-seek) | [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L96) +- [Play Video](https://foreversc.github.io/web-demuxer/#example-play) | [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L123) ## API +TODO: To be added, you can first look at the specific implementation in `src/web-demuxer.ts` with the `index.html` use case + +### `getVideoDecoderConfig` +### `seekEncodedVideoChunk` +### `readAVPacket` +### `getAVStream` +### `getAVPacket` + +## Custom Demuxer TODO ## License diff --git a/README_CN.md b/README_CN.md index 8b7165f..8389b2b 100644 --- a/README_CN.md +++ b/README_CN.md @@ -1,6 +1,6 @@

English | 简体中文

Web-Demuxer

-

使用WebAssembly在浏览器中对媒体文件进行解码, 专门为WebCodecs设计

+

使用WebAssembly在浏览器中对媒体文件进行解封装, 专门为WebCodecs设计

## Purpose WebCodecs只提供了decode的能力,但没有提供demux的能力。有一些JS解封装mp4box.js很酷,但它只支持mp4,Web-Demuxer的目的是一次性支持更多媒体格式 @@ -10,17 +10,18 @@ WebCodecs只提供了decode的能力,但没有提供demux的能力。有一些 - 📦 一次性支持多种媒体格式,比如mov/mp4/mkv/webm/flv/m4v/wmv/avi等等 - 🧩 支持自定义打包,可以调整配置,打包出指定格式的demuxer -### Install +## Install ```bash npm install web-demuxer ``` -### Usage +## Usage ```typescript import { WebDemuxer } from "web-demuxer" const demuxer = new WebDemuxer({ - wasmLoaderPath: "", // wasm file path + // ⚠️ 你需要将npm包中dist/wasm-files文件放到类似public的静态目录下,保证wasm-files中的js和wasm在同一目录下 + wasmLoaderPath: "https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/wasm-files/ffmpeg.js", }) // 以获取指定时间点的视频帧为例 @@ -49,7 +50,20 @@ async function seek(time) { } ``` -### API +## 案例 +- [Seek Video Frame](https://foreversc.github.io/web-demuxer/#example-seek) | [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L96) +- [Play Video](https://foreversc.github.io/web-demuxer/#example-play) | [code](https://github.com/ForeverSc/web-demuxer/blob/main/index.html#L123) + +## API +TODO: 待补充,你可以先看`src/web-demuxer.ts`中的具体实现与`index.html`的使用案例 + +### `getVideoDecoderConfig` +### `seekEncodedVideoChunk` +### `readAVPacket` +### `getAVStream` +### `getAVPacket` + +## Custom Demuxer TODO ## License diff --git a/index.html b/index.html index 34c5b11..8612968 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,7 @@

Play Video

const { WebDemuxer } = isDEV ? await import('./src') : await import('https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/web-demuxer.js') const demuxer = new WebDemuxer({ - wasmLoaderPath: isDEV ? "http://localhost:5173/src/lib/ffmpeg.js" : "https://cdn.jsdelivr.net/npm/web-demuxer@1.0.0/dist/wasm-files/ffmpeg.js", + wasmLoaderPath: isDEV ? "http://localhost:5173/src/lib/ffmpeg.js" : "https://cdn.jsdelivr.net/npm/web-demuxer@latest/dist/wasm-files/ffmpeg.js", }) document.getElementById('example-seek-btn').addEventListener('click', async (e) => {