Radu Mariescu-Istodor | Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile) @Radu | Uploaded 3 years ago | Updated 1 hour ago
In this video we learn how to access the camera of a device and show it on a simple HTML page using the HTML canvas element. We'll use vanilla JavaScript to handle different resolutions such as those coming from typical webcams and mobile devices. We'll experiment on a desktop computer but the application works on mobile as well.
This tutorial is part 1 of a series that teaches how to code a complex puzzle game that uses the camera:
Part 1. Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile)
Part 2. Image manipulation using vanilla JavaScript (Cutting it into Pieces)
Part 3. Drag and drop using vanilla JavaScript and HTML canvas (Desktop and Mobile)
Part 4. Gameplay elements (Menu, Timer, Check complete)
Part 5. Styles and visuals (CSS and vectorial drawing)
Part 6. Working with sound (Recording and synthesis)
Part 7. MySql (PhpMyAdmin, Table structure)
Part 8. Php (Handling HTTP Requests, Interacting with the database)
Part 9. Advanced image manipulation in vanilla JavaScript (Shaping Puzzle Pieces)
Part 10. Advanced drag and drop in vanilla JavaScript (Handling Complex Shapes)
Full Playlist:
youtube.com/playlist?list=PLB0Tybl0UNfadlXE6BSpPk6O1Rbfm9ITo
Play the game here:
radufromfinland.com/projects/puzzlecam
Me playing the game on INSANE difficulty:
youtu.be/BTwZJURK13A
Game introduction (1000 subscriber special):
youtu.be/FOlJPxJVPMA
In this video we learn how to access the camera of a device and show it on a simple HTML page using the HTML canvas element. We'll use vanilla JavaScript to handle different resolutions such as those coming from typical webcams and mobile devices. We'll experiment on a desktop computer but the application works on mobile as well.
This tutorial is part 1 of a series that teaches how to code a complex puzzle game that uses the camera:
Part 1. Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile)
Part 2. Image manipulation using vanilla JavaScript (Cutting it into Pieces)
Part 3. Drag and drop using vanilla JavaScript and HTML canvas (Desktop and Mobile)
Part 4. Gameplay elements (Menu, Timer, Check complete)
Part 5. Styles and visuals (CSS and vectorial drawing)
Part 6. Working with sound (Recording and synthesis)
Part 7. MySql (PhpMyAdmin, Table structure)
Part 8. Php (Handling HTTP Requests, Interacting with the database)
Part 9. Advanced image manipulation in vanilla JavaScript (Shaping Puzzle Pieces)
Part 10. Advanced drag and drop in vanilla JavaScript (Handling Complex Shapes)
Full Playlist:
youtube.com/playlist?list=PLB0Tybl0UNfadlXE6BSpPk6O1Rbfm9ITo
Play the game here:
radufromfinland.com/projects/puzzlecam
Me playing the game on INSANE difficulty:
youtu.be/BTwZJURK13A
Game introduction (1000 subscriber special):
youtu.be/FOlJPxJVPMA
![Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]](https://i.ytimg.com/vi/ZgjDeO_EzY4/hqdefault.jpg "Tilt Control for JavaScript Games [Understanding AI - Lesson 12 / 15]
PLAYLIST: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYbL1vDNrfHoYOKf1Sn0A81
Remember those early mobile games where you could steer by tilting the phone? In this video, Ill guide you through using the device orientation sensor to capture tilt movements. Its a fantastic technique that opens up a world of possibilities for game control.
Lets explore the potential of this feature not just for games, but for other applications too. Ill share my friends creation, Jazzman vs. Metalheadz, which showcases the versatility of tilt controls.
The applications extend beyond gaming – think about measuring tree heights or distances to distant objects. If youre interested, I have tutorials on those topics as well. Towards the end of the video, Ill demonstrate how to integrate tilt controls into our racing game, tying it back to the Understanding AI course.
So, let me steer you in the right direction for implementing device orientation in your projects. And by the way, did I mention well be doing some nononooooo again? You wont want to miss it! Like, share, and subscribe for more exciting tutorials on AI, game development, and innovative programming techniques!
💻CODE FOR THE RACING GAME PART💻
https://github.com/gniziemazity/understanding_ai
Follow Along: 7. Camera Part 2
Code After This Lesson: 8. Phone Input
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
TEST on My Website: https://radufromfinland.com/projects/phoneRacer
Self-driving Car Course: https://www.youtube.com/playlist?list=PLB0Tybl0UNfYoJE7ZwsBQoDIG4YN9ptyY
Measuring Tree Height Tutorial: https://youtu.be/0hxNFuo5Ncc
Measuring Distance Tutorial: https://youtu.be/qjuQYFdcSxw
Jazzman vs. Metalheadz: https://play.google.com/store/apps/details?id=com.matti.mononen.jazzman
#RacingGame #RacingGameJavaScript #OrientationSensorJavaScript #JavaScriptDeviceOrientation #LearnJavaScript
⭐TIMESTAMPS⭐
00:00 Introduction
01:29 Basic Project Setup
08:15 Using Device Orientation
15:47 Using Gravity
20:25 Integrating with the Racing Game")
![A Virtual World - JavaScript Course: Lesson 2 / 11 [Graph Editor with JavaScript]](https://i.ytimg.com/vi/_HkGH2WN_Tg/hqdefault.jpg "A Virtual World - JavaScript Course: Lesson 2 / 11 [Graph Editor with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world. In this video Ill teach you how to build a graph editor from scratch, using basic HTML, CSS and JavaScript. The graph will act as a basis and the world will be generated according to it.
In this digital age, a good user interface should streamline interactions, minimizing the need for excessive clicks and keyboard inputs. Ill teach you how to do this when making a graph editor and how to think like this in general.
Throughout this series, Ill guide you step by step, showcasing how to build a graph editor with a primary focus on mouse interaction. The mouse is a versatile tool, and in this course, we use it to add, drag, remove points effortlessly. 🖱️
Well start from the basics, gradually implementing new features and refining existing ones, all with the aim of achieving a final logic thats not only functional but also intuitive. By the end, youll not only have a graph editor to be proud of but also the skills to customize it to your hearts content.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
1. Spatial Graphs = follow along
2. Graph Editor = code after this lesson
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐Pythagorean Theorem Video⭐
https://youtu.be/iqSlzYXdFzw
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:09 Top-level Code Structure
03:21 Adding Points
06:06 Selecting Points
17:35 Removing Points
22:05 Dragging Points
24:54 Creating Segments
35:03 Debugging / Fine-tuning")
![A Virtual World - JavaScript Course: Lesson 6 / 11 [Pseudo 3D with JavaScript]](https://i.ytimg.com/vi/aKzlooeJNM8/hqdefault.jpg "A Virtual World - JavaScript Course: Lesson 6 / 11 [Pseudo 3D with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world.
In this video, we learn a way to make our items 3D. While you could certainly add some sprites to your existing 2D interface, creating a 3D look is a whole different experience.
Ive previously demonstrated how to use images for adding cars, and even offered tips for recoloring sprites in previous tutorials. But what if youre aiming for a genuine 3D appearance? You could completely refactor your application to utilize a 3D rendering engine. Like:
⭐ Bretto ported the code from Phase 1 to ThreeJS:
https://github.com/Bretto/evolution
⭐ @davidmurphy563 ported the code from Phase 1 to Godot:
https://youtu.be/FJFrSCEWqLU?si=toU4O43h2oaJmKUy
I want to teach you a way to get the 3D look without using a 3D engine because I find this effect visually appealing, and its surprisingly straightforward to implement.
Beyond the visual aspect, you may also find the underlying mathematics intriguing. While 3D renderers primarily employ triangles or voxels, our focus wont involve these elements. Nonetheless, this exploration touches upon fundamental principles of 3D rendering, providing insights into how these complex systems function.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
5. Buildings And Trees = follow along
6. Fake 3D = code after this lesson (including the part for channel members)
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐My Video on the Euclidean Distance⭐
https://youtu.be/3rPwfmrCwVw
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:29 Creating the Tree Object
05:08 Explaining the 3D approach
10:47 Styling the 3D Trees
16:02 Random number generation
20:35 Creating the Building Object")
![🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor]](https://i.ytimg.com/vi/avxStAp0mco/hqdefault.jpg "🕯️Magic Candle🕯️JavaScript Project [With Device Orientation sensor]
Ill be coding a simple candle simulation where the flame always points up (even if you rotate the device).")
