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)
}
}