Fluent-FFMPEG redirects to home page when recording is finished

Viewed 48

I am using fluent-FFmpeg with my node.js and express server to record videos from an RTSP stream. The issue I am encountering is that once the command to record the video is finished, my React client-side always redirects to the home page of my application, even though this is not the behavior I want. I want the user to remain on the page with the RTSP stream and just receive a toast notification indicating that the recording is finished. With this issue, the page redirects before the notification has a chance to display. Is this an issue with my server-side or client-side code?

Node.js

export const startRecording = async (req, res) => {
  const camera = req.params;
  if (camera.id in runningCommands) { return res.json({ "status": "failure", "error": "Recording already in progress" }) }
  const { recordTime, uid } = req.body;
  let conn = createConnection(config);
  conn.connect();
  let query = 'SELECT * FROM cameras WHERE id = ?';
  conn.query(query, [camera.id], (error, rows) => {
    if (error) { return res.json({ "status": "failure", "error": error }) }
    const camera = rows[0];
    const { ip, fname } = camera;
    const currentDate = new Date().toLocaleString().replace(/[:/\s]/g, '-').replace(',', '');
    const filename = `${fname}-${currentDate}`;

    try {
      // FFmpeg command to start recording
      const command = ffmpeg(`rtsp://${ip}/axis-media/media.amp`)
        .videoCodec('libx264')
        .size('1280x720')
        .duration(recordTime)
        .on('start', commandLine => {
          runningCommands[camera.id] = command
          console.log(`Spawned Ffmpeg with command: ${commandLine}`)
        })
        .on('error', err => console.error(err))
        .on('end', () => {
          delete runningCommands[camera.id]
          console.log('Recording Complete')
          takeScreenshot(filename, `./public/recordings/mp4/${filename}.mp4`)
          conn.query('INSERT INTO recordings (uid, cid, filename) VALUES (?, ?, ?)', [uid, camera.id, filename], () => conn.end())
          res.json({ "status": "success", "message": "Recording ended" })
        })
        .save(`./public/recordings/mp4/${filename}.mp4`);
    } catch (error) { console.error(error)}
  })
}

React:

const handleRecording = async () => {
    try {
      setIsRecording(true)
      const futureTime = new Date().getTime() + recordTime * 1000
      const finishedTime = new Date(futureTime).toLocaleTimeString()
      setTimeRemaining(finishedTime)
      const { data } = await publicRequest.post(`record/startRecording/${id}`, { recordTime, uid: user.id })
      window.location.reload(false)
      if (data.status === 'success') {
        setIsRecording(false)
        toast('Recording finished!', { type: 'success' })
      } else {
        setIsRecording(true)
        toast('Recording already in progress!', { type: 'error' })
      }
    } catch (error) {
      console.error(error)
    }
  }
0 Answers
Related