 Okay, this video is part of a series be sure to check out the previous videos before you continue on this one There should be a link in the description or at the end of this video And we're using a net cat a busy box net cat in this case to create a web server This is not something you want to do in most cases you want to use a real web server When possible but in a pinch or if you're just having fun or learning how stuff works This is great So we're gonna learn a little bit about embedding images today Because in previous videos we show we actually had a past strings of text And it also files and command outputs to a web browser to a client using end cat net cat and Today we're gonna look at putting images on those pages as we talked in the previous video I linked to stuff Outside so let me uh, let me quickly here go Go like this Let me remove this that's from previous tutorial and over here I'm gonna go tux linux, and I'm gonna go images and I'm going to pick an image like I don't know just anyone this This one looks good And I'm just gonna say copy copy image image address We can now close that and up here I can say Vim and I can create a file and I can put some HTML in here, so I'll say image source and I'll put in The link to that image. I'll save it and Then what I can do is I can use the command that we used in a previous video Right here Which I'm not gonna go over all this again this first part's just saying hey I'm a web server. I'm HTTP server and then we're gonna pass it that file to our our busy box and see and now if I refresh this Haha, I forgot one part We need to have that Doc type at the beginning of the file so we can either put it in the file Which is where it really belongs or we can put it in our command here Let me go ahead and just go Vim index and here add that doc type Otherwise the web browser thinks I'm just passing a text file. It's gonna display that text But now I believe if I did everything right there we go We get the image on the screen because the web browser goes goes. Oh doc type. This is HTML file read This is HTML display that image which it did great well if I list out in here You can see I have four images in here tux one tux two tux three tux four PNG and if I was to go back into our file here and I Was to delete all this I Can say tux two dots PNG save that Run the same command again and When I refresh my web browser down here. Uh-oh. I got a broken image. Why is that? Well because on a real web server Your client your web browser goes okay Hi, I would like to see this HTML and the HTML has a link to another file on it Then the web browser again goes to the server and goes hello. I'd like this image file now problem with this is After passing it this file our web server turned off. It goes. Oh, I said the file I'm done and even if we put it in a while loop busy box here doesn't know how to access any files other than what's passed to it So it doesn't know how to access that that image file unless we tell it to So how can we display that image? inside our HTML file Well, there's a few options so and let's go ahead and first option is to Make a static page that has the images embedded. Well, how do you embed an image into an HTML page? Well, it's simple you you use base 64 which I've talked about in previous videos base 64 can take any file Any binary files an image video program blah blah blah and turn it into a string of plain text and In most cases for media anyway video audio and images web browsers can decode that so all we have to do is Pick one of our images so we'll say in this case. We're working with tux too I can say base 64 and most likely this is installed on your system and it's built into busy box as well So even if you're on a lightweight Modem or a router or some of the lightweight device you can get busy box on there or it's most likely already on there and You can pass it this this command So base 64 I'm gonna say tux 2.png and it's gonna give us all This text and that is the image in base 64 format. It's very long Because it's it's the entire image. In fact, I came and scroll all the way back to the top It's so long but what I can do is if you you can put in your clipboard or pipe it into a file I usually do pipe it into my clipboard here. I use X clip And that puts in my clipboard and then I can go into my HTML file here And I can delete that and I can paste in all of that and Save that run the same command re-ran before and if I did everything properly. Oh wait No, I didn't I already know I didn't So I'm saying source and given that base 64 we have to tell it that it's it's base 64 image So here I'm going to add in this text. Whoops I'm saying data colon. It's an image PNG file and it's base 64 with a comma here again I don't know if I mentioned this in the previous videos Everything I'm doing is in the links in a note and there's notes in the links in the description So go to the description of this video and all these notes are on on paste bin so you can see this So we're saying That we're we want to look at an image but instead looking at a separate file. We're just embedding base 64 into here save that Starter server up and if I did everything I refresh there is our image Because it's embedded in that HTML file now if you don't have X clip install. I recommend installing it It's very useful tool. You could also do something like this. I can just remove my index HTML file I can do base 64 instead of piping it into X clip. I can just put it into index dot HTML and Then I can open up index HTML and then up here. I can add in all the stuff. I need to add it I can add in my doc type and I can say that this is a base 64 image And then I can jump all the way to the bottom and add in my closing tag And if we did all that properly I can run the server again Refresh this. Oh, it didn't work. I probably just put an extra space or something somewhere. It doesn't belong Let's go ahead and look at our our file again. Oh I forgot to Close my quotations here. We are refresh. Nope. Still not working. We can always look at the code here image source That would be because I started with single quotes and closed with n quote a double quotes There we go. You could tell because the colors weren't quite right there. So let's go ahead and close this Run our server again And there's our image. So That's kind of a pain in the butt it works, but it's a pain in the butt plus What if the images on your server change? I have four images. Do I want to do that four times? And what if I add a new image or remove an image? Well, we can go back to what we learned in the previous video and actually Run shell commands and pipe the output to busybox and cat net cat whatever so This is the command I'm going to be using so what I'm doing here is I'm echoing out again our HTTP header Then I'm echoing out because I'm not using a file anymore. I'm not going to be using that index file I'm saying echo out. This is a doc type. This is a HTML file and then I'm writing a command and again as I said in previous video No matter what programming you're using because I'm using bash here. You can actually write all this in Python or C or C++ or Pearl anything that can output text any program that can output text you can use this So you can actually make a C program compile it and run it the same way But it's just easier to use scripts in cases like this. So anyway for me anyway Again, this is a web server. This file is the HTML file and then we're issuing a command here And it's a for loop. We're saying for Each PNG file we're creating a variable called I and this is basic shell commands. So I mean hopefully you you know how shell commands work We're gonna do and we're gonna echo out our image source a little confusing. It's on two lines here And then we're gonna pass it the header for the the base 64 and then we're gonna say for each file Paste in the base 64 commands. So this this dollar sign parentheses saying run this command we're saying base 64 against the current file done And it's gonna loop through each file. It's gonna output also. Let me show you this without the busy box Command without the end cap command. There we go. It just outputted all that HTML Which again, it's so long. I came and scrolled to the top, but that's what it outputted outputted That's the output of it and again We're gonna put that in curly braces so that we can pipe all of that Into our busy box and see listen on port 8000 and now if I refresh this And if I was to remove one of those tux files, so let's say remove tux tux number 2.png and I start my server back up and Refresh this you got that now again if I refresh now We've got nothing Because our server is set to only run once and then disconnect So if you want your server, and I should have mentioned this in a previous video I quickly stated it but I didn't show you if you want this to keep running you're gonna have to put it in a while loop So we'll say while one Do and they're gonna say done Now I can refresh and refresh and refresh and refresh and the server keeps you know Basically we connect to the server the server gives us the output the server turns off and then the server starts up again It's kind of how it's working again Use a real web server when you can but that that works. That's how you can do this now That's images. You can do the same thing with audio files. So let me go ahead and show you this Copy this command Now I have two org files Which are sound files On my server here, so let me go ahead and hit enter and we'll refresh this and you can see I can play this sound file And I can play this sound file okay, so Let's look at that command again. It's basically the same again. We're saying this is an HTTP server This is a HTML document and then instead of looping through all PNGs I'm looping through all the org files and instead of saying this is an image I say it's audio with controls and the source is in this case. It's data again But instead of saying what is it image? Png we're saying this is an audio org file in base 64 format and then we're gonna pass it the base 64 for each file Again, all these notes are in the link in the description. They were passing at the busy box on port 8,000 Go ahead and hit enter and again, I can run that and it loads them up and Again, you can make a static HTML file with this embedded But why make it static when you can actually have scripts running and again, I can do this I can say while One don't forget your space is there or it won't work do this and I should be able to you know load this up I could Open up another tab and load it up so it can serve up to you know Now, I mean the server starts up serves that information quickly disconnects and reconnects theoretically if someone was trying to connect While it's turned off, which is like a fraction of a second they'll get a server error But again, don't use this as a web server in real life scenarios unless you really you know have to Um, but that's pretty much it now. I'm not going to show you but you can do the same thing with video files Um, you know, they might load a little slow because if it's a video file Unlike normally with html you load the html file and then it asks for the video file piece by piece it loads It can stream it while it's playing um This is going to be basically embedded into the web page So the page won't finish loading until it loads all that video information So you can do it But again, just like everything we're doing in this series Probably shouldn't in most cases, but I do thank you for watching. Please visit films by chris.com. That's chris the k There's a link in the description. Also visit my patreon page patreon.com forward slash middle x 1000 There you can support my videos and I do appreciate that even if it's a little bit a little little bit And you can also go on my website click on the support link and that will bring you to Place where you can also uh support through paypal. Uh, I do thank you for watching as always I hope that you have a great day