export not work

[russell0430]

It is a good project，but i encounter some problems。
when i end editing the video，and click export video，error came out

i dont know why，it happened every time i export 。please checkout the export logic

[mohyware]

Hi, thanks for reporting!

Can u upload the vid on Mediafire or Mega ...etc so I can reproduce the error here, as it works fine for me with all vids I tested it with, also it seems to work fine with most users who have tried it.

[tzhangchi]

I found this issue too, I try to resolve this by modify render function

   const render = async () => {
        if (mediaFiles.length === 0 && textElements.length === 0) {
            console.log('No media files to render');
            return;
        }
        setShowModal(true);
        setIsRendering(true);

        const renderFunction = async () => {
            const params = extractConfigs(exportSettings);

            try {
                const filters: string[] = [];
                const overlays: any[] = [];
                const inputs: string[] = [];
                const audioDelays: string[] = [];
                const wroteFiles = new Map<string, string>();
                const fileInputMap = new Map<string, number>();

                // Create base black background
                filters.push(`color=c=black:size=1920x1080:d=${totalDuration.toFixed(3)}[base]`);
                
                // Sort videos by zIndex ascending (lowest drawn first)
                const sortedMediaFiles = [...mediaFiles].sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));

                // First pass: Write unique files and build inputs array
                const processedFiles = new Set<string>();
                let inputIndex = 0;
                
                for (const mediaFile of sortedMediaFiles) {
                    const { fileId, type } = mediaFile;
                    
                    if (!processedFiles.has(fileId)) {
                        try {
                            const fileData = await getFile(fileId);
                            const buffer = await fileData.arrayBuffer();
                            const ext = mimeToExt[fileData.type as keyof typeof mimeToExt] || fileData.type.split('/')[1];
                            let inputFilename = `input_${fileId}.${ext}`;
                            
                            // Clean filename to avoid filesystem issues
                            inputFilename = inputFilename.replace(/[^a-zA-Z0-9._-]/g, '_');
                            
                            await ffmpeg.writeFile(inputFilename, new Uint8Array(buffer));
                            wroteFiles.set(fileId, inputFilename);
                            fileInputMap.set(fileId, inputIndex);
                            
                            // Add to inputs array
                            inputs.push('-i', inputFilename);
                            inputIndex++;
                            processedFiles.add(fileId);
                        } catch (error) {
                            console.error(`Failed to write file ${fileId}:`, error);
                            throw new Error(`Failed to process media file: ${error}`);
                        }
                    }
                }

                // Second pass: Process media files with correct input indices
                for (let i = 0; i < sortedMediaFiles.length; i++) {
                    // timing
                    const { startTime, positionStart, positionEnd, fileId, type } = sortedMediaFiles[i];
                    const duration = positionEnd - positionStart;
                    const mediaInputIndex = fileInputMap.get(fileId)!;

                    const visualLabel = `visual${i}`;
                    const audioLabel = `audio${i}`;

                    // Shift clip to correct place on timeline (video)
                    if (sortedMediaFiles[i].type === 'video') {
                        filters.push(
                            `[${mediaInputIndex}:v]trim=start=${startTime.toFixed(3)}:duration=${duration.toFixed(3)},scale=${sortedMediaFiles[i].width}:${sortedMediaFiles[i].height},setpts=PTS-STARTPTS+${positionStart.toFixed(3)}/TB[${visualLabel}]`
                        );
                    }
                    if (sortedMediaFiles[i].type === 'image') {
                        filters.push(
                            `[${mediaInputIndex}:v]scale=${sortedMediaFiles[i].width}:${sortedMediaFiles[i].height},setpts=PTS+${positionStart.toFixed(3)}/TB[${visualLabel}]`
                        );
                    }

                    // Apply opacity
                    if (sortedMediaFiles[i].type === 'video' || sortedMediaFiles[i].type === 'image') {
                        const alpha = Math.min(Math.max((sortedMediaFiles[i].opacity || 100) / 100, 0), 1);
                        filters.push(
                            `[${visualLabel}]format=yuva420p,colorchannelmixer=aa=${alpha}[${visualLabel}]`
                        );
                    }

                    // Store overlay range that matches shifted time
                    if (sortedMediaFiles[i].type === 'video' || sortedMediaFiles[i].type === 'image') {
                        overlays.push({
                            label: visualLabel,
                            x: sortedMediaFiles[i].x,
                            y: sortedMediaFiles[i].y,
                            start: positionStart.toFixed(3),
                            end: positionEnd.toFixed(3),
                        });
                    }

                    // Audio: trim, then delay (in ms)
                    // Only add audio for explicit audio files, skip video audio for now to avoid stream errors
                    if (sortedMediaFiles[i].type === 'audio') {
                        const delayMs = Math.round(positionStart * 1000);
                        const volume = sortedMediaFiles[i].volume !== undefined ? sortedMediaFiles[i].volume / 100 : 1;
                        
                        filters.push(
                            `[${mediaInputIndex}:a]atrim=start=${startTime.toFixed(3)}:duration=${duration.toFixed(3)},asetpts=PTS-STARTPTS,adelay=${delayMs}|${delayMs},volume=${volume}[${audioLabel}]`
                        );
                        audioDelays.push(`[${audioLabel}]`);
                    }
                    // For video files, we'll handle audio separately if needed
                    if (sortedMediaFiles[i].type === 'video') {
                        // Skip audio from video for now - can be added later with proper stream detection
                        console.log(`Skipping audio from video ${i} - not yet implemented with stream detection`);
                    }
                }

                // Apply overlays in z-index order
                let lastLabel = 'base';
                
                console.log('=== Processing Overlays ===');
                console.log('Overlays count:', overlays.length);
                console.log('Will add text:', textElements.length > 0);
                
                if (overlays.length > 0) {
                    for (let i = 0; i < overlays.length; i++) {
                        const { label, start, end, x, y } = overlays[i];
                        // If this is the last overlay and there are no text elements, output to 'outv'
                        const isLast = (i === overlays.length - 1) && (textElements.length === 0 || textElements.every(t => 
                            t.positionStart >= totalDuration || t.positionEnd <= 0
                        ));
                        const nextLabel = isLast ? 'outv' : `tmp${i}`;
                        
                        console.log(`Overlay ${i}: ${label} -> ${nextLabel}, position (${x},${y}), time ${start}-${end}`);
                        
                        filters.push(
                            `[${lastLabel}][${label}]overlay=${x}:${y}:enable='between(t\\,${start}\\,${end})'[${nextLabel}]`
                        );
                        lastLabel = nextLabel;
                    }
                } else {
                    // No overlays - if also no valid text, output base directly
                    const hasValidText = textElements.some(t => 
                        t.positionStart < totalDuration && t.positionEnd > 0 && t.positionStart < t.positionEnd
                    );
                    
                    if (!hasValidText) {
                        console.log('No overlays and no valid text, copying base to outv');
                        filters.push(`[base]copy[outv]`);
                        lastLabel = 'outv'; // Set to outv so text processing knows we're done
                    }
                }

                // Apply text 
                if (textElements.length > 0) {
                    console.log('=== Processing Text Elements ===');
                    console.log('Text elements before filtering:', textElements.map((t, i) => ({
                        index: i,
                        text: t.text,
                        start: t.positionStart,
                        end: t.positionEnd
                    })));
                    
                    // Load fonts with error handling
                    const fonts = ['Arial', 'Inter', 'Lato'];
                    for (let i = 0; i < fonts.length; i++) {
                        const font = fonts[i];
                        try {
                            const res = await fetch(`/fonts/${font}.ttf`);
                            if (!res.ok) {
                                console.warn(`Failed to fetch font ${font}: ${res.status}`);
                                continue;
                            }
                            const fontBuf = await res.arrayBuffer();
                            const fontFilename = `font${font}.ttf`;
                            await ffmpeg.writeFile(fontFilename, new Uint8Array(fontBuf));
                        } catch (error) {
                            console.warn(`Failed to load font ${font}:`, error);
                        }
                    }
                    
                    // Apply text - first filter valid text elements
                    const validTextElements = textElements.filter((text, i) => {
                        const textStart = Math.max(0, Math.min(text.positionStart, totalDuration));
                        const textEnd = Math.max(textStart, Math.min(text.positionEnd, totalDuration));
                        
                        // Skip text elements that are completely outside the video duration
                        if (textStart >= totalDuration || textEnd <= 0 || textStart >= textEnd) {
                            console.warn(`Skipping text element ${i}: timing (${text.positionStart}-${text.positionEnd}) is outside video duration (0-${totalDuration})`);
                            return false;
                        }
                        return true;
                    });
                    
                    console.log('Valid text elements after filtering:', validTextElements.length);
                    console.log('Current lastLabel before text processing:', lastLabel);
                    
                    // Only process text if we haven't already created outv
                    if (lastLabel !== 'outv') {
                        // Apply valid text elements
                        for (let i = 0; i < validTextElements.length; i++) {
                            const text = validTextElements[i];
                            
                            // Clamp text timing to video duration
                            const textStart = Math.max(0, Math.min(text.positionStart, totalDuration));
                            const textEnd = Math.max(textStart, Math.min(text.positionEnd, totalDuration));
                            
                            console.log(`Applying text ${i}: "${text.text}" from ${textStart} to ${textEnd}`);
                            
                            const nextLabel = i === validTextElements.length - 1 ? 'outv' : `text${i}`;
                            const escapedText = text.text.replace(/:/g, '\\:').replace(/'/g, "\\\\'");
                            const alpha = Math.min(Math.max((text.opacity ?? 100) / 100, 0), 1);
                            const color = text.color?.includes('@') ? text.color : `${text.color || 'white'}@${alpha}`;
                            
                            // Check if font file exists, fallback to Arial if not
                            const fontFile = `font${text.font}.ttf`;
                            
                            filters.push(
                                `[${lastLabel}]drawtext=fontfile=${fontFile}:text='${escapedText}':x=${text.x}:y=${text.y}:fontsize=${text.fontSize || 24}:fontcolor=${color}:enable='between(t\\,${textStart}\\,${textEnd})'[${nextLabel}]`
                            );
                            lastLabel = nextLabel;
                        }
                        
                        // If all text elements were skipped, we need to ensure outv is created
                        if (validTextElements.length === 0 && lastLabel !== 'outv') {
                            console.log('All text elements filtered out, creating outv from', lastLabel);
                            filters.push(`[${lastLabel}]copy[outv]`);
                        }
                    } else {
                        console.log('Skipping text processing - outv already created');
                    }
                }

                // Mix all audio tracks - but only if we have audio
                if (audioDelays.length > 0) {
                    const audioMix = audioDelays.join('');
                    filters.push(`${audioMix}amix=inputs=${audioDelays.length}:normalize=0[outa]`);
                } else {
                    console.log('No audio tracks to mix');
                }
                
                // Final safety check: ensure we have an outv output
                const hasOutv = filters.some(f => f.includes('[outv]'));
                if (!hasOutv) {
                    console.warn('No outv output found in filters! Adding fallback.');
                    // Find the last label that was used
                    if (lastLabel && lastLabel !== 'outv') {
                        filters.push(`[${lastLabel}]copy[outv]`);
                    } else if (!lastLabel) {
                        // Absolute fallback - just copy base
                        filters.push(`[base]copy[outv]`);
                    }
                }

                // Final filter_complex
                const complexFilter = filters.join('; ');
                
                // Build FFmpeg command with proper audio handling
                const ffmpegArgs = [
                    '-y', // Overwrite output file if it exists
                    ...inputs,
                ];
                
                // Only add filter_complex if we have filters
                if (complexFilter) {
                    ffmpegArgs.push('-filter_complex', complexFilter);
                }
                
                // Map video output
                ffmpegArgs.push('-map', '[outv]');

                // Handle audio mapping
                if (audioDelays.length > 0) {
                    // We have audio tracks, map the mixed audio
                    ffmpegArgs.push('-map', '[outa]');
                } else {
                    console.log('No audio in source');
                }

                ffmpegArgs.push(
                    '-c:v', 'libx264',
                    '-preset', params.preset,
                    '-crf', params.crf.toString(),
                );
                
                // Only add audio codec if we have audio
                if (audioDelays.length > 0) {
                    ffmpegArgs.push('-c:a', 'aac', '-b:a', '128k');
                }
                
                ffmpegArgs.push(
                    '-t', totalDuration.toFixed(3),
                    '-movflags', '+faststart', // Optimize for web playback
                    '-pix_fmt', 'yuv420p', // Ensure compatibility
                    'output.mp4'
                );

                console.log('=== FFmpeg Render Debug ===');
                console.log('Total duration:', totalDuration);
                console.log('Media files:', mediaFiles.length);
                console.log('Text elements:', textElements.length);
                console.log('Audio delays count:', audioDelays.length);
                console.log('Overlays count:', overlays.length);
                console.log('FFmpeg command:', ffmpegArgs.join(' '));
                console.log('Filter complex:', complexFilter);
                console.log('=== Starting FFmpeg Execution ===');
                
                // Execute FFmpeg
                await ffmpeg.exec(ffmpegArgs);
                console.log('FFmpeg execution completed successfully');
                
                // Verify output file exists
                const filesList = await ffmpeg.listDir('/');
                const outputExists = filesList.some((file: any) => file.name === 'output.mp4');
                
                console.log('Files in FFmpeg filesystem:', filesList.map((f: any) => f.name));
                
                if (!outputExists) {
                    console.error('Output file not created. Available files:', filesList.map((f: any) => f.name));
                    throw new Error('FFmpeg completed but did not create output.mp4. Check FFmpeg logs above for errors.');
                }

            } catch (err) {
                console.error('FFmpeg processing error:', err);
                throw err; // Re-throw to be caught by outer try-catch
            }

            // Return the output url
            try {
                console.log('=== Reading Output File ===');
                const outputData = await ffmpeg.readFile('output.mp4');
                console.log('Successfully read output file, size:', outputData.length, 'bytes');
                
                const outputBlob = new Blob([outputData as BufferSource], { type: 'video/mp4' });
                console.log('Created blob, size:', outputBlob.size, 'bytes');
                
                const outputUrl = URL.createObjectURL(outputBlob);
                console.log('Created object URL:', outputUrl);
                
                return outputUrl;
            } catch (err) {
                console.error('Failed to read output file:', err);
                throw new Error('Failed to read rendered video file. The file may not have been created.');
            }
        };

        // Run the function and handle the result/error
        try {
            console.log('=== Starting Render Function ===');
            const outputUrl = await renderFunction();
            console.log('=== Render Function Completed ===');
            console.log('Output URL:', outputUrl);
            
            setPreviewUrl(outputUrl);
            console.log('Preview URL set successfully');
            
            setLoaded(true);
            setIsRendering(false);
            console.log('Rendering completed successfully!');
            
            toast.success('Video rendered successfully');
        } catch (err) {
            setIsRendering(false);
            const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
            
            // Provide detailed error information
            console.error("=== Render Error Details ===");
            console.error("Error:", err);
            console.error("Last FFmpeg log:", logMessages);
            console.error("Media files count:", mediaFiles.length);
            console.error("Text elements count:", textElements.length);
            console.error("Total duration:", totalDuration);
            console.error("=== End Error Details ===");
            
            toast.error(`Failed to render video: ${errorMessage}`);
            console.error("Failed to render video:", err);
            
            // Attempt to clean up FFmpeg state on error
            try {
                await ffmpeg.terminate();
                await loadFunction();
            } catch (cleanupErr) {
                console.error("Failed to cleanup FFmpeg after error:", cleanupErr);
            }
        }
    };