Function initializeWorkerVideoRecorder

src/platforms/wasm/compiler/index.ts:1302–1458

* Initializes main-thread video recording with worker frame transfer * Worker captures frames as ImageBitmap and sends to main thread * Main thread draws to mirror canvas and uses MediaRecorder (where it's available) * @param {HTMLElement} recordButton - The record button element

(recordButton)

 * @param {HTMLElement} recordButton - The record button element
 */
function initializeWorkerVideoRecorder(recordButton) {
  console.log('Initializing video recorder for worker mode');

  // Check MediaRecorder support
  if (typeof MediaRecorder === 'undefined') {
    console.warn('MediaRecorder API not supported, video recording disabled');
    recordButton.style.display = 'none';
    return;
  }

  // Make record button visible
  recordButton.classList.add('visible');
  console.log('Record button made visible');

  // Try direct capture from the main canvas. After transferControlToOffscreen(),
  // the OffscreenCanvas content auto-syncs to the original HTMLCanvasElement.
  // captureStream() can capture this displayed content directly, eliminating the
  // expensive ImageBitmap→postMessage→mirror canvas pipeline.
  const mainCanvas = document.getElementById('myCanvas');
  let useDirectCapture = false;

  if (mainCanvas) {
    try {
      const testStream = /** @type {HTMLCanvasElement} */ (mainCanvas).captureStream(0);
      if (testStream && testStream.getVideoTracks().length > 0) {
        testStream.getTracks().forEach((t) => t.stop());
        useDirectCapture = true;
        console.log('Direct canvas capture supported - using optimized recording pipeline (no ImageBitmap transfer)');
      }
    } catch (e) {
      console.log('Direct canvas capture not supported, falling back to mirror canvas:', e.message);
    }
  }

  if (!useDirectCapture) {
    // Fall back to mirror canvas approach (worker sends ImageBitmap frames)
    setupWorkerFrameListener();
  }

  let isRecording = false;

  /**
   * Updates record button UI state
   * @param {boolean} recording - Whether currently recording
   */
  function updateRecordButtonUI(recording) {
    isRecording = recording;

    if (recording) {
      recordButton.classList.add('recording');
      const recordIcon = /** @type {HTMLElement|null} */ (recordButton.querySelector('.record-icon'));
      const stopIcon = /** @type {HTMLElement|null} */ (recordButton.querySelector('.stop-icon'));
      if (recordIcon) recordIcon.style.display = 'none';
      if (stopIcon) stopIcon.style.display = 'block';
    } else {
      recordButton.classList.remove('recording');
      const recordIcon = /** @type {HTMLElement|null} */ (recordButton.querySelector('.record-icon'));
      const stopIcon = /** @type {HTMLElement|null} */ (recordButton.querySelector('.stop-icon'));