Streaming an IP Camera to a Web Browser using FFmpeg


Welcome in this video I’m going to talk about streaming an IP cam to a web page and I have this so it works on Safari Firefox and Chrome I’m not sure about Edge and I’m working on a Mac and this is an advanced kind of video I’m not going to go over every single aspect But so if this video assumes, you know certain things, but I’m going to talk about what I did this get this to work. So There’s two parts to this you have a web server and then you have a script you run running ffmpeg To convert the stream to something that can work on the web page So what I have here is on this server the 192.168.7.161 this is an Ubuntu server running nginx web server and it could be running Apache or Any of the other web server software and I have this HTML directory and then I have live inside of that So if I go to the HTML directory? We’ll see there’s an index file in here and I’ve copied that the contents of this to this text document here So it is this here and this is the code on the web page that displays the video So I’ll put this HTML and the script and everything in the description or if it doesn’t fit in the description I’ll put it as comments or something But I’ll put it down below so you don’t have to like copy it off the screen This HTML is in the index.html file If you’re just streaming to Safari you can use just this here in your body but I’m going to delete that because I downloaded this from this URL which I’ll put in the description and have this JavaScript that will make it work on Safari or Chrome or Firefox. So it’ll work on any of them So this is the hole of the index here and you want to put your server address here Oops, and then we have a path and then we have this my stream dot M3u8 so well and we’ll get into this in just a second here So you create your index like this and then I have a directory So if we look in my web site, I have the index that HTML then we have this live directory And inside of this I have this stream underscore No Audio and stream and the noaudio is just a version I made that and I took the audio out so we’ll look at these scripts here and This is Inlet and like I said, this is in the live directory and this is the basic of that script This would be the regular version. Not the no audio version And what I have is I have this #!/bin/bash So this essentially makes it a bash script and then I define these shell variables For the source video source the audio options the video options and then the output so the source here is my IP cam and you’ll need to search for this if I’m using an Amcrest cam and Other cameras will have a URL for that too So and and you can test this on the command line if you have ffmpeg installed copy And We’re doing ffplay and we’ll see this works this camera works so you can test that ahead of time and Then the audio options here we have -c:a and this is the audio codec and we have libfaac and then -b:a 160000 is the bitrate and then -ac is the number of channels so two channels and then for video we have the size is 854 by 480 and then -c:v is the codec and that’s libx264 and then here we have -b:v and that’s 800000. That’s the bitrate So these you can change, you know, especially like the size you may want different sizes and then the output HLS is the defined the streaming and we have the hls_time and this is ten and then we have the size is ten The hls_list_size is 10 and then the start number is 1 so I’ll get the stream up and running and then we’ll look at this This is the number of seconds. This hls time is the number of seconds for each clip And then the size is the number of Clips But I’ll get into that in a little more detail and then we have the ffmpeg command So we say -i vidsource So we’re saying the input is this URL here and we say -y says overwrite any files that are already written and then we have the audio options the video options In the OUTPUT_HLS and then we have this mystream.m3u8 Once we have all this the script ready and you’ll need to you know Change these for your IP addresses and such so the IP address of this one is 192.168.7.161 so we’ll run this stream and then Like I said the no audio one is just missing the audio because there’s no audio on my camera But you could do it with audio. Well, we’ll run this and It will write some files. So I have another terminal in this /var/www/html/live directory and we’ll see there’s this mystream1.ts Ok, yeah, I guess it took a second you’re on it alive but mystream1.ts mystream2.ts Yes, and then we have this mystream.m3u8 and if we type cat mystream.m3u8, we’ll see here It lists out the my stream1 and mystream2. So what this will do is this will create these stream files It’ll say 1 2 3 and it’ll get up.get up until it has 10 Which is our list size and then it will overwrite the last one once it gets up to 10 It will go back and overwrite the first one and it’ll be mystream11.ts And if we go back into our HTML here, you’ll see we have the 192.168.7.161/live/mystream.m3m8 So this is the file that tells us where the file the stream files are and you can change these amounts you could have More or less. So if we go into Safari here into our address bar will type in 192.168.7.161 And we have a live stream of the camera and you can see up here they time on the camera It’s you know, January 25th, and the time is ticking down, so it’s not paused So depending on how you do things you may need to start the video like if you’re using the other I Deleted the other method the other method annoys dreams to Safari. You’ll need to start the video This is started automatically. So we have the stream here and then we can go into Let’s see. We’re in Firefox Same thing we have the video and if you open this up, and it’s not there you may need to refresh your Screen, sometimes it can take a while to get initiated and get going and then we can go into Chrome so I have it running in three different browsers right now So, let’s say we want to change the size of this We can go into here I can hit ctrl C to close it And then I can it will remove these my stream files eventually, but I like to remove them because sometimes you’ll accidentally read them So if we type from rm mystream* now We just have these two files and then I can type nano space stream.sh and I’ll go in here and I’ll edit this Let’s say I want to do let’s see. Let’s do half of that. So 854 set up 427 by 240, okay and You’d probably want to change the bitrate and things like that, but I’m just gonna leave it so oh Exit up. This will type ctrl o to save it and then ctrl X and you’ll need to change permissions on here Like I said, this isn’t an advanced video. So this assumes, you know certain things for instance to run this script You actually have to make it executable So you have to type chmod Space and then plus X and then the name of the script and that makes it executable and then you can run the script So now we’ll run it, okay, so it didn’t like the size of that so, you know, you may have to test things but So let’s go back in and change this to something else. Let’s say 1280 by 720 see if this works Okay, so that worked so now if we go here and refresh like say it’ll take a second to get this running and There we go now you can see it’s taking up the whole screen if I did fullscreen here Well, that didn’t work. I’m not sure on a big full screen with here we go. There we go so I record this at 720 so this is the full resolution full screen of this another thing you can do is click this little Pop-out box and this makes it a little, you know, movable pop-out So you could leave this up in the corner of your screen and then, you know go about your business and you know Check your emails write your word documents and then say watch your security camera up here and then you can Click on this to go back to your web browser like that. So so this is the basics of Streaming a stream in a web browser using ffmpeg If you have any questions, please leave them in the comments If you like this video, please click like if you haven’t subscribed my channel I’d appreciate if you did that and I’ll be making another video It’ll be almost identical to this one and it’s streaming from an HD home run To a web browser, but I want to make separate videos because people will probably searching for each of those videos independently But I’ll look out for that if you’re interested in that and thanks for watching until next time. Goodbye

5 thoughts on “Streaming an IP Camera to a Web Browser using FFmpeg

  1. <!DOCTYPE html>
    <html><head><title>Live Cam</title></head>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <body>
    <!– Use this if you only support Safari!!
    <div id="player">
    <video id="video" autoplay="true" controls="controls">
    <source src="http://ip-address-of-web-server/live/mystream.m3u8" />
    Your browser does not support HTML5 streaming!
    </video>
    </div>
    –>
    <video id="video" autoplay="true" controls="controls"></video>
    <script>
    if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    // bind them together
    hls.attachMedia(video);
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    console.log("video and hls.js are now bound together !");
    hls.loadSource("http://<ip-address-of-web-server>/live/mystream.m3u8");
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
    console.log("manifest loaded, found " + data.levels.length + " quality level");
    });
    });
    }
    </script>

    </body>
    </html>

  2. You have to add -hls_wrap 10 if you want it to overwrite the 10 .ts files that were created. For it to function as described in your video your output variable should be: OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1 -hls_wrap 10"

Leave a Reply

Your email address will not be published. Required fields are marked *