- This project was made using React.JS-18.2.0.
- OS Used while creating project: Ubuntu 22.
- Takes video file as an input.
- Displays video metadata including duration on UI.
- Displays video on the screen after the user has selected the file using canvas element. Added play/pause button in the middle of the video container to play/pause video on clicking.
- Detects if video has audio or not, if it has not has audio track it will not allow user to upload the video.
- Displays the waveform for the audio
- Find sample videos for testing in project-media folder
![](https://private-user-images.githubusercontent.com/64253459/281696654-f116aab1-dd16-41d1-8350-6b069f46ddf4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3OTc1NzksIm5iZiI6MTcxODc5NzI3OSwicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTY2NTQtZjExNmFhYjEtZGQxNi00MWQxLTgzNTAtNmIwNjlmNDZkZGY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE5VDExNDExOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkyOTIyYjE3NjNhMTNhNDc4NGI3MGQ3NzM4Mjg5ODc0NWZiODYwMzUwN2UyYjQ1ZDk0ZGJjMDc5YTI4M2RhNTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.uA-2Z2VgRWVn1R2iex1lBMy3JynG2U6y1IMvify2Jn8)
![](https://private-user-images.githubusercontent.com/64253459/281697210-588f17e1-5e4c-41aa-9802-85a9031cb8b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3OTc1NzksIm5iZiI6MTcxODc5NzI3OSwicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTcyMTAtNTg4ZjE3ZTEtNWU0Yy00MWFhLTk4MDItODVhOTAzMWNiOGIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE5VDExNDExOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEwNDllYmFiMTA5ODI1NTU5Yjc3ZWEwNjlmMjIyZTVhM2Q2YjY3OWRjYTk4NzhkMWRiMGNiZWNhOTcwMDkxMGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.saNNY7DwH0wJHdEAE0rgayVu0h5k5ciT5otIwIdpmS4)
![](https://private-user-images.githubusercontent.com/64253459/281697354-ad98eeb1-9d73-4960-8621-f2f7d87b21fb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3OTc1NzksIm5iZiI6MTcxODc5NzI3OSwicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTczNTQtYWQ5OGVlYjEtOWQ3My00OTYwLTg2MjEtZjJmN2Q4N2IyMWZiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE5VDExNDExOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEyZmY4OTA3M2JiNDQyMWVjNWFlYmE1MzVjY2E1ODBjMzdhM2Q3NDBlOTg1NGQ4MGJhZGJlZjIwOTYxMzQ3YTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hzEVB8EYUX2v_v8fJ6sCImAwNcchmRxs9ekzXX5pvWA)
![](https://private-user-images.githubusercontent.com/64253459/281862290-12e738b0-d6fc-42a9-8209-3f6a2b663ad1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3OTc1NzksIm5iZiI6MTcxODc5NzI3OSwicGF0aCI6Ii82NDI1MzQ1OS8yODE4NjIyOTAtMTJlNzM4YjAtZDZmYy00MmE5LTgyMDktM2Y2YTJiNjYzYWQxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE5VDExNDExOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ2MDE1NThhNzIxNTI5YzI2NTAwMDRmYjY2YWM5YTE1MjlkY2Q5MDdkMzVmNzNiN2I5OWY2OGZiMzRjZDRhNDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qG4qEVYCtwPxK9RZuh__pZ2ixfFtAHGoB16HEOhdKts)
npm install
npm start