I have made a basic app where the user can upload a video file through an input. As you can see in the code i also retrieve the duration and the size of the initial video.
Now the question is, how i can compress the video file in the function "compressvid" so that the size of the video becomes massively smaller (at later stage i want to upload these videos to firebase firestore). I'e read something about ffmpeg but wasn't able to figure out how to use it here. I prefer it to be client side as the videos a client can upload are at max 30sec long. If client side is not possible how would it work server side?
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useState, useEffect } from 'react'
export default function Home() {
const [videofile, setVideo] = useState("")
const [viddur, setviddur] = useState("")
useEffect(() => {
// only run this if videofile exists
if (videofile != "") {
console.log("compress video now ")
console.log(videofile.type)
// get duration of video by creating a theoretical video component
var video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function() {
window.URL.revokeObjectURL(video.src);
// here now can check if video is too long
setviddur(video.duration)
}
video.src = URL.createObjectURL(videofile)
}
}, [videofile]);
const clickedvideo = () => {
console.log("clicked video")
}
const compressvid = () => {
// here need to compress the video so that the size is smaller: preferred client-side; if that's not possible howis it posssible server side or with a cheap api
}
return (
<div className={styles.container}>
<Head>
<title>Video Compressor</title>
<meta name="description" content="Video compressor" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Video compressor
</h1>
<p>Size of video before: {videofile.size}</p>
<p>Duration of video: {viddur}</p>
<p>Size of video after: { }</p>
<input className={styles.videoinput} id="myvideo" type="file" accept="video/mp4,video/x-m4v,video/*" onChange={(e) => setVideo(e.target.files[0])}></input>
<div>
{(videofile != "") ? <video autoPlay loop id="video" src={URL.createObjectURL(videofile)} onClick={clickedvideo} width="300px" height="300px" ></video> : null}
</div>
</main>
</div>
)
}
I tried to compress a video uploaded by a user but didn't figure out how to solve it.
