{"record":{"id":"3083b92484299f3b","repo":"alyssaxuu/screenity","slug":"webcodecsrecorder-no-supported-h-264-encoder","errorCode":null,"errorMessage":"WebCodecsRecorder: No supported H.264 encoder","messagePattern":"WebCodecsRecorder: No supported H\\.264 encoder","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/pages/Recorder/webcodecs/WebCodecsRecorder.js","lineNumber":2766,"sourceCode":"            },\n          });\n        } catch {}\n        return {\n          config: resolvedConfig,\n          codec: c.codec,\n          containerCodec: c.containerCodec,\n        };\n      } catch (e) {\n        this._videoCodecConfigsTried.push({\n          codec: c.codec,\n          hw: c.hw,\n          succeeded: false,\n        });\n      } finally {\n        try { test.close(); } catch {}\n      }\n    }\n    throw new Error(\"WebCodecsRecorder: No supported H.264 encoder\");\n  }\n\n  // Geometry lives in letterbox.js; this just paints it.\n  drawFrameToResizeCanvas(frame) {\n    const tw = this.targetWidth;\n    const th = this.targetHeight;\n    const rect = computeLetterboxRect({\n      sw: frame.codedWidth,\n      sh: frame.codedHeight,\n      tw,\n      th,\n    });\n\n    if (rect.fills) {\n      this.resizeCtx.drawImage(frame, 0, 0, tw, th);\n      return;\n    }\n","sourceCodeStart":2748,"sourceCodeEnd":2784,"githubUrl":"https://github.com/alyssaxuu/screenity/blob/512606387b8d07dda5e63bb428bd063f0a2a3ed0/src/pages/Recorder/webcodecs/WebCodecsRecorder.js#L2748-L2784","documentation":"WebCodecsRecorder probes candidate H.264 VideoEncoder configurations (codec strings/hardware-software preferences) and throws when none report successful configuration/support, meaning the encoder cannot be created at all.","triggerScenarios":"Every probed H.264 codec string fails VideoEncoder.isConfigSupported or the test encode throws — e.g. the browser lacks H.264 encoding (no proprietary codecs build), hardware encoder unavailable and software fallback disabled/missing.","commonSituations":"Chromium builds without proprietary codecs (H.264), Firefox without H.264 encode support in some versions, locked-down hardware/VMs with no H.264 encoder, user agents where hardware accel is off and no software encoder exists.","solutions":["Detect H.264 support up front (VideoEncoder.isConfigSupported) and fall back to VP9/VP8 or MediaRecorder","Add software H.264 encoder configs to the candidate probe list (containing 'avc1.42E01E' style levels, hardwareAcceleration: 'prefer-software')","Install/use a browser build with proprietary codecs enabled","Surface a clear user message recommending Chrome/Edge with H.264 support"],"exampleFix":"// before\nthrow new Error(\"WebCodecsRecorder: No supported H.264 encoder\");\n// after\nconst h264 = await probeH264();\nif (!h264 && (await probeVp9())) { this.codec = \"vp9\"; return; }\nthrow new Error(\"WebCodecsRecorder: no supported video encoder (tried h264, vp9)\");","handlingStrategy":"fallback","validationCode":"const cfg = { codec: \"avc1.42E01E\", width: 1280, height: 720, bitrate: 2_000_000 };\nconst { supported } = await VideoEncoder.isConfigSupported(cfg);\nif (!supported) useVp9OrMediaRecorderFallback();","typeGuard":"async function hasH264Encoder(w, h, bitrate) {\n  if (typeof VideoEncoder === \"undefined\") return false;\n  const r = await VideoEncoder.isConfigSupported({ codec: \"avc1.42E01E\", width: w, height: h, bitrate });\n  return r.supported === true;\n}","tryCatchPattern":"try {\n  recorder = new WebCodecsRecorder(stream, opts);\n  await recorder.init(); // probes H.264 here\n} catch (e) {\n  if (String(e.message).includes(\"No supported H.264 encoder\")) {\n    recorder = new MediaRecorderFallback(stream, opts);\n  }\n}","preventionTips":["Probe VideoEncoder.isConfigSupported before choosing WebCodecs","Provide VP9/VP8 or MediaRecorder fallbacks","Test on Chromium builds without proprietary codecs and on VMs without hardware encoders","Recommend H.264-capable browsers (Chrome/Edge) in requirements docs"],"tags":["webcodecs","h264","encoder","browser-compatibility"],"backgroundTag":"no-supported-h264-encoder","analyzedSha":"512606387b8d07dda5e63bb428bd063f0a2a3ed0","analyzedAt":"2026-09-02T20:59:09.419Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}