Cant not export with video with mp3 or wav

[voladelta]

I can export video just fine without audio. When come to audio like mp3 or wav in the composition, i can't export it.

I try with default or sampleRate: 44100.

The error is weird as well: SecurityError: Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker.

Without audio, showSaveFilePicker shows.

An audio sample is: https://zokjuqrjbkfkymnqwxui.supabase.co/storage/v1/object/public/media/4e728193-25d3-4bf6-b96a-90db1cbc880d.mp3

[voladelta]

Btw, i can play the composition in the player.

if (!('showSaveFilePicker' in window)) {
    // use in memory as fallback
    Object.assign(window, { showSaveFilePicker: async () => undefined })
  }

  try {
    const encoder = new Encoder(composition, {
      sampleRate: 44100, audio: true,
      debug: true
    });

    encoder.on('render', (event) => {
      const { progress, total } = event.detail;
      state.exportText = `${Math.round(progress * 100 / total)}%`;
    })

    const fileHandle = await window.showSaveFilePicker({
      suggestedName: name,
      types: [
        {
          description: 'Video File',
          accept: { 'video/mp4': ['.mp4'] },
        },
      ],
    });

    await encoder.render(fileHandle); // undefined or file handle
    alert('Video has been rendered successfully!')
  } catch (e) {
    console.log(e);

    if (e instanceof DOMException) {
      // user canceled file picker
    } else if (e instanceof core.ExportError) {
      alert(e.message);
    } else {
      alert(String(e))
    }
  } finally {
    state.exportText = 'export'
  }

[girayk]

You have to put it inside to onClick function

[voladelta]

You have to put it inside to onClick function

yeah, i did. click to trigger export. If i remove audio, i can export video with captions (and download the audio separately for capcut) to sync.

but it isnt the good ux for user.

[voladelta]

I solved the issue by uploading file to supabase presigned url. The is my prefered method as well.