try video decoding if webcodec fails

src/components/Processing.tsx

@@ -2,7 +2,7 @@ import { Show, createMemo, createSignal } from "solid-js";
 import { encode as GIFEncode } from 'modern-gif'
 import GIFWorkerJS from 'modern-gif/worker?url'
 import { outputSize, outputTimeRange, store, updateStore } from "../store";
-import { grabFramesWithMP4Box } from "../processors/frameGrabber";
+import { grabFrames as grabFrames1 } from "../processors/frameGrabber";
 import { delay } from "yon-utils";
 import { unwrap } from "solid-js/store";
 import { getWatermarkRenderer } from "../processors/watermarkRenderer";
@@ -193,7 +193,7 @@ export function ProcessingBar() {
     setProgress('Grabbing Frames')
     setPercentage(0)
 
-    const frames = await grabFramesWithMP4Box({
+    const frames = await grabFrames1({
       file,
       resizeWidth: outputSize().width,
       resizeHeight: outputSize().height,
@@ -308,4 +308,4 @@ function WarningMsg(props: { message: string, when: any, fix?: () => void }) {
       {props.fix && <a class="ml-2 text-blue" href="#" onClick={e => { e.preventDefault(); props.fix!() }}>(Fix It)</a>}
     </div>
   </Show>
-}
+}

src/processors/frameGrabber.ts

@@ -172,3 +172,14 @@ export async function grabFramesWithVideoTag({ file, resizeWidth, resizeHeight,
     URL.revokeObjectURL(fileURL)
   }
 }
+
+export function grabFrames(options: GrabFrameOptions) {
+  return grabFramesWithMP4Box(options).catch(error => {
+    console.error('MP4Box grabFrames error', error)
+    if (confirm('MP4Box+WebCodec cannot decode this file. Try with video tag?')) {
+      return grabFramesWithVideoTag(options)
+    }
+
+    throw error
+  })
+}