CammerX Web App ( Version 1 )

🔗 Links

• Solution URL: Click here
• Live Site URL: Click here

🛠️ Built with

• Semantic HTML5 markup
• Tailwind CSS
• Vanilla JS

🎨 Features

• 🫧 CSS Animations
• 🤹 Custom UI Design
• 📸 Screenshot & Download image
• 🖼️ Filters
• 🎬 After Effects
• ⌨️ Ctrl + m/M = Mute/Unmute
• ⌨️ Ctrl + q/Q = WEbCam On/Off
• ⌨️ Ctrl + Alt + s/S = Screenshots

📜 What I learnt?

• WebCam Handle
• Mic Handle
• Sound Level Handle
• Filters Handle
• Video On Canvas Handle
• ShortCut Key Handle

🪢 Worked with API( Inbuilt in JS )

• MediaDevices API
• Canvas API
• Web Audio API
• Keyboard Event API

Tested on Browsers( Latest Versions )

•  Chrome ✔
•  Firefox ✔
•  Edge ✔

💡 Challenges Faced

• Making UI from scratch
• Struggle with reserved shortcut keys in various browsers
• Making Filters / After Effects
• Optmizing code

💬 Open for community advice

• Reducing code redundancy
• Optimising code
• Suggestion for new Features to include
• Best Practices for any code segment

⌛ Future Implementation

• Mobile Responsive

📚 Useful resources

• Tailwind Css - For learning tailwind.
• Vanilla Javascript - For learning JS

✒️Author

• Nehal Sahu

• Frontend Mentor - @NehalSahu8055