const frame = new VideoFrame(element, {
    timestamp: timestamp_in_micro_second, // タイムスタンプをμ秒で指定
    duration: duration_in_micro_second, // フレームの長さをμ秒で指定
 });

// do something with frame

// release
frame.close();

const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.drawImage(frame, 0, 0);

const encoder =  new VideoEncoder({
    output: (chunk) => {
        // エンコード成功時の処理
        // chunkはエンコード済みのデータ
    },
    error: (err) => {
        // エラー時の処理
    }
});

await encoder.configure({
    codec: CODEC, // コーデックの指定
    width: WIDTH, // 幅の指定
    height: HEIGHT, // 高さの指定
    framerate: 10 // フレームレイトの指定
});

// フレーム取得
const frame = new VideoFrame(element, {
    timestamp: timestamp_in_micro_second, // タイムスタンプをμ秒で指定
    duration: duration_in_micro_second, // フレームの長さをμ秒で指定
});

// エンコード （成功すると、output に指定した関数が呼ばれる）
encoder.encode(frame, { keyFrame : true}); 

frame.close(); // フレームを解放

const decoder = new VideoDecoder({
    output: (frame) => {
        // デコード成功時の処理  
        frame.close(); // 使い終わったフレームを解放
    },
    error: (err) => {
        // エラー時の処理
    }
});

await decoder.configure({ codec: CODEC });

// デコード （成功すると、output に指定した関数が呼ばれる）
decoder.decode(chunk); // chunkはエンコード済みのデータ

you should be able to work around it by using a I420 input instead of NV12.

  let trackGenerator = null;
  let writer = null;
  let mediaStream = null;
  async function prepareGenerator() {
    if (! trackGenerator) { 
      trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });
      writer = trackGenerator.writable.getWriter();
      await writer.ready;
      mediaStream = new MediaStream();
      mediaStream.addTrack(trackGenerator);
    }
  }

  let frameCounter = 0;
  function frameHandlerFunc(element) {
    const frame = getFrame(element, frameCounter);
    frameCounter++;
    writer.write(frame); // GeneratorのWritableStreamに書き込む
    frame.close();
  }

 // VideoFrameの取得
  function getFrame(element, frameCount) {
    const frame = new VideoFrame(element, {
      timestamp: frameCount * FRAME_DURATION, // マイクロ秒で指定
      duration: FRAME_DURATION, // マイクロ秒で指定
    });

    return frame;
  }

    const miliSec = FRAME_DURATION / 1000; // m秒で指定
    let timerId = setInterval(frameHandlerFunc, miliSec, element);

  // --- エンコーダーの準備 ---
  let encoder = new VideoEncoder({
    output: (chunk) => {
      if (decoder) {
        decoder.decode(chunk); // デコーダーに渡す
      }
    },
    error: (err) => {
      // エラー時の処理
    }
  });

  // --- エンコーダーの初期化 ---
  await encoder.configure({
    codec: CODEC,
    width: SRC_WIDTH,
    height: SRC_HEIGHT,
    framerate: 10
  });

  // --- デコーダーの準備 ---
  let decoder = new VideoDecoder({
    output: async (frame) => {
      writer.write(frame); // GeneratorのWritableStreamに書き込む
      frame.close();
    },
    error: (err) => {
      // エラー時の処理
    }
  })

  // デコーダーの初期化
  await decoder.configure({ codec: CODEC });

  let frameCounter = 0;
  function frameEncDecHandlerFunc(element) {
    const asKyeFrame = ((frameCounter % 20) === 0); // 定期的にキーフレームを入れる
    const frame = getFrame(element, frameCounter);
    frameCounter++;

    encoder.encode(frame, { keyFrame : asKyeFrame}); // エンコーダーに渡す
        // エンコーダー → デコーダー → Generator と処理がつながっている
    frame.close();
  }

  let trackProcessor = new MediaStreamTrackProcessor(videoTrack);
  const reader = trackProcessor.readable.getReader();

    let frameCounter = 0;
    while (true) {
      const result = await reader.read();
      if (result.done) break;

      const frame = result.value;
      if (encoder.encodeQueueSize > 2) {
        // Too many frames in flight, encoder is overwhelmed
        // let's drop this frame.
        frame.close();
      } else {
        frameCounter++;
        const keyFrame = (frameCounter % 150 == 0);
        console.log('src Frame', frame);
        encoder.encode(frame, { keyFrame });
        frame.close();
      }
    }
  }

  // convert VideoFrame format: NV12 --> I420
  async function convertNV12toI420(srcFrame) {
    if (srcFrame.format !== 'NV12') {
      debugger;
    }
    const size = srcFrame.allocationSize();
    const buf = new ArrayBuffer(size);
    await srcFrame.copyTo(buf);

    // === convert ===
    const buf2 = new ArrayBuffer(size);
    const view1 = new Int8Array(buf);
    const view2 = new Int8Array(buf2);

    // --- Y ----
    const sizeY = srcFrame.codedWidth * srcFrame.codedHeight;
    for(let i = 0; i < sizeY; i++) {
      view2[i] = view1[i];
    }

    // --- UV --- (UVUVUV --> UUUVVV)
    const UNDERSAMPLING = 4;
    const sizeU = sizeY / UNDERSAMPLING;
    const offsetU = sizeY;
    const offsetV = sizeY + sizeU;
    for(let i = 0; i < sizeU; i++) {
      // U
      view2[offsetU + i] = view1[sizeY + i*2];

      // V
      view2[offsetV + i] = view1[sizeY + i*2 + 1];
    }
    // ===== convert ====

    const format = 'I420';
    const destFrame = new VideoFrame(buf2, {
      format: format,
      codedWidth: srcFrame.codedWidth,
      codedHeight: srcFrame.codedHeight,
      timestamp: srcFrame.timestamp,
      duration: srcFrame.duration
    });

    return destFrame;
  }

 const frameI420 = await convertNV12toI420(frameNV12);

  const SAMPLE_RATE = 8000;  // 8000サンプル/秒
  const SAMPLE_PER_CYCLE = SAMPLE_RATE / 500; // 500 Hz の音の一周分のサンプル数

  function makeAudioData() {
    const format = 'f32-planar'; // 実数の -1.0〜1.0の値をとる、チャネルごとにデータをまとめるplanar
    
    // sampleRate  need between 3000 and 768000,
    const sampleRate = SAMPLE_RATE;
    const frames = sampleRate * 1; // 総フレーム数。1 秒分
    const channels = 1; // モノラル
    const timestamp = 0;
        
    // -- サンプルの生成 ---
    const step = SAMPLE_PER_CYCLE;
    const part = step/4;
    const waveHeight = 0.64;
    const waveStep = waveHeight / part;
    const data = new Float32Array(frames);
    for (let i = 0; i < frames; i += step) {
      for (let j = 0; j < part; j++) { // 0 → waveHeight
        data[i + j] = waveStep * j;
      }
      
      for (let j = 0; j < part; j++) { // waveHeight → 0
        data[i + part + j] = waveHeight - waveStep * j;
      }

      for (let j = 0; j < part; j++) { // 0 → -waveHeight
        data[i + part*2 + j] = -(waveStep * j);
      }

      for (let j = 0; j < part; j++) { // -waveHeight → 0
        data[i + part*3 + j] = -(waveHeight - waveStep * j);
      }
    }

    // --- AudioData のインスタンスを生成 ---
    const audioData = new AudioData({
      format: format,
      sampleRate: sampleRate,
      numberOfFrames: frames,
      numberOfChannels: channels,
      timestamp: timestamp,
      data: data
    });

    return audioData;
  }

  let ctx = null;
  let startTime = 0;
  function playAudioData(audioData) {
    // get F32FloatArray
    const len = audioData.allocationSize({ planeIndex: 0}) / 4;
    const data = new Float32Array(len);
    audioData.copyTo(data, {planeIndex: 0});

    if (! ctx) {
      ctx = new AudioContext();
    }
    if (startTime <= 0) {
      startTime = ctx.currentTime; // 初めての再生時に、基準時間を覚える
    }

    const buffer = new AudioBuffer({
      sampleRate: audioData.sampleRate,
      length: audioData.allocationSize({ planeIndex: 0}) / 4, // バイト数 → 要素数
      numberOfChannels: audioData.numberOfChannels,
    });
    buffer.copyToChannel(data, 0);
    const offsetSec = audioData.timestamp / (1000*1000);

    // --- 鳴らす ---
    // AudioBufferSourceNode を使う
    const source = ctx.createBufferSource();
    source.buffer = buffer;
    source.connect(ctx.destination);

    // 適切なタイミングで再生
    source.start(startTime + offsetSec);
  }

  // 基準時間をリセット
  function resetStartTime() {
    startTime = 0;
  }

let encoder = null;
let decoder = null;
const CODEC = 'opus'; // OK, decoded 48k (chrome)

  async function prepareEncoder() {
    if (!encoder) {
      const selectedCodec = CODEC;
      encoder = new AudioEncoder({
        output: (chunk) => {
          if (decoder) {
            decoder.decode(chunk);
          }
        },
        error: (err) => {
          console.error(err);
        }
      });

      await encoder.configure({
        codec: selectedCodec,
        numberOfChannels: 1,
        sampleRate: SAMPLE_RATE,
      });
    }


    if (!decoder) {
      const selectedCodec = CODEC;
      decoder = new AudioDecoder({
        output: async (audioData) => {
          playAudioData(audioData);
          audioData.close();
        },
        error: (err) => {
          console.error('Decode Error:', err);
        }
      })
      await decoder.configure({
        codec: selectedCodec,
        numberOfChannels: 1,
        sampleRate: SAMPLE_RATE,
      });
    }
  }

  async function encodeAudio() {
    // エンコーダー、デコーダーを準備
    await prepareEncoder();
    
    // 1秒間のオーディオデータを生成 
    const audioData = makeAudioData();

    // 基準時間をクリア
    resetStartTime();

    // エンコード → デコード → 再生を開始
    if (encoder) {
      encoder.encode(audioData);
    }

  }

const frame = new VideoFrame(element, {
    timestamp: timestamp_in_micro_second, // タイムスタンプをμ秒で指定. required (仕様上はoptional)
    duration: duration_in_micro_second, // フレームの長さをμ秒で指定. optional
 });

// do something with frame

// release
frame.close();