API Upload error

[Youssef_Dh]

Hello ,
I have a plugin project that mainly records videos and sends them to database and i want to send those videos to roboflow as frames after extracting them with FFmpeg.
when trying to send them i get a bad gateway error 502 in Devtools, im gonna leave my function code here :
async function sendVideoToRoboflow(videoId) {
try {
// Fetch the video from the server
const response = await fetch(http://localhost:3000/video/${videoId});
if (!response.ok) {
console.error(‘Failed to fetch video:’, response.statusText);
return;
}

    // Convert the video blob to a Blob URL
    const videoBlob = await response.blob();

    // Extract frames from the video using FFmpeg
    const ffmpegResponse = await fetch(`http://localhost:3000/extractFrames/${videoId}`, {
        method: 'POST',
        body: videoBlob
    });
    if (!ffmpegResponse.ok) {
        console.error('Failed to extract frames:', ffmpegResponse.statusText);
        return;
    }

    // Assuming the response from FFmpeg contains the URLs of extracted frames
    const frameUrls = await ffmpegResponse.json();

    // Create a FormData object to send the data
    const formData = new FormData();
    frameUrls.forEach((frameUrl, index) => {
        formData.append('file' + index, frameUrl);
        formData.append('name' + index, `frame_${index}.png`);
        formData.append('split' + index, 'train');
    });

    // Send the FormData to Roboflow's API
    const roboflowResponse = await fetch('https://api.roboflow.com/dataset/XXX/upload', {
        method: 'POST',
        body: formData,
        headers: {
            'Authorization': 'Bearer (My API key is here but i removed it since its private)'
        }
    });

    if (roboflowResponse.ok) {
        console.log('Frames sent to Roboflow successfully!');
        console.log(roboflowResponse.body);
    } else {
        console.error('Failed to send frames to Roboflow:', roboflowResponse.statusText);
    }
} catch (error) {
    console.error('Error sending video to Roboflow:', error);
}

}
and here’s the endpoint from my backend code:

// Endpoint to extract frames from a video by its ID
app.post(‘/extractFrames/:videoId’, async (req, res) => {
try {
const videoId = req.params.videoId;

// Find the video in the database by its ID
const video = await Video.findById(videoId);
if (!video) {
  return res.status(404).send('Video not found');
}

// Create directories for temporary video and extracted frames
const tempVideoDir = path.join(__dirname, 'temp_videos');
const extractedFramesDir = path.join(__dirname, 'extracted_frames');

// Ensure directories exist, create if not
if (!fs.existsSync(tempVideoDir)) {
  fs.mkdirSync(tempVideoDir);
}
if (!fs.existsSync(extractedFramesDir)) {
  fs.mkdirSync(extractedFramesDir);
}

// Write the video data to a temporary file
const tempFilePath = path.join(tempVideoDir, `temp_${videoId}.webm`);
fs.writeFileSync(tempFilePath, video.data);

console.log('Starting frame extraction process with FFmpeg...');
// Use FFmpeg to extract frames from the video
ffmpeg(tempFilePath)
  .output(path.join(extractedFramesDir, 'frames_%03d.png')) // Output frame files
  .on('end', () => {
    console.log('Frame extraction process completed successfully.');
    // Read the extracted frame files and send their URLs back as response
    const frameUrls = [];
    const frameFiles = fs.readdirSync(extractedFramesDir);
    frameFiles.forEach(file => {
      if (file.startsWith('frames_')) {
        frameUrls.push(`http://localhost:3000/${path.join('extracted_frames', file)}`);
      }
    });

    console.log('Sending frame URLs back as response...');
    res.status(200).json(frameUrls);
  })
  .on('error', (err) => {
    console.error('Error extracting frames:', err);
    res.status(500).send('Error extracting frames');
  })
  .run();

} catch (error) {
console.error(‘Error extracting frames:’, error);
res.status(500).send(‘Error extracting frames’);
}
});

• Project Type: Object Detection
• Windows 10 | OperaGX
• Support Key: Cvo4D3NXT1ZOf5F9FdnVugp280Z2