@browser-mc/webcodecs-avif 0.0.1

package/README.md

@@ -0,0 +1,68 @@
+# @browser-mc/webcodecs-avif
+
+WebCodecs AV1 still-image encoder plus a minimal AVIF muxer re-exported from `@browser-mc/media-container`.
+
+## Encode A Canvas Source To AVIF
+
+```ts
+import { encodeImageToAvif } from '@browser-mc/webcodecs-avif';
+
+const bitmap = await createImageBitmap(file);
+const avif = await encodeImageToAvif(bitmap, { quality: 0.72 });
+bitmap.close();
+
+await fetch('/upload', {
+  method: 'POST',
+  body: new Blob([avif], { type: 'image/avif' }),
+});
+```
+
+## Mux An Existing AV1 Still Frame
+
+```ts
+import { muxStillAvif, type EncodedStillAv1 } from '@browser-mc/webcodecs-avif';
+
+const encoded: EncodedStillAv1 = {
+  chunk: av1Chunk,
+  decoderConfig: { codec: 'av01.0.08M.08', codedWidth: 1920, codedHeight: 1080 },
+  av1Config,
+  width: 1920,
+  height: 1080,
+};
+
+const avif = muxStillAvif(encoded);
+```
+
+## Add Metadata Items
+
+```ts
+import { muxStillAvif } from '@browser-mc/webcodecs-avif';
+
+const avif = muxStillAvif(encoded, {
+  metadata: [
+    {
+      type: 'Exif',
+      data: exifItemPayload,
+      name: 'Exif',
+    },
+  ],
+});
+```
+
+`metadata[].data` is the AVIF item payload. For Exif items, callers should include the AVIF Exif item prefix when needed.
+
+## Commands
+
+```sh
+pnpm --filter @browser-mc/webcodecs-avif build
+pnpm --filter @browser-mc/webcodecs-avif typecheck
+node packages/webcodecs-avif/test/encode-jpeg-to-avif.mjs
+```
+
+## Notes
+
+- Requires WebCodecs for encoding/decoding.
+- Alpha is rejected until auxiliary alpha item muxing is implemented.
+- The muxer writes a minimal still-image AVIF and does not preserve arbitrary source AVIF boxes.
+- `av1C`, `pixi`, and `colr` are derived from the AV1 Sequence Header OBU. Profile compatibility brands are emitted only when the encoded image meets the matching AVIF profile constraints.
+- Container-specific mux helpers live in `@browser-mc/media-container`; this package re-exports the AVIF helpers for convenience.

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { type EncodedStillAv1 } from '@browser-mc/media-container';
+export type { AvifMetadataItem, EncodedStillAv1, MuxStillAvifOptions, } from '@browser-mc/media-container';
+export { findSequenceHeaderObu, makeAv1Config, muxStillAvif, } from '@browser-mc/media-container';
+export type EncodeAvifOptions = {
+    quality?: number;
+    width?: number;
+    height?: number;
+    codec?: string;
+    bitrate?: number;
+    av1Config?: Uint8Array;
+    alpha?: 'discard' | 'keep';
+};
+export declare function encodeImageToAv1(source: CanvasImageSource | VideoFrame, options?: EncodeAvifOptions): Promise<EncodedStillAv1>;
+export declare function encodeImageToAvif(source: CanvasImageSource | VideoFrame, options?: EncodeAvifOptions): Promise<Uint8Array>;
+export declare function decodeAv1Still(encoded: EncodedStillAv1): Promise<VideoFrame>;
+export declare function canvasSourceFromBlob(blob: Blob): Promise<ImageBitmap>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,6BAA6B,CAAC;AAErC,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,qBAAqB,EACrB,aAAa,EACb,YAAY,GACb,MAAM,6BAA6B,CAAC;AAErC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,GAAG,UAAU,EAAE,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,eAAe,CAAC,CA4DxI;AAED,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,UAAU,EAAE,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,UAAU,CAAC,CAEpI;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAiBlF;AAED,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC,CAE3E"}

package/dist/index.js

@@ -0,0 +1,119 @@
+import { bytesEqual, concat } from '@browser-mc/binary';
+import { findSequenceHeaderObu, makeAv1Config, muxStillAvif, } from '@browser-mc/media-container';
+export { findSequenceHeaderObu, makeAv1Config, muxStillAvif, } from '@browser-mc/media-container';
+export async function encodeImageToAv1(source, options = {}) {
+    assertWebCodecs();
+    if (options.alpha === 'keep')
+        throw new Error('AVIF alpha is not supported yet; auxiliary alpha items are not muxed');
+    const width = options.width ?? sourceWidth(source);
+    const height = options.height ?? sourceHeight(source);
+    const codec = options.codec ?? 'av01.0.08M.08';
+    const bitrate = options.bitrate ?? Math.max(80_000, Math.round(width * height * (options.quality ?? 0.8) * 0.7));
+    const support = await VideoEncoder.isConfigSupported({
+        codec,
+        width,
+        height,
+        bitrate,
+        framerate: 1,
+        alpha: options.alpha ?? 'discard',
+        latencyMode: 'quality',
+    });
+    if (!support.supported)
+        throw new Error(`VideoEncoder does not support ${codec}`);
+    const config = support.config;
+    if (!config)
+        throw new Error(`VideoEncoder did not return a normalized config for ${codec}`);
+    let metadataConfig;
+    const chunks = [];
+    let rejectEncoderError = () => { };
+    const encoderError = new Promise((_, reject) => { rejectEncoderError = reject; });
+    const encoder = new VideoEncoder({
+        error: rejectEncoderError,
+        output: (chunk, metadata) => {
+            const bytes = new Uint8Array(chunk.byteLength);
+            chunk.copyTo(bytes);
+            chunks.push(bytes);
+            if (metadata?.decoderConfig)
+                metadataConfig = metadata.decoderConfig;
+        },
+    });
+    let shouldCloseFrame = false;
+    const frame = source instanceof VideoFrame ? source : makeFrameFromCanvasSource(source);
+    try {
+        encoder.configure(config);
+        encoder.encode(frame, { keyFrame: true });
+        await Promise.race([encoder.flush(), encoderError]);
+    }
+    finally {
+        encoder.close();
+        if (shouldCloseFrame)
+            frame.close();
+    }
+    function makeFrameFromCanvasSource(canvasSource) {
+        shouldCloseFrame = true;
+        return new VideoFrame(canvasSource, { timestamp: 0, duration: 1_000_000 });
+    }
+    const chunk = concat(chunks);
+    const decoderConfig = metadataConfig ?? { codec, codedWidth: width, codedHeight: height, description: options.av1Config };
+    const sequenceHeaderObu = findSequenceHeaderObu(chunk);
+    if (!sequenceHeaderObu)
+        throw new Error('Encoded AV1 chunk does not contain a Sequence Header OBU');
+    const generatedAv1Config = makeAv1Config(codec, sequenceHeaderObu);
+    if (options.av1Config && !bytesEqual(options.av1Config, generatedAv1Config)) {
+        throw new Error('Provided av1Config does not match the encoded AV1 Sequence Header OBU');
+    }
+    const av1Config = generatedAv1Config;
+    return { chunk, decoderConfig, av1Config, width, height };
+}
+export async function encodeImageToAvif(source, options = {}) {
+    return muxStillAvif(await encodeImageToAv1(source, options));
+}
+export async function decodeAv1Still(encoded) {
+    assertWebCodecs();
+    const frame = await new Promise((resolve, reject) => {
+        const decoder = new VideoDecoder({
+            error: reject,
+            output: resolve,
+        });
+        decoder.configure(encoded.decoderConfig);
+        decoder.decode(new EncodedVideoChunk({
+            type: 'key',
+            timestamp: 0,
+            duration: 1_000_000,
+            data: encoded.chunk,
+        }));
+        decoder.flush().then(() => decoder.close(), reject);
+    });
+    return frame;
+}
+export async function canvasSourceFromBlob(blob) {
+    return createImageBitmap(blob);
+}
+function assertWebCodecs() {
+    if (typeof VideoEncoder === 'undefined' || typeof VideoDecoder === 'undefined' || typeof VideoFrame === 'undefined') {
+        throw new Error('WebCodecs API is not available in this environment');
+    }
+}
+function sourceWidth(source) {
+    if (source instanceof VideoFrame)
+        return source.displayWidth;
+    if ('videoWidth' in source)
+        return source.videoWidth;
+    if ('naturalWidth' in source)
+        return source.naturalWidth;
+    if ('width' in source)
+        return Number(source.width);
+    throw new Error('Cannot determine source width');
+}
+function sourceHeight(source) {
+    if (source instanceof VideoFrame)
+        return source.displayHeight;
+    if ('videoHeight' in source)
+        return source.videoHeight;
+    if ('naturalHeight' in source)
+        return source.naturalHeight;
+    if ('height' in source)
+        return Number(source.height);
+    throw new Error('Cannot determine source height');
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@browser-mc/webcodecs-avif",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@browser-mc/binary": "^0.0.1",
+    "@browser-mc/media-container": "^0.0.1"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prebuild": "pnpm --filter @browser-mc/media-container build",
+    "build": "tsc -p tsconfig.json",
+    "pretypecheck": "pnpm --filter @browser-mc/media-container build",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm build"
+  }
+}