- 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4MzU4MjcsIm5iZiI6MTcxOTgzNTUyNywicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTY2NTQtZjExNmFhYjEtZGQxNi00MWQxLTgzNTAtNmIwNjlmNDZkZGY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEyMDUyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMyM2NlZjg4YTA2YzEwZjBiNWZlNjZiOWY4OTI5NzU2YWNlNDQ0YzliNDM2ZmE4ZGViZWJhNmVlOWMzNTg0MTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wxcRyD_Aeht3gxTWh3CYkPrQoji5dl3CCPrD6olsZc0)
![](https://private-user-images.githubusercontent.com/64253459/281697210-588f17e1-5e4c-41aa-9802-85a9031cb8b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4MzU4MjcsIm5iZiI6MTcxOTgzNTUyNywicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTcyMTAtNTg4ZjE3ZTEtNWU0Yy00MWFhLTk4MDItODVhOTAzMWNiOGIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEyMDUyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJiMDQ5ZTEzNDNmY2JjNzcxNWM1MDM5MTc3OTBlMmZlZDg2ZDU5ZDI5M2NjNGQ0MGE4N2UxYzI1ZWM3YWI1NWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Z_l6TADZcuP60ejIrT01JypaKGv4OqUzY8zprpIwGJ0)
![](https://private-user-images.githubusercontent.com/64253459/281697354-ad98eeb1-9d73-4960-8621-f2f7d87b21fb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4MzU4MjcsIm5iZiI6MTcxOTgzNTUyNywicGF0aCI6Ii82NDI1MzQ1OS8yODE2OTczNTQtYWQ5OGVlYjEtOWQ3My00OTYwLTg2MjEtZjJmN2Q4N2IyMWZiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEyMDUyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ2MzFiMjkxNWUxNTI4YjUxZTk2ODNkNzhiOTFiZWU3MTgxYmE0OWMxNWE5NzFmMTNlNjQzOTA1YWI4NTZjMzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RU9Kk9EctrpyByAiydF1JbTUujMVziEg7J3RKssPA4Q)
![](https://private-user-images.githubusercontent.com/64253459/281862290-12e738b0-d6fc-42a9-8209-3f6a2b663ad1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk4MzU4MjcsIm5iZiI6MTcxOTgzNTUyNywicGF0aCI6Ii82NDI1MzQ1OS8yODE4NjIyOTAtMTJlNzM4YjAtZDZmYy00MmE5LTgyMDktM2Y2YTJiNjYzYWQxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAxVDEyMDUyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU2Yjg5Yjc0OTIxMGQyOTc5OGMyZmM5OWU3MzYwOWIwMTk2YTk3YzI4N2EzZjA0OGRiZDU1Y2FmODdiNjJlMmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.UwhXeFgXWNMnPAjV7f0GLbMCMvAygH9qH8rzuR7sviY)
npm install
npm start