webcodecs-examples 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,17 +4,18 @@ Complete, production-ready WebCodecs implementation examples for [WebCodecs Fund
|
|
|
4
4
|
|
|
5
5
|
## Examples
|
|
6
6
|
|
|
7
|
-
### 🎬
|
|
7
|
+
### 🎬 Video Player *(available)*
|
|
8
8
|
Full-featured video player demonstrating:
|
|
9
|
-
- Play/pause/seek controls
|
|
10
|
-
- Audio-video synchronization
|
|
11
|
-
- Worker-based decoding
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
9
|
+
- Play/pause/seek controls with Clock-based timing
|
|
10
|
+
- Audio-video synchronization using Web Audio API timeline
|
|
11
|
+
- Worker-based video decoding for performance
|
|
12
|
+
- WebGPU rendering (GPUFrameRenderer from webcodecs-utils)
|
|
13
|
+
- Segment-based audio loading (30s chunks)
|
|
14
|
+
- MP4 demuxing with MP4Box
|
|
15
15
|
|
|
16
|
-
**
|
|
17
|
-
**
|
|
16
|
+
**Usage**: `import { WebCodecsPlayer } from 'webcodecs-examples'`
|
|
17
|
+
**Demo**: `npm run dev`
|
|
18
|
+
**Source**: [/src/player](./src/player)
|
|
18
19
|
|
|
19
20
|
---
|
|
20
21
|
|
|
@@ -59,17 +60,42 @@ These examples complement the [WebCodecs Fundamentals](https://webcodecsfundamen
|
|
|
59
60
|
|
|
60
61
|
The fundamentals docs teach concepts. These examples show production implementation.
|
|
61
62
|
|
|
62
|
-
##
|
|
63
|
+
## Installation
|
|
64
|
+
|
|
65
|
+
### As an npm package
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
npm install webcodecs-examples
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import { WebCodecsPlayer } from 'webcodecs-examples';
|
|
73
|
+
|
|
74
|
+
const player = new WebCodecsPlayer({
|
|
75
|
+
src: videoFile,
|
|
76
|
+
canvas: document.querySelector('canvas')
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
await player.initialize();
|
|
80
|
+
await player.play();
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Via CDN
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<script type="module">
|
|
87
|
+
import { WebCodecsPlayer } from 'https://esm.sh/webcodecs-examples';
|
|
88
|
+
// Use WebCodecsPlayer...
|
|
89
|
+
</script>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Clone and run locally
|
|
63
93
|
|
|
64
94
|
```bash
|
|
65
|
-
# Clone the repo
|
|
66
95
|
git clone https://github.com/sb2702/webcodecs-examples.git
|
|
67
96
|
cd webcodecs-examples
|
|
68
|
-
|
|
69
|
-
# Run the player example
|
|
70
|
-
cd player
|
|
71
97
|
npm install
|
|
72
|
-
npm run dev
|
|
98
|
+
npm run dev # Run player demo
|
|
73
99
|
```
|
|
74
100
|
|
|
75
101
|
## Related Projects
|