html-video-element-webworker-polyfill 0.1.1 → 0.1.2

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.
Files changed (2) hide show
  1. package/README.md +50 -20
  2. package/package.json +13 -6
package/README.md CHANGED
@@ -3,7 +3,8 @@
3
3
  [![CI](https://github.com/stepancar/html-video-element-webworker-polyfill/actions/workflows/ci.yml/badge.svg)](https://github.com/stepancar/html-video-element-webworker-polyfill/actions/workflows/ci.yml)
4
4
  [![npm](https://img.shields.io/npm/v/html-video-element-webworker-polyfill)](https://www.npmjs.com/package/html-video-element-webworker-polyfill)
5
5
 
6
- Create and control an `HTMLVideoElement` from a Web Worker and read its decoded frames there.
6
+ Create and control an [`HTMLVideoElement`][HTMLVideoElement] from a [Web Worker][Web Workers] and read its decoded
7
+ frames there.
7
8
 
8
9
  ```ts
9
10
  const video = document.createElement("video");
@@ -19,9 +20,9 @@ video.currentTime = 12.5;
19
20
 
20
21
  ## Why not WebCodecs?
21
22
 
22
- WebCodecs gives you a decoder, not a player: you demux containers yourself, configure codecs, feed chunks and find
23
- keyframes to seek. `HTMLVideoElement` already handles every format the browser can play and gives frame-accurate
24
- seeking out of the box. It just does not exist in workers. This package makes it available there.
23
+ [WebCodecs][WebCodecs] gives you a decoder, not a player: you demux containers yourself, configure codecs, feed chunks
24
+ and find keyframes to seek. [`HTMLVideoElement`][HTMLVideoElement] already handles every format the browser can play
25
+ and gives frame-accurate seeking with [`currentTime`][currentTime] and [`seeked`][seeked] out of the box. It just does not exist in workers. This package makes it available there.
25
26
 
26
27
  ## Install
27
28
 
@@ -79,34 +80,63 @@ video.dispose();
79
80
 
80
81
  ## API
81
82
 
82
- | Import | Exports |
83
- | ---------------------------------------------------- | ------------------------------------------------------------------------------- |
84
- | `html-video-element-webworker-polyfill/host` | `createVideoHost(worker, { container? })` — main thread |
85
- | `html-video-element-webworker-polyfill/worker` | `createVideoElement()`, `WorkerVideoElement`, `polyfillDocument()` |
86
- | `html-video-element-webworker-polyfill/canvas2d` | `polyfill2dCanvasApi()` — `drawImage(video)`, `createPattern(video)` |
87
- | `html-video-element-webworker-polyfill/webgl` | `polyfillWebglAPI()` — `texImage2D(video)` and friends, WebGL 1 and 2 |
88
- | `html-video-element-webworker-polyfill/webgpu` | `polyfillWebgpu()` — `copyExternalImageToTexture`, `importExternalTexture` |
89
- | `html-video-element-webworker-polyfill/image-bitmap` | `polyfillCreateImageBitmap()`, `polyfillVideoFrame()` — `new VideoFrame(video)` |
90
- | `html-video-element-webworker-polyfill/auto` | installs every worker polyfill |
83
+ | Import | Exports |
84
+ | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
85
+ | `html-video-element-webworker-polyfill/host` | `createVideoHost(worker, { container? })` — main thread |
86
+ | `html-video-element-webworker-polyfill/worker` | `createVideoElement()`, `WorkerVideoElement`, `polyfillDocument()` — [`document.createElement`][createElement] |
87
+ | `html-video-element-webworker-polyfill/canvas2d` | `polyfill2dCanvasApi()` — [`drawImage`][drawImage], [`createPattern`][createPattern] |
88
+ | `html-video-element-webworker-polyfill/webgl` | `polyfillWebglAPI()` — [`texImage2D`][texImage2D] and friends, [WebGL][WebGL] 1 and 2 |
89
+ | `html-video-element-webworker-polyfill/webgpu` | `polyfillWebgpu()` — [`copyExternalImageToTexture`][copyExternalImageToTexture], [`importExternalTexture`][importExternalTexture] |
90
+ | `html-video-element-webworker-polyfill/image-bitmap` | `polyfillCreateImageBitmap()` — [`createImageBitmap`][createImageBitmap], `polyfillVideoFrame()` — [`new VideoFrame`][VideoFrame constructor] |
91
+ | `html-video-element-webworker-polyfill/auto` | installs every worker polyfill |
91
92
 
92
93
  Each entry point is tree-shakeable, so you only ship what you import.
93
94
 
94
- The worker element implements the `HTMLVideoElement` API: properties, `play()`, `pause()`, `load()`, seeking, media
95
- events and `requestVideoFrameCallback`. It adds two non-standard members:
95
+ The worker element implements the [`HTMLVideoElement`][HTMLVideoElement] API: properties, [`play()`][play],
96
+ [`pause()`][pause], [`load()`][load], seeking, [media events][media events] and
97
+ [`requestVideoFrameCallback`][requestVideoFrameCallback]. It adds two non-standard members:
96
98
 
97
- - `currentFrame` — the `VideoFrame` currently on screen, or `null`. It is closed when the next frame arrives; `clone()`
98
- it to keep it.
99
- - `dispose()` — releases the element. Unreferenced elements are also released automatically on garbage collection.
99
+ - `currentFrame` — the [`VideoFrame`][VideoFrame] currently on screen, or `null`. It is closed when the next frame
100
+ arrives; [`clone()`][clone] it to keep it.
101
+ - `dispose()` — releases the element. Unreferenced elements are also released automatically on garbage collection
102
+ via [`FinalizationRegistry`][FinalizationRegistry].
100
103
 
101
104
  Calling a main-thread function in a worker, or a worker function on the main thread, throws an
102
105
  `InvalidEnvironmentError`.
103
106
 
104
107
  ## Notes
105
108
 
106
- - Cross-origin media needs CORS (`crossOrigin = "anonymous"`), as with drawing a video on a canvas.
109
+ - Cross-origin media needs [CORS][CORS] ([`crossOrigin`][crossOrigin] `= "anonymous"`), as with drawing a video on a
110
+ canvas.
107
111
  - Frames are decoded on the main thread, so it must not be blocked for long.
108
- - Requires `VideoFrame` and `requestVideoFrameCallback`: Chrome/Edge 94+, Firefox 132+, Safari 17+.
112
+ - Requires [`VideoFrame`][VideoFrame] and [`requestVideoFrameCallback`][requestVideoFrameCallback]: Chrome/Edge 94+,
113
+ Firefox 132+, Safari 17+.
109
114
 
110
115
  ## License
111
116
 
112
117
  Apache-2.0
118
+
119
+ [HTMLVideoElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
120
+ [Web Workers]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
121
+ [WebCodecs]: https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API
122
+ [currentTime]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
123
+ [seeked]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event
124
+ [play]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
125
+ [pause]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
126
+ [load]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load
127
+ [media events]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events
128
+ [requestVideoFrameCallback]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback
129
+ [createElement]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
130
+ [drawImage]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
131
+ [createPattern]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern
132
+ [texImage2D]: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D
133
+ [WebGL]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
134
+ [copyExternalImageToTexture]: https://developer.mozilla.org/en-US/docs/Web/API/GPUQueue/copyExternalImageToTexture
135
+ [importExternalTexture]: https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/importExternalTexture
136
+ [createImageBitmap]: https://developer.mozilla.org/en-US/docs/Web/API/Window/createImageBitmap
137
+ [VideoFrame]: https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame
138
+ [VideoFrame constructor]: https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame/VideoFrame
139
+ [clone]: https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame/clone
140
+ [FinalizationRegistry]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry
141
+ [CORS]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS
142
+ [crossOrigin]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin
package/package.json CHANGED
@@ -1,18 +1,25 @@
1
1
  {
2
2
  "name": "html-video-element-webworker-polyfill",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "HTMLVideoElement inside Web Workers: a main-thread <video> mirrored into the worker with synchronous state, events and VideoFrames, plus Canvas 2D / WebGL / WebGPU polyfills.",
5
5
  "keywords": [
6
- "htmlvideoelement",
7
- "offscreencanvas",
8
- "polyfill",
9
6
  "video",
7
+ "html5-video",
8
+ "htmlvideoelement",
9
+ "video-processing",
10
+ "frame-extraction",
10
11
  "videoframe",
11
12
  "webcodecs",
13
+ "worker",
14
+ "web-worker",
15
+ "webworker",
16
+ "multithreading",
17
+ "off-main-thread",
18
+ "canvas",
19
+ "offscreencanvas",
12
20
  "webgl",
13
21
  "webgpu",
14
- "webworker",
15
- "worker"
22
+ "polyfill"
16
23
  ],
17
24
  "homepage": "https://stepancar.github.io/html-video-element-webworker-polyfill/",
18
25
  "bugs": {