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:)
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.
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.
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.
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 :-)
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PdzV-tllEVo.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.
