Excellent instructional video Radu! I found out about your site in one of Frank’s Laboratory visual / sound instructional videos. I come from the microcontroller ‘C / C++’ world. I started to learn JS and associated browser codes in March. I’m using vanilla JS to create browser objects and elements with as little HTML and CSS as possible as an interactive interface with tablets and phones to my projects. The resizing techniques you showed is very useful. Frank and you cut to the chase from a coding perspective which is certainly impacting my learning curve. Thank-you for sharing your knowledge!
Hi Carl! I'm happy to hear you found this useful! If you know embedded C/C++ already, then learning JS should not be too demanding, I think. Maybe the visual things are more challenging as you probably did less of that in C++ but Frank and I have plenty of that on our channels. Glad to have you on board :-)
@@Radu Radu, I watched your machine vision video. Awesome. I studied machine vision back in the late 80’s. Actually did a project measuring the diameter of extruded glue sticks. Similar technique, lighting was crucial, threshold, count pixels, measure centroids via line arrays etc. This is a really useful, non web browser app. Just gives me some nice study material. I did sign up on your website. Thanks for sharing.
@@Radu the JS is not that difficult to pickup, looks just like C++ for the most part. I’m fluent in C, pointer / structure guy. It’s interesting how you create elements, out of thin air, give them an ID and away you go ( no memory address yikes) Document.getElementbyID(): is so cumbersome. Give me a preprocessor alias LOL. That one kind of boggles me. I know it’s self documenting. But we know it’s a document so doc.getID(); or d_getID() would work. Just coming from the embedded world where every character is a byte of memory. Completely different paradigm, but enjoying it. Particularly the browser debugger.
@@carltone Yeah, JS can be similar to C++, but I feel that Frank and I make it seem as such... Because we work with canvas pretty often and not so much with the HTML DOM, we don't use many of the JS elements related to web. Congrats on understanding pointers :-)) I haven't coded in C/C++ for 7 years now... Maybe a bit, here and there, when students use it for some specific purpose. I prefer the longer naming conventions... Apart from that embedded world, memory stopped being an issue for a long time... This also makes people write very bad code that works but uses much more resources than necessary... But that's another story. Debugging in the browser is great. There are many other features I don't use that often in tutorials, like breakpoints and profiling. You may want to look into those as well.
This is so awesome!! I'd love to reason as fast as you about these size-related variables, but this was a little too quick for me;) I had to watch it several times:)
Thanks for the tip :-) I've used it in some videos and will switch to that for every project, but not for the reasons you are thinking :-)) I disable all help that VS Code gives me because I think it's disturbing when I make a tutorial and code hints are jumping all over the place.
Hi, yes, sure. Think about it like this. Those two elements inside the min function are scalers that when multiplied with the video dimensions you'll get a video that is either as wide or as tall as the browser window. You want the minimum so that you don't end up with video outside the screen. Hope this helps.
I am getting just a video display, with no image, even if I play the game from your link, it is an avtice video display and not an image. What am I missing?
Hi, yes, video should be playing. Are you by chance using Safari on a Mac? And / Or can you please try a different browser? I've heard that there is an issue like that on Safari on Mac, but I can't test...
It should work on the mobile device as well. You can try the game on my website (radufromfinland.com). If it doesn't work it could be your browser permissions.
nice video in the next part, i am sure that you'll use the last 4 parameters of drawImage function to crop the camera signal. and to draw the parts arround the square you'll maybe use globalComposition. am i right☺
Wow, you sure master the canvas API, no doubt about that :-) I will crop the camera signal as you describe. And, it's true that you can use global composition operations to do the final shaping of the pieces. But I will use a different technique for that! You'll just have to wait for part 9 and see :-)
How to pass these frames (the frames in the webpage) to a python script for some kind of processing using opencv? I mean using the frames generated by javascript. I don't want to open the camera in opencv, just passing these frames to opencv. We can send data to python script from html and javacript using AJAX and flask. Ajax convert the data to JSON and post. I am not sure if we can do that with video frames also.
You can, for example, encode each image as a base 64 string and pass it as a JSON string. You may want to look into the 'toDataURL' method of the canvas.
Hello!!! Thank you very much for your video, it's great!!! I wanted to ask you how I can access the camera of my cell phone connected to my laptop with javascript?
@@Radu What I want is to be able to carry out a project for a work of art in which I need to connect several cell phones of different models to my laptop and access their cameras and reuse the image they capture.
It would be to connect at least 3 cell phones to the computer, access their cameras in real time and manipulate the image of each one with html, css and javascript on the computer screen.
@@ricardomartinezramos796 haven't done anything similar yet... But if I were you, I would try DroidCam OBS and then try to access the phone camera like any other webcam. Hopefully it works.
@@Radu th-cam.com/video/PdzV-tllEVo/w-d-xo.html . I have been looking for a solution for this, and found your video which nearly looks like this one. As you see from the video I sent you, there is one png uploaded, and below it there are some shapes. when user click on some of it , the original picture gets that shape. I am new to front end, so could you please help me how to manage it?
@@AlishSafarli You can definitely do this in the same way I do it in part 2 from that playlist. I use video from camera, but it will work with png images as well. Just do let img=new Image(); image.src='filename.png'; globally then use img instead of video object in drawImage method.
![Self-driving car - No libraries - JavaScript course [Lecture 1]](http://i.ytimg.com/vi/NkI9ia2cLhc/mqdefault.jpg)
Have you ever used camera in your projects?
yes when i learn how to invert image color from your VWD course.
I haven't used it yet but after this I will :)
@@unknown-bx8my Ah, I see :-) I hope you found it useful!
@@Frankslaboratory Curious to see what you'll come up with!
only now i thank you ,,,,,from iraq
Finally I got Someone who is not teaching JavaScript for beginners, Just fell in love with JavaScript again Thank You
You are welcome! This tutorial is a bit old already, though. I have fancier things on the channel :-)
I tried but to understand everything i have to start from the bottom, but soon I will learn your newer concepts
@@rishavpapaji5349 Ok. This project is not necessarily the easiest on my channel, though :-)
I’m so impressed by how simple it is to handle automatic resizing using your method. I’ve been struggling to do this!
Glad you like it :-)
I really like this tutorial style, you made so many things easier to understand. Thank you
Glad you like it :-) I think this was a very basic episode. Hoping the series will be interesting overall.
your way of teaching is exceptional, keep up the quality work, it is greatly appreciated :)
Happy to hear. Thanks for watching!
Excellent instructional video Radu! I found out about your site in one of Frank’s Laboratory visual / sound instructional videos. I come from the microcontroller ‘C / C++’ world. I started to learn JS and associated browser codes in March. I’m using vanilla JS to create browser objects and elements with as little HTML and CSS as possible as an interactive interface with tablets and phones to my projects. The resizing techniques you showed is very useful. Frank and you cut to the chase from a coding perspective which is certainly impacting my learning curve. Thank-you for sharing your knowledge!
Hi Carl! I'm happy to hear you found this useful!
If you know embedded C/C++ already, then learning JS should not be too demanding, I think. Maybe the visual things are more challenging as you probably did less of that in C++ but Frank and I have plenty of that on our channels. Glad to have you on board :-)
@@Radu Radu, I watched your machine vision video. Awesome. I studied machine vision back in the late 80’s. Actually did a project measuring the diameter of extruded glue sticks. Similar technique, lighting was crucial, threshold, count pixels, measure centroids via line arrays etc. This is a really useful, non web browser app. Just gives me some nice study material. I did sign up on your website. Thanks for sharing.
@@carltone Wow :-) thank you, Carl for all the attention! I'm flattered :-)
@@Radu the JS is not that difficult to pickup, looks just like C++ for the most part. I’m fluent in C, pointer / structure guy. It’s interesting how you create elements, out of thin air, give them an ID and away you go ( no memory address yikes) Document.getElementbyID(): is so cumbersome. Give me a preprocessor alias LOL. That one kind of boggles me. I know it’s self documenting. But we know it’s a document so doc.getID(); or d_getID() would work. Just coming from the embedded world where every character is a byte of memory. Completely different paradigm, but enjoying it. Particularly the browser debugger.
@@carltone Yeah, JS can be similar to C++, but I feel that Frank and I make it seem as such... Because we work with canvas pretty often and not so much with the HTML DOM, we don't use many of the JS elements related to web.
Congrats on understanding pointers :-)) I haven't coded in C/C++ for 7 years now... Maybe a bit, here and there, when students use it for some specific purpose.
I prefer the longer naming conventions... Apart from that embedded world, memory stopped being an issue for a long time... This also makes people write very bad code that works but uses much more resources than necessary... But that's another story.
Debugging in the browser is great. There are many other features I don't use that often in tutorials, like breakpoints and profiling. You may want to look into those as well.
Mr Radu I like you works thank you so much sir
Thanks for watching!
Thanks a lot! @Radu We need more videos like these
No problem :-) Will try to make more.
subscribed
This is so awesome!! I'd love to reason as fast as you about these size-related variables, but this was a little too quick for me;) I had to watch it several times:)
It's not trivial... but in this kind of scripted videos the pace can be quite fast (maybe too fast). Glad to hear it became clear eventually!
@@Radu These videos are so incredible! Thank you so much for that:) I should do so many other things, but can't stop watching them haha
@@robinkohrs8097 not sure if I should worry about that :-))
@@Radu Haha no need to worry at all;) Thanks so much!
@@robinkohrs8097 :-)
I have one suggestion for you, you should use something known as Vs code because it will make your work easier
Thanks for the tip :-) I've used it in some videos and will switch to that for every project, but not for the reasons you are thinking :-)) I disable all help that VS Code gives me because I think it's disturbing when I make a tutorial and code hints are jumping all over the place.
Actually, you do not need to force overflow to hide the scrollbars. Just add display: block to the canvas element
Thanks for the tip! Good to know :-)
thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaank you my love
:-D
Great tutorial!! Can you explain please what is the purpose of Math.min() to calculate the aspect ratio ? Thanks
Hi, yes, sure.
Think about it like this. Those two elements inside the min function are scalers that when multiplied with the video dimensions you'll get a video that is either as wide or as tall as the browser window. You want the minimum so that you don't end up with video outside the screen.
Hope this helps.
followed the code up to 4:28, no errors, but also no camera view from the webcam. Is there an update which is needed? Using Chrome.
Can you share your code somehow? (like github or on my discord server)
I am getting just a video display, with no image, even if I play the game from your link, it is an avtice video display and not an image. What am I missing?
Hi, yes, video should be playing.
Are you by chance using Safari on a Mac? And / Or can you please try a different browser? I've heard that there is an issue like that on Safari on Mac, but I can't test...
I was hoping to see it on an actual mobile device because I tried using MediaDevices API, but can’t open camera on mobile device.
It should work on the mobile device as well. You can try the game on my website (radufromfinland.com). If it doesn't work it could be your browser permissions.
@@Radu Even if it is still on development server?
Ah, if you want to test your own code you may want to host it on something like github pages or codepen.
@@Radu from i heard in internet, the navigator.mediaDevices must run on https, it cant be on http. If on http it will be error
Thank you.
You're welcome!
nice video
in the next part, i am sure that you'll use the last 4 parameters of drawImage function to crop the camera signal.
and to draw the parts arround the square you'll maybe use globalComposition.
am i right☺
Wow, you sure master the canvas API, no doubt about that :-)
I will crop the camera signal as you describe. And, it's true that you can use global composition operations to do the final shaping of the pieces. But I will use a different technique for that! You'll just have to wait for part 9 and see :-)
@@Radu i am very excited now🔥
@@unknown-bx8my Good :-)
6:00 resolution, aspect ratio
I'm not so sure.... I meant that there are many possible resolutions and aspect ratios out there (plural).
How to pass these frames (the frames in the webpage) to a python script for some kind of processing using opencv? I mean using the frames generated by javascript. I don't want to open the camera in opencv, just passing these frames to opencv. We can send data to python script from html and javacript using AJAX and flask. Ajax convert the data to JSON and post. I am not sure if we can do that with video frames also.
You can, for example, encode each image as a base 64 string and pass it as a JSON string. You may want to look into the 'toDataURL' method of the canvas.
Damn this is amazing, where can i find the source code for this?
Should be on my website: radufromfinland.com
Hello!!! Thank you very much for your video, it's great!!! I wanted to ask you how I can access the camera of my cell phone connected to my laptop with javascript?
Mind telling me why you want to do that? Depending on the reason I can explain one of several ways to do it.
@@Radu What I want is to be able to carry out a project for a work of art in which I need to connect several cell phones of different models to my laptop and access their cameras and reuse the image they capture.
You think it's possible? I've been researching how to do this project for a while now. Could you help me, please?
It would be to connect at least 3 cell phones to the computer, access their cameras in real time and manipulate the image of each one with html, css and javascript on the computer screen.
@@ricardomartinezramos796 haven't done anything similar yet... But if I were you, I would try DroidCam OBS and then try to access the phone camera like any other webcam. Hopefully it works.
8:27 refresh emulator
Sure, thanks :-)
Thank you for the playlist, Can I ask u a question?
Yes, of course.
@@Radu th-cam.com/video/PdzV-tllEVo/w-d-xo.html . I have been looking for a solution for this, and found your video which nearly looks like this one. As you see from the video I sent you, there is one png uploaded, and below it there are some shapes. when user click on some of it , the original picture gets that shape. I am new to front end, so could you please help me how to manage it?
is there a tool for to do this or which technology does it use?
@@AlishSafarli You can definitely do this in the same way I do it in part 2 from that playlist. I use video from camera, but it will work with png images as well. Just do let img=new Image(); image.src='filename.png'; globally then use img instead of video object in drawImage method.
@@Radu what about different shapes?
Can I get the code?
It should be on my website. Let me know if you find it.