2.6 Saving Images and Base64 Encoding - Working with Data and APIs in JavaScript
HTML-код
- Опубликовано: 5 июн 2019
- 💻github.com/Cod...
Let's add an image from the webcam to our database. For this project, we will be using the p5.js JavaScript library!
🎥 NEXT LESSON: • 2.7 Project Wrap-up: A...
🎥 PREVIOUS LESSON: • 2.5 Database Query - W...
🎥 FULL COURSE: • Working with Data and ...
🔗 p5.js: p5js.org
🔗 Processing Foundation: processingfoun...
🔗 Base64: en.wikipedia.o...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
📄 Code of Conduct: github.com/Cod...
The attention to detail with regards to the editing alone in these videos is great!
12:27 The clip in the top right is synced with the motion of exactly what your talking about, 'Taking the javascript out'
Kudos to you!
As a guy who loves meteorology, your playlist on apis has truly helped me write my script. A million thanks to you!!!
So glad to hear!!
0:09 0:11 0:13
you are work is just Awesome Sir....the way you teach is Amazing....hats-off to you...Thank you so much
Dang. You are just hammering these out.
Hope you will still do some explanation about hosting the node.js somewhere else then on a local machine
I do! It comes as the last video in this series.
@@TheCodingTrain Great!!
Hi, hopefully I am not too late, but as of writing this (July, 2022). P5.dom.js script has been merged into the p5.js script. However when trying to call noCanvas() on chrome, it fails to locate the dom element for the camera, as the browser I am using (firefox) doesn't ask me for permission to use my camera. I tried fumbling with the settings on the browser but that didn't work, the prompt to use the camera just won't show up. If I can find a solution I will post below
Update: After trying to get permission to use the camera from navigator (similar to how geolocations permission was called) I realized my virtual linux environment cannot detect my webcam. I even tried using other sites on the VM to see if it could access my laptop camera and it failed. That is most likely the error, nothing to do with the code.
thanks for this
You are so awesome! I was looking everywhere for coding courses and I thought YT would never have anything, but I was definitely wrong. Thank you for offering such high-quality content for free! If there is any way for me to support with money, please let me know!
Thank you! You are welcome to use the RUclips "join" button and I also have a Patreon.
@@TheCodingTrain Will do!
3 dislikes? Who the heck would dislike this???
THE BEST TEACHER!!!!!!!! someone ask me in 2023 how much have i progressed since today
I will try to remember!
@@TheCodingTrain IT'S TIMEEEEE!!!!!
Can not like this video enough! amazing series!!!
Awesome. Subscribed!
turns out that the p5.dom.js library has to be imported after the p5.js...otherwise the createCapture will not work...spend my day debug this...
Not only this method. All the methods from p5.dom.js will not work. p5.js is prerequisite.
This is one of your funniest you have made
it's great! This is exactly what I want to try, it helped me a lot, thank you for your course.
anyone else having trouble with the image? I am doing this with sqlite and it seems like it is going through when I send the request, but when I manually render the img on the DOM it is blank? thinking the loadpixels() method may not be working for me?
Can't display the image .....but the image is present when i console log it.
I too have the same issue
omg it works, i can see my fallout 76 achievements
Daniel i love you, i learned so much from you especialy about machine learning. I use this recomanded video just to say you how im greatfull. Thanks a lot. Love you
thankyou v much you are such a good teacher
Great series, thanks
I'm getting a blank image every time it saves to the DB (shows as blank white space in the browser and the same base64 code for each entry). Troubleshooting now. Long story short....wasn't able to find the problem.....had to rewrite it with a different style of button (the addEventListener type he used).
Is there a way to send an image from base64 to image in gmail body?
I've tried use the "data:image/jpg;base64," but doens't worked.
Can u make a video about mixing react/angular with node.js please?
He probably won't in the closer future as he doesn't use any frontend frameworks, because he doesn't really do frontend in the traditional sense.
Mixing them is just building a rest API or, which I would recommend depending on your needs, a graphQL API with node.js, and then building a frontend with react/angular/Vue that accesses that API to get data and store changes.
Id really recommend trying the GraphQL route, and I'd really recommend ReactJS over angular. React lets you just use javascript but helps you with displaying stuff. Angular changes the way you do pretty much everything, so it's a lot harder to learn, a lot harder to get out of, a lot less helpful for learning actual JavaScript, and a lot slower, both in development and in running it
Hey Daniel what's up ? Could you record a short video with p5 ? or can you only use the createCapture function to capture frames from the webcam ?
As always, great work Dan
great video, *video.size(160, 120)* has a bug with the video width element and the image is a white background, to solved this I remove *video.size(160, 120)* and add *createCanvas(160, 120)*, what is the correct form?
thanks for this! I had the same problem.
@@adamwoolf9993 Hi, another way is where the video take the parent width:
const main = document.getElementById('main');
function setup() {
noCanvas();
video = createCapture(VIDEO);
video.parent(main);
}
@@wxIyz Thanks ! "createCanvas" did not resize the cam for me. But appending the video to a parent div worked after some css. cheers!
Mirror issue how can fixed
Sir, you are genius
Nice video tutorial. It is much better if the coordinates be embedded in the picture, say at the bottom-right corner. The coordinates as well as the picture (using the back camera) will be coming from the mobile phone. Can you come up with a tutorial like that?
Can you help me please, I have a project which I have to send images over Python Socket Server to JavaScript client. When I do that, I get hexadecimal array (actually it's decimal but 0-255) I want to convert the array to image (on JavaScript client) but I can't.
Awesome 👍
omg npm steamapi is a good one
I love you man...I needed this.
The problem is.......I had already used a function to get the button to work since I didn't know about eventlisteners, etc. (I still don't, I just see it in your code). I am getting errors when I try to wrap that function (for the button) in the new function setup()
Should I store all base64 data to the DB? Text format? Because I think that in varchar we have not space
Excellent video!
I love this series 😭 so sad its coming to an end..
There's a whole 3rd project to come!
@@TheCodingTrain do you have more after 3rd project?
simply superb...
can you learn me how to make button upload image capture to google drive sooner..without php but using appscript
i was able to finish this project upto this point and capture images, saved in database, retrieved and console logged on the html page, but the picture is just blank!!!! , i inspected the page, the img tag is there with the src attribute and value but the picture on the html is just plain white , empty!..... please HELP!
i have found solution to this issue... thanks!
Very good tutorial
Wow for the first time i saw a man who does an interesting thing with nodejs rather than repeat what is already in the documentation.
7:14 - base64
Yay, waited for this!
Where is the supplemental code that you said you will be adding to this video?
Where is the supplemental code included with this video?
Can I do this using mysql database instead of nedb? Thanks!
DOMException: Could not start video source
ahhhhhhhhhhhhhhhhh!!!
why wouldn't it work ?!??
HELP :(
Why can't I use the function: createCapture(VIDEO) ??
Do you have the p5.dom.js library loaded?
@@TheCodingTrain yes, I have
oh, I can do it now.
You are amazing!
best as always
Hi!! Thank you for EVERY video you make! I've been experimenting with p5 and currently working on a ml5 and p5 project. I wanna send a frame of a canvas DIRECTLY to Cloudinary (or any other cloud-based image and video platform) so I can display it on the web page I'm working on. It's been two days and I don't seem to find the answer to this issue. Maybe there's some other way to send a frame of a canvas to the cloud-base platform that I don't know about?? Any help would be highly appreciated! Cheers
Hi Sofia! I just discovered I can view comments by members and am only just noticing this right now. Are you in the discord? That would be a great place to discuss this! I know many members (and I) could help!
@@TheCodingTrain Oh I just became a member this morning, so looking forward for that train whistle, fortunately It's been solved and the project is kinda ready, but I'll probably have some more blocks in the near future that I could clarify with you or the community. I'll send the link of the project so u can take a look at it. Thank youu!!!
Hello sir. I am getting createCapture is not defined Error in index.html. Please help
Edit: I got it fixed. I forgot to add p5 dom library.
By the way, I appreciate your work so much.
There is lot of playlist that i found in the channel witch i found interesting. But would like to assemble all of this serie of video in separet playlist plz and name it something simple to be easy to been found :)
here you go! ruclips.net/p/PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X
❤️❤️❤️❤️❤️
So... is it possible to delete base64 'encoded' images or not?
You had some old videos that used socket.io (Collaborative Drawing App) and i was wondering why you didn't need any of that in this code. I'm try to make an app, and i would like to know why someone would or would not use socket.io. How does one host beyond of localhost?
Thanks Daniel, Great videos!
This is a great question! Socket.io makes more sense (from my point of view) for real-time interactions like text chat or collaborative drawing, etc. But it's not standard for "one time requests" of data from an API. I think there could be some fun possibilities to integrate sockets with this example though for sure!
@@TheCodingTrain Thank You! So Cool, i got a response from you! Ive been watching your videos like like two years. You Rock!
editor.p5js.org/ddrbnsn@gmail.com/full/-TdqHmvWo
These tutorials are great,BUT, when you add your own code like with the buttons or the enter and list thing you really loose me(a first time who)
how was exercise 07_save_files accomplished
Can i create a video chat application using P5?
I learned something(s)
my image is not showing in list
please do something
can i use p5 with react?
How many programming languages do you know?
like all
I was searching for how to save that image string as file, but villainy rule, you said to do it by yourself
If someone wanted to find a solution:
# Python 3+
import base64
# crop redundant letters from beginning ("data:image/png;base64,")
sketch64 = sketch[22:]
def save_sketch_to_server(sketch64, sketch_path):
with open(sketch_path, "wb") as fh:
fh.write(base64.decodebytes(sketch64.encode()))
Please make a video on music player
my payday 2 achievements are my most important ones, want to make my achievements dance around my page lol 911 achievements on that one
top lezion
The image64 data is not converting into image
that is the coolest thing ever again. wordpress is such a joke to this stuff lol it' like taylor made to fit everything on the web that' ridiculous. even steam has a direct api tap to it's data
Please suggest something
0:44 to make "those (technology related) fields accessible to diverse communities".With awesome videos like this one, there is NOTHING impeding "access" to "diverse" communities. What a hell are they talking about!? Stay away from stupid identity politics, and keep up the good work!
Hi,
Here's my PR: github.com/morethanyell/nodejs-tut/pull/7
Summary:
added new codes for capturing webcam image
added gitignore to exclude database.db
Thank you.
Only 611 views :/
Pretty cool, but you're hyper-cringe. Luckily for you, I get a sick thrill from that so I subscribed. I feel the same way about Siraj Rival, his videos are so funny for some reason but at the same time make me want to die.
Aaaaaaaaaahhhhh.