fix: use canvas capture for recording, remove cancel button

Recording now creates an offscreen <img> (browser-native MJPEG
decoding) and captures frames via canvas.toBlob() at 100ms intervals.
This replaces the broken fetch-based multipart parser.

- useRecorder: img+canvas capture instead of fetch+ReadableStream
- RecorderControls: removed Cancel button, only Record/Stop remain
- App.vue: removed cancel wiring

src/components/RecorderControls.vue

@@ -12,7 +12,6 @@ defineProps<{
 const emit = defineEmits<{
   start: []
   stop: []
-  cancel: []
 }>()
 </script>
 
@@ -31,17 +30,16 @@ const emit = defineEmits<{
         Record
       </button>
 
-      <!-- Recording: show Stop and Cancel -->
-      <template v-if="state === 'recording'">
-        <button class="btn btn-stop" @click="emit('stop')" title="Stop and save recording">
-          <span class="btn-icon">⏹</span>
-          Stop &amp; Save
-        </button>
-        <button class="btn btn-cancel" @click="emit('cancel')" title="Cancel recording">
-          <span class="btn-icon">✕</span>
-          Cancel
-        </button>
-      </template>
+      <!-- Recording: show Stop -->
+      <button
+        v-if="state === 'recording'"
+        class="btn btn-stop"
+        @click="emit('stop')"
+        title="Stop and save recording"
+      >
+        <span class="btn-icon">⏹</span>
+        Stop &amp; Save
+      </button>
 
       <!-- Saving -->
       <button v-if="state === 'saving'" class="btn btn-saving" disabled>
@@ -57,7 +55,7 @@ const emit = defineEmits<{
       <span class="rec-frames">{{ frameCount }} frames</span>
     </div>
 
-    <!-- Recorder fetch error -->
+    <!-- Recorder error -->
     <div v-if="error" class="recorder-error">
       ⚠ {{ error }}
     </div>
@@ -121,15 +119,6 @@ const emit = defineEmits<{
   background: #c0392b;
 }
 
-.btn-cancel {
-  background: #555;
-  color: #fff;
-}
-
-.btn-cancel:hover {
-  background: #444;
-}
-
 .btn-saving {
   background: #666;
   color: #fff;