const decoder = new VideoDecoder({
  output: (frame) => {
    // Paint frame to canvas
    ctx.drawImage(frame, 0, 0);
    frame.close(); // ⚠️ Always release memory
  },
  error: (err) => console.error("Decode error:", err),
});

decoder.configure({
  codec: "avc1.42001f",  // H.264 Baseline Level 3.1
  codedWidth: 1280,
  codedHeight: 720,
  description: avcDecoderConfigRecord, // Optional: ArrayBuffer
  hardwareAcceleration: "prefer-hardware", // or "prefer-software"
  optimizeForLatency: true,
});

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // chunk: EncodedVideoChunk
    // metadata: { decoderConfig?, svc?, alphaSideData? }
    muxer.addVideoChunk(chunk, metadata);
  },
  error: (e) => console.error(e),
});

encoder.configure({
  codec: "vp09.00.10.08", // VP9 Profile 0
  width: 1280,
  height: 720,
  bitrate: 2_000_000,
  framerate: 30,
  bitrateMode: "variable",
  hardwareAcceleration: "prefer-hardware",
  latencyMode: "realtime",  // for conferencing
});

// Encode a frame — force keyframe every 150 frames
encoder.encode(videoFrame, { keyFrame: frameCount % 150 === 0 });
videoFrame.close();

// From a canvas element
const frame = new VideoFrame(canvasElement, {
  timestamp: performance.now() * 1000, // microseconds
  duration: 33333, // ~30fps in µs
});

// From raw pixel data (RGBA)
const init = {
  format: "RGBA",
  codedWidth: 640, codedHeight: 480,
  timestamp: 0,
};
const frame2 = new VideoFrame(rgbaBuffer, init);

// Read pixel data back
await frame.copyTo(outputBuffer, {
  format: "I420",
  rect: { x: 0, y: 0, width: 640, height: 480 },
});

frame.close(); // Always!

const audioDecoder = new AudioDecoder({
  output: (audioData) => {
    // Route to AudioWorklet or Web Audio API
    workletNode.port.postMessage({ audioData }, [audioData]);
  },
  error: (e) => console.error(e),
});

audioDecoder.configure({
  codec: "opus",
  sampleRate: 48000,
  numberOfChannels: 2,
});

const audioEncoder = new AudioEncoder({
  output: (chunk, meta) => muxer.addAudioChunk(chunk, meta),
  error: (e) => console.error(e),
});

audioEncoder.configure({
  codec: "opus",
  sampleRate: 48000,
  numberOfChannels: 2,
  bitrate: 128_000,
});

// Creating manually (e.g., from network/file)
const chunk = new EncodedVideoChunk({
  type: "key",      // "key" | "delta"
  timestamp: 0,     // microseconds
  duration: 33333,  // microseconds
  data: nalUnitBuffer,
});

// Reading the data back
const buf = new ArrayBuffer(chunk.byteLength);
chunk.copyTo(buf);

const canvas = document.getElementById("output");
const ctx = canvas.getContext("2d");

// In the decoder output callback:
output: (frame) => {
  ctx.drawImage(frame, 0, 0);
  frame.close();
}

// VideoFrame as a WebGL texture source
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(
  gl.TEXTURE_2D, 0, gl.RGBA,
  gl.RGBA, gl.UNSIGNED_BYTE,
  frame  // VideoFrame is a valid TexImageSource
);
frame.close();

const stream = await navigator.mediaDevices
  .getUserMedia({ video: true, audio: true });

const [videoTrack] = stream.getVideoTracks();
const processor = new MediaStreamTrackProcessor({ track: videoTrack });
const reader = processor.readable.getReader();

while (true) {
  const { value: frame, done } = await reader.read();
  if (done) break;
  encoder.encode(frame, { keyFrame: frameCount++ % 150 === 0 });
  frame.close();
}

// 1. Feature detection
const { supported } = await VideoDecoder.isConfigSupported({
  codec: "avc1.42001f",
  codedWidth: 1280, codedHeight: 720,
});
if (!supported) throw new Error("Codec not supported");

// 2. Set up decoder
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const decoder = new VideoDecoder({
  output: (frame) => {
    canvas.width  = frame.displayWidth;
    canvas.height = frame.displayHeight;
    ctx.drawImage(frame, 0, 0);
    frame.close();
  },
  error: console.error,
});

decoder.configure({
  codec: "avc1.42001f",
  codedWidth: 1280, codedHeight: 720,
  description: avcConfig, // from demuxer
});

// 3. Feed encoded chunks from demuxer
for (const sample of videoSamples) {
  decoder.decode(new EncodedVideoChunk({
    type: sample.is_sync ? "key" : "delta",
    timestamp: sample.cts * 1e6 / sample.timescale,
    duration: sample.duration * 1e6 / sample.timescale,
    data: sample.data,
  }));
}

await decoder.flush();
decoder.close();
console.log("Done decoding!");

// Uses webm-muxer (npm) for containerization
import { Muxer, ArrayBufferTarget } from "webm-muxer";

const target = new ArrayBufferTarget();
const muxer = new Muxer({ target, video: { codec: "V_VP9", width: 1280, height: 720 }});

const encoder = new VideoEncoder({
  output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
  error: console.error,
});
encoder.configure({ codec: "vp09.00.10.08", width: 1280, height: 720, bitrate: 2e6, framerate: 30 });

// Feed frames...
let frameIndex = 0;
function encodeFrame(bitmap) {
  const frame = new VideoFrame(bitmap, {
    timestamp: frameIndex * 33333,
    duration: 33333,
  });
  encoder.encode(frame, { keyFrame: frameIndex % 150 === 0 });
  frame.close();
  frameIndex++;
}

// Finalize
async function finish() {
  await encoder.flush();
  muxer.finalize();
  const blob = new Blob([target.buffer], { type: "video/webm" });
  const url = URL.createObjectURL(blob);
  document.getElementById("download").href = url;
}

const stream = await navigator.mediaDevices
  .getUserMedia({ audio: true });
const [track] = stream.getAudioTracks();

const proc = new MediaStreamTrackProcessor({ track });
const reader = proc.readable.getReader();

const enc = new AudioEncoder({
  output: (chunk) => sendOverNetwork(chunk),
  error: console.error,
});
enc.configure({ codec: "opus", sampleRate: 48000, numberOfChannels: 1, bitrate: 64000 });

while (true) {
  const { value: audioData, done } = await reader.read();
  if (done) break;
  enc.encode(audioData);
  audioData.close();
}

let decoder = createDecoder();

function createDecoder() {
  return new VideoDecoder({
    output: handleFrame,
    error: (e) => {
      console.error("Decoder error:", e.message);
      // Re-create if needed
      if (decoder.state === "closed") {
        decoder = createDecoder();
        decoder.configure(lastConfig);
      }
    },
  });
}

// Common error types:
// EncodingError — codec-level encode/decode failure
// InvalidStateError — calling methods on a closed codec
// NotSupportedError — unsupported config (check isConfigSupported first!)