Created
April 6, 2024 02:12
-
-
Save matthewoestreich/aaf4524d73e4d90689d65cc2cea3585e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Client-Side: client side: import React, { useState } from "react"; | |
function VideoButton() { | |
const [downloadLink, setDownloadLink] = useState(null); | |
const [videoName, setVideoName] = useState(null); // State to store the video file name | |
const uploadFile = (event) => { | |
const file = event.target.files[0]; | |
if (file) { | |
const formData = new FormData(); | |
formData.append("video", file); | |
fetch("http://localhost:5000/compress-video", { | |
method: "POST", | |
body: formData, | |
}) | |
.then((response) => { | |
if (!response.ok) { | |
throw new Error("Network response was not ok"); | |
} | |
return response.text(); // Read response as text | |
}) | |
.then((text) => { | |
setVideoName(file.name); // Store the video file name in state | |
setDownloadLink("success"); | |
}) | |
.catch((error) => { | |
console.error("Error uploading file:", error); | |
}); | |
} | |
}; | |
const handleDownload = () => { | |
if (downloadLink === "success" && videoName) { | |
// Check if videoName is defined | |
fetch(http://localhost:5000/compressed_video.mp4?fileName=${videoName}) | |
.then((response) => { | |
if (!response.ok) { | |
throw new Error("Network response was not ok"); | |
} | |
return response.blob(); | |
}) | |
.then((blob) => { | |
const url = window.URL.createObjectURL(new Blob([blob])); | |
const link = document.createElement("a"); | |
link.href = url; | |
link.setAttribute("download", "compressed_video.mp4"); | |
document.body.appendChild(link); | |
link.click(); | |
document.body.removeChild(link); | |
}) | |
.catch((error) => { | |
console.error("Error downloading file:", error); | |
}); | |
} | |
}; | |
return ( | |
<div className="flex flex-col items-center justify-center"> | |
<label htmlFor="video-upload" className="video-upload-button"> | |
Upload Video | |
</label> | |
<input | |
id="video-upload" | |
type="file" | |
accept=".mp4" | |
onChange={uploadFile} | |
style={{ display: "none" }} | |
/> | |
{downloadLink === "success" && ( | |
<button | |
onClick={handleDownload} | |
className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" | |
> | |
Download Compressed Video | |
</button> | |
)} | |
</div> | |
); | |
} | |
export default VideoButton; | |
Server-Side: server side: const express = require("express"); | |
const cors = require("cors"); | |
const { fork } = require("child_process"); | |
const fileUpload = require("express-fileupload"); | |
const path = require("path"); // Add this line to import the path module | |
// Create a new express application instance | |
const PORT = 5000; | |
const app = express(); | |
// Middleware | |
app.use(cors()); | |
app.use(express.json()); | |
app.use( | |
fileUpload({ | |
tempFileDir: "temp", | |
useTempFiles: true, | |
}) | |
); | |
app.use(express.static(path.join(__dirname, "temp"))); | |
// Routes | |
app.get("/", (req, res) => { | |
res.send("Hello World!"); | |
}); | |
app.post("/compress-video", (req, res) => { | |
const video = req.files.video; | |
if (!video) { | |
return res.status(400).send("No file uploaded"); | |
} | |
const tempFilePath = video.tempFilePath; | |
if (!tempFilePath) { | |
return res.status(400).send("Error processing file"); | |
} | |
const child = fork("video.js"); | |
child.send({ tempFilePath, name: video.name }); | |
child.on("message", (message) => { | |
const { statusCode, text, filePath } = message; | |
if (statusCode === 200) { | |
res.send(filePath); // Send file path to the client | |
} else { | |
res.status(statusCode).send(text); | |
} | |
}); | |
}); | |
// Serve the compressed video file | |
app.get("/compressed_video.mp4", (req, res) => { | |
const fileName = req.query.fileName; // Get the file name from query parameters | |
if (!fileName) { | |
return res.status(400).send("File name not provided"); | |
} | |
const filePath = ./temp/${fileName}; | |
res.download(filePath); | |
}); | |
// app.post("/compress-audio", (req, res) => { | |
// const audio = req.files.audio; | |
// const tempFilePath = audio.tempFilePath; | |
// if (audio && tempFilePath) { | |
// const child = fork("audio.js"); | |
// child.send({ tempFilePath, name: audio.name }); | |
// child.on("message", (message) => { | |
// const { statusCode, text } = message; | |
// res.status(statusCode).send(text); | |
// }); | |
// } else { | |
// res.status(400).send("No file uploaded"); | |
// } | |
// }); | |
app.post("/compress-audio", (req, res) => { | |
const audio = req.files.audio; | |
if (!audio) { | |
return res.status(400).send("No file uploaded"); | |
} | |
const tempFilePath = audio.tempFilePath; | |
if (!tempFilePath) { | |
return res.status(400).send("Error processing file"); | |
} | |
const child = fork("audio.js"); | |
child.send({ tempFilePath, name: audio.name }); | |
child.on("message", (message) => { | |
const { statusCode, text, filePath } = message; | |
if (statusCode === 200) { | |
res.send(filePath); // Send file path to the client | |
} else { | |
res.status(statusCode).send(text); | |
} | |
}); | |
}); | |
app.get("/compressed_audio.mp3", (req, res) => { | |
const fileName = req.query.fileName; // Get the file name from query parameters | |
if (!fileName) { | |
return res.status(400).send("File name not provided"); | |
} | |
const filePath = ./temp/${fileName}; | |
res.download(filePath); | |
}); | |
// Start the server | |
app.listen(PORT, () => { | |
console.log(Server started on http://localhost:${PORT}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment