Dive into a comprehensive 2-hour video tutorial on computer vision web development. Learn how to create a web-based image processing application using HTML, CSS, JavaScript, and OpenCV.js. Start with the basics of web development, including internet fundamentals and setting up Visual Studio Code. Progress through creating a responsive layout, implementing a sidebar with icons, and adding OpenCV functionality. Explore essential image processing techniques like grayscale conversion, blurring, and edge detection. Finish by building an interactive Photoshop-like interface with clickable buttons for various image manipulations. Gain practical skills in combining web technologies with computer vision algorithms to create powerful visual applications.
Overview
Syllabus
Introduction
Course Structure
How does the Internet Work?
Installing Visual Studio Code
1-Template-Layout Overview
2-Template-Creating Files
3-Template-Structure
4-Template-CSS
5-Template-Side Line
6-Template-Side Bar
7-Template-Side Bar Icons
8-Template-Header
9-Template-Adding Fonts
10-Template-Tablet Container
11-Template-Adding OpenCV
12-Template-OpenCV JS Initialization
13-Template-Reading Images
1-Basic Functions- Overview
2-Basic Functions-Checking Memory Usage
3-Basic Functions- Gray scale
4-Basic Functions- Blur
5-Basic Functions-Edge Detector
1-Photoshop-Updating Icons
2-Photoshop-Button Hover
3-Photoshop-Detecting Click
4-Photoshop-Grayscale Button
5-Photoshop-Rest of the Buttons
Taught by
Murtaza's Workshop - Robotics and AI
