Streaming an IP Camera to a Web Browser using FFmpeg

Подписаться 39 тыс.

Просмотров 94 тыс.

50% 1

In this video I stream an IP Camera to a web browser using ffmpeg. The video is served using nginx web browser set up on Ubuntu linux.
Video notes: www.rickmakes....
Amcrest IP Cameras: amzn.to/2FPzuXv (Amazon Affiliate)
hls.js site:
github.com/vid...
Please follow me!
/ rickmakes
/ rickmakes
Visit my Amazon Storefront!
www.amazon.com...
www.amazon.co....
www.amazon.ca/...
Support my channel!
www.rickmakes....
#ffmpeg

Хобби

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 107

@Rickmakes 5 лет назад

Live Cam 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("/live/mystream.m3u8"); hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { console.log("manifest loaded, found " + data.levels.length + " quality level"); }); }); }

@Rickmakes 5 лет назад

@UCu7asHugFk0ASImi1Pobh0A hls_wrap is deprecated. www.ffmpeg.org/ffmpeg-formats.html#Options-5

@chrisvaillancourt7875 5 лет назад

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"

@Rickmakes 5 лет назад

hls_wrap is deprecated. www.ffmpeg.org/ffmpeg-formats.html#Options-5

@tinakeil2567 4 года назад

@@Rickmakes while its true that hls_wrap is depreciated, hls_list_size 10 doesnt seem to restrict or overwrite the ts files either ... Im counting 38 at the moment. is there another option(s) necessary to limit the nubmer of ts files created?

@deracid_kopf 3 года назад

@@tinakeil2567 OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1 -hls_flags delete_segments"

@cjlowe1650 3 года назад

I currently have 4 Pi zeros using RTSP and sending to Shinobi (NVR) on a Pi 4 8gb. Saving on an SSD or 1TB. Kind of my home security system. I can also see each camera on VLC player and also on a project (can't remember the name) that let's me display all 4 streams on a monitor. What I really want is to have audio also. I'm using the Pi cameras on the Pi Zeros. If I setup USB microphones do you think I can use the the script portion to send it to the SSD and ignore the webpage stuff? I'll probably try at least one with the webpage but I'll also try the 4 with the NVR. Hopefully you;ll reply before I waste a lot of time trying. LOL. FYI all PC's are Raspberry Pi's wit Pi cameras and USB Pi microphones. You video is using Ubuntu linux but hopefully it will work on a Pi. Thanks in advance. This this works you will have saved me a ton of time and research! CJ

@thejword 2 года назад

Question. The script runs but it does not write the ts files to the directory UNTIL I kill the script by doing ctrl c. Then all at once the ts files and the m3u8 file show up. Any help? Thanks!

@alphacentauri8285 Год назад

same here

@GhostGTR666 2 года назад

hi sir please help, in your video there is only 1 cctv, what if more than 1? to convert ffmpeg in bash?

@rifatislamrakesh Год назад

though it's late but I can help you with that. let me know if you need the script.

@AlexanderWaal 2 года назад

It would be cool to know how to configure nginx and run it all in Docker

@local-admin 5 дней назад

THANK YOU🙏

@ianthediver2541 4 года назад

Thank you Rick. I have subscribbed and liked. I have 3 cameras I want to stream to a page on my website, do you know how I would do this (3 cameras as opposed to 1) ? Also if I embed the 3 x videos in my web page will ffmeg be running 24/7 pulling a 3 streams form my cameras even if the browser's page isn't showing ? Thank you

@Rickmakes 4 года назад

I actually have a video demonstrating this with four videos on a raspberry pi: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CuNQYKwqf7E.html The instructions should work on other computers as well. I use the lower bandwidth video streams from the camera and ffmpeg copies the codec (no re-encoding) so the technique doesn’t require a lot of processing power. It is always running even if the website isn’t up. I set up a RAM disk so the videos aren’t constantly writing to the disk. If you have questions about it, please let me know.

@ianthediver2541 4 года назад

@@Rickmakes Thanks Rick I am running running my home webserver (apache2) on a Pi4. It currently exposes a limited set of home automation controls (homeseer) , suitable for all the family. It also controls relays ready for my new astronomy dome (as soon as lock down finishes !!). I have 3 CCTV cameras which I want to add - again for faimly use as at present I have to point family members to different apps. I will look at your other video. Lots to do !!........At present I can launch ffmpeg from a Python multiprocessed class in Django. Next I need to get the video runnig on my webpage. Using your video that should easily be extendable to 3. I need to test to see if ffmeg is runnng before starting again every time a page the rendered. I want to run the stream files on a ramdisk as you suggest.

@andreashanauska4713 3 года назад

@@Rickmakes How did you setup the RAM disk? This is excatly what i am searching for.

@andreashanauska4713 3 года назад

For those who are also looking for that solution, checkout linuxhint.com/ramdisk_ubuntu_1804/

@jadetaboada447 5 лет назад

You just earned 1 subscriber here buddy.

@Rickmakes 5 лет назад

Thanks! I appreciate it.

@pompom2631 3 года назад

i am using window 10 , and install xampp , my question is --> i have my ip camera on the front of my apartment that i already made port forwarding on the router ,with public static ip address , when i stay in my house , i can see the video of ip camera of my apartment via * VLC player * when i put rtsp url with the public static ip address of my apartment 's ip camera , however when i have tried to use the command of ffmpeg with the rtsp url with the public static ip address of the router of my apartment in order to create the m3u8 file from my ip camera, the ffmpeg command does not generate the m3u8 file , it causes frozen on the terminal , however when i go back to my apartment , and connect my computer to the same router that connect to ip camera , i can create the m3u8 file successfully with running ffmpeg command with local ip address and i can stream the video successfully as you have done , so my question is --> how i can create the m3u8 file with running the ffmpeg command with my public static ip of my apartment when i am in my house ?

@vandeljasonstrypper6734 23 часа назад

This is pre-recorded now live stream correct?

@Rickmakes 19 часов назад

Are you referring to the video of concrete with snow on it? That was captured live from my security camera.

@vandeljasonstrypper6734 18 часов назад

@@Rickmakes Because i saw time line at your video, thought that a limit time range video (pre-recorded)

@cjlowe1650 3 года назад

I get the Webpage to come up but the stream.sh gives me the error. Could not write header for output file #0 (incorrect codec parameters ?): Permission denied Error initializing output stream 0:0 -- I copied and pasted and used the correct ip for the camera that I tested in ffplay and that worked. any ideas? Thanks

@dj0082008 Год назад

For YEARS I have looked for a " STRAIGHT TO THE POINT VIDEO!!" You have no IDEA how much money I have spent, and here you have this simple webcam in webpage script!! You are a BLESSING SIR!!

@ThiagoMartinsdeSousa 4 года назад

Hello Rick, At your vídeo the RSTP vídeo is sent to the server, transcoded to HLS and forwarded to the webrowser. Do you know if It's possible to send the video from the camera direct to the webrowser, without passing through the server?

@Rickmakes 4 года назад

With Amcrest cameras, you can stream directly to a webserver with this URL: "user:password@ip_address/cgi-bin/mjpg/video.cgi?channel=0&subtype=1". It may ask for a username and password. The video is mjpeg at 640x480 resolution so the quality isn't great but it may meet some people's needs.

@ThiagoMartinsdeSousa 4 года назад

@@Rickmakes Thanks!

@pompom2631 3 года назад

For example , ie.--> i have one ip camera in front of my apartment in Kuala Lumpur , and i have the other one of ip camera in the house in Bangkok , i am in Bangkok , i follow your video tutorial and i successfully watch and stream of the Bangkok ip camera , but i also want to stream the Kuala Lumpur ip camera RTSP too, so the first step following your video tutorial , i need to run the ffmpeg command to create the index.m3u8 and .ts files , and i have the public ip address , RTSP of my ip camera in Kuala Lumpur , ** but when i am in Bangkok and i start running the ffmpeg command from RTSP of Kuala Lumpur apartment 's ip camera , the ffmpeg could run but it stop , and it does not generate the index.m3u8 and .ts files from RTSP that send from Kuala Lumpur ip camera , however when i am in Bangkok and i test running the RTSP url from the Kuala Lumpur ip camera in vlc player , i successfully could watch the streaming video , So regarding to your video tutorial. , --> how can i stream the RTSP from ip camera that come from or send from other place or other state / country ? or how to run the ffmpeg command that has RTSP that come from other state / country ?

@decus80 5 лет назад

@RickMakes why i can't ./stream.sh ? this comment on my server : root@deno:/var/www/rsatest.com/html/live# ./stream.sh -bash: ./stream.sh: /bind/bash: bad interpreter: No such file or directory

@thejword 2 года назад

Any updates to this? Any more complete source code online anywhere? For managing starting stopping the streams etc.? Please contact me

@MrSpeedsterm 4 года назад

Is there a way to stream over webRTC via the udp protocol using ffmpeg to ensure low latency ?

@Rickmakes 4 года назад

I don't have experience with webRTC but it is my understanding that ffmpeg doesn't directly support it.

@mrbanana779 3 года назад

For me it does not work unfortunately. I get "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /test.m3u8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." Any ideas?

@pompom2631 3 года назад

@Eloy Schultz my terminal was frozen then this is the error that report after control c to stop the ffmpeg command [rtsp @ 00000201eb9ef0c0] Could not find codec parameters for stream 0 (Video: h264, none, 1280x720): unspecified pixel format Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options Guessed Channel Layout for Input Stream #0.1 : mono Input #0, rtsp, from 'rtsp://admin:admin@185.2xx.xxx.xxx:554/11': Metadata: title : 10 Duration: N/A, bitrate: 64 kb/s Stream #0:0: Video: h264, none, 1280x720, 90k tbr, 90k tbn Stream #0:1: Audio: pcm_alaw, 8000 Hz, mono, s16, 64 kb/s Output #0, hls, to '.\server\videos\ipcam\index.m3u8': Metadata: title : 10 encoder : Lavf59.2.101 Stream #0:0: Video: h264, none, 1280x720, q=2-31, 90k tbr, 90k tbn Stream mapping: Stream #0:0 -> #0:0 (copy) Press [q] to stop, [?] for help [hls @ 00000201eba98d40] Opening '.\server\videos\ipcam\index0.ts' for writing [hls @ 00000201eba98d40] Opening '.\server\videos\ipcam\index.m3u8.tmp' for writing frame= 0 fps=0.0 q=-1.0 Lsize=N/A time=00:00:00.00 bitrate=N/A speed= 0x video:0kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: unknown Exiting normally, received signal 2. * can you guide me please

@cctvatambua 3 года назад

i get = line 6: ffmpeg: command not found for running stream.sh. when i change line 6 -> bash ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS mystream.m3u8 i get = ffmpeg: Is a directory i'm using Win 10

@Rickmakes 3 года назад

Do you have a Bash shell installed on Windows (like WSL)?

@jodikurniawan3732 7 месяцев назад

nice tutorial, how to run multiple camera?

@MykeHawke-r9r 4 месяца назад

Thank you for making this video.

@Tony_8808 4 года назад

+RickMakes - Hi I am needing some help if possible. So I have an IP Camera connected to my DVR and that DVR is connected to my router and all that works correctly and I'm able to see it working from my phone but I'm wanting to also view it from my Web Browser on my Mac... problem is it asks about installing Activex which if not mistaken cannot directly be done on a Mac. - Cannot help in any way on what I need to do to be able to view my IP Camera through a browser without it asking for ActiveX. - Any help would be thankfully appreciated.

@Rickmakes 4 года назад

What is the make and model of the camera?

@Tony_8808 4 года назад

@@Rickmakes - I believe it's an SPro DVR. I think there are software apps for Mac that will make it possible to view my DVR without needing Activex, but not sure which software app to look at in getting and trying.

@stevey500 2 года назад

If you were to open this web server to public, does the camera also need to be opened up to the public?

@Rickmakes 2 года назад

No. The camera is kept on the backend.

@redpoint8823 4 года назад

I am born stupid. I truly hate things I don't understand

@Rickmakes 4 года назад

We are all born stupid. We all start at zero. Technology can be intimidating at times but if you keep learning you will one day look back and see how far you have come. I have been working with computers for decades and there are still many things I don't understand but I've also learned a lot along the way.

@TerryGrancho 3 года назад

@@Rickmakes No, sir, he could be right, some are born stupid, they could study and study and they just cannot learn, it doesn't matter how long they take... intelligence has a certain amount of space for improvement, and it happens when you are a kid, depending on the peers, music you hear, parents, teachers you can develop a little or not...

@rifatislamrakesh Год назад

Thanks a lot for the video. You saved my day!

@langtupt 4 года назад

Hello Mr. RickMakes, Can you help me setup it's in ubuntu server? , or can you give me your email or skype, i need you help. Thank you very much

@domoledlight 3 года назад

thank you for your tuto i have done the same with node js and ffmpeg I can stream my ip cam on my smartphone ; do you have an idear how to control node js server from client side a mean restart ffmpeg node js server app

@Rickmakes 3 года назад

Sorry. I don't have experience with node js.

@teomandi 4 года назад

Great video. You just saved my by implementing something horrifying with this simple approach

@robbyaljufri 5 лет назад

why unknow encoder 'libfaac' ????

@Rickmakes 5 лет назад

Robby alj I’m guessing your version of FFmpeg doesn’t support aac. Do you need audio? If not, you could try removing the $AUDIO_OPTS.

@robbyaljufri 5 лет назад

@@Rickmakes okay thanks... and how to access multiple channel ?

@uwedippel 4 года назад

Alas, the ffplay part with the rtsp never pops up an image. It just keeps on working, looks properly, processes data, but never produces an image. What's wrong?

@Rickmakes 4 года назад

Are you getting any sort of error message in the terminal where you are running ffplay?

@uwedippel 4 года назад

@@Rickmakes I wonder how many lines I could put here?? Okay, the only one in between is the one on "decoding for stream 0 failed" " ... [...] libpostproc 54. 7.100 / 54. 7.100 [rtsp @ 0x7ff7ec000b80] max delay reached. need to consume packet [rtsp @ 0x7ff7ec000b80] RTP: missed 6 packets [rtsp @ 0x7ff7ec000b80] max delay reached. need to consume packet [rtsp @ 0x7ff7ec000b80] RTP: missed 2 packets [rtsp @ 0x7ff7ec000b80] max delay reached. need to consume packet [rtsp @ 0x7ff7ec000b80] RTP: missed 6 packets [rtsp @ 0x7ff7ec000b80] decoding for stream 0 failed= 0B f=0/0 Input #0, rtsp, from 'rtsp://admin:123456@172.16.1.49:554//h264Preview_01_sub': Metadata: title : Session streamed by "preview" comment : h264Preview_01_sub Duration: N/A, start: 0.000000, bitrate: N/A Stream #0:0: Video: h264 (High), yuv420p(progressive), 640x480, 90k tbr, 90k tbn, 180k tbc Stream #0:1: Audio: aac (LC), 16000 Hz, mono, fltp [rtsp @ 0x7ff7ec000b80] max delay reached. need to consume packet [rtsp @ 0x7ff7ec000b80] RTP: missed 6 packets [rtsp @ 0x7ff7ec000b80] max delay reached. need to consume packet [rtsp @ 0x7ff7ec000b80] RTP: missed 1 packets" Does this help?

@uwedippel 4 года назад

@@Rickmakes I think now that the problem lies with the camera. rtmp: streams work. Thanks for your help.

@jostanise Год назад

Thank you!

@solubeats 4 года назад

is it work like a proxy also ? i mean support many clients using just one rtsp connection ?

@Rickmakes 4 года назад

I think you can use it in that fashion but I'm not sure it is the best tool.

@patpat7360 3 года назад

will your way be able to stream the public rtsp url that come from other place ?

@Rickmakes 3 года назад

You can change the FFmpeg input to an rtsp URL. Is that what you are asking?

@patpat7360 3 года назад

@@Rickmakes thanks :) , i meant i just try to stream the rtsp url from my friend who stays in other state , but the ffmpeg command got frozen and does not move on to generate the m3u8 file , however i successfully stream and watch with vlc player , but with fmpeg was failed , so do you have an idea to fix it ?

@patpat7360 3 года назад

🤔?

@ahmedbenmarzoug1455 4 года назад

does this work on localhost ? if not what can i do instead ?

@Rickmakes 4 года назад

Do you mean hosting it on a desktop computer and accessing the webpage on that same computer? If so, that should work. If you have trouble with localhost, try the localhost ip instead (127.0.0.1).

@nafisehsalmaniniasar9674 4 года назад

I am trying to do the same on windows; how can I find my webcam url ?

@Rickmakes 4 года назад

Do you know the model number of the camera you are using?

@Tldrx 3 года назад

is HLS free for commercial use?

@Rickmakes 3 года назад

I'm not sure of the licensing aspects of HLS.

@aakashkumaragrawal8014 3 года назад

how to get web server ip?

@Rickmakes 3 года назад

On this Linux server, you can type "ip a". You may see multiple addresses. You want to find the one that is similar to what you are using on your LAN. You can also just try each one in a browser until you find the one that works.

@powerfulLVE 4 года назад

how to encrypt the stream packets?

@Rickmakes 4 года назад

Are you wanting to encrypt the stream packets from the camera to the web server or from the web server to the web browser? If you want to encrypt from the web server to the web browser, you would have to set up SSL encryption on the web server. That is hard to describe in a comment. If it is just on your local network, you could use a self signed certificate. If you are streaming it over the internet, you can get a certificate from Let's Encrypt.

@DavidCanar 5 лет назад

Hi! Excellent video! how does it look the noaudio script?

@tinakeil2567 4 года назад

just leave out the $AUDIO_OPTS from the ffmpeg command at the end of the bash script

@Den9082 5 лет назад

Does your nginx have an RTMP module compiled and configured? Theoretically, it is not supposed to let you host a streaming server and convert your RTSP to HLS... but then again.. pure nginx with or without RTMP module cannot handle rtsp protocol at all.. I am lost.. what did I miss?

@Rickmakes 4 года назад

Nginx is just serving up the mp4 files. FFmpeg is doing the stream conversion.

@Den9082 4 года назад

@@Rickmakes sounds a way too simple but perhaps that's the way it is. It will take me literally 5 minutes to give it a try. Do you have ffserver installed, configured, and running as well?

@Rickmakes 4 года назад

@@Den9082 I don't have ffserver running. It was removed from FFmpeg around two years ago.

@Den9082 4 года назад

@@Rickmakes but you are using ffplay in your video at 02:50 so that means you have the ffserver installed.. ffplay doesn't work without ffserver

@Rickmakes 4 года назад

@@Den9082 When you install the current versions of FFmpeg, it installs binaries for ffmpeg, ffplay and ffprobe. ffplay runs without ffserver.

@ramanbrar7295 5 лет назад

how can we call ffmpeg commands from laravel controller

@Rickmakes 5 лет назад

In PHP, you can use something like the exec function. That would allow you to run ffmpeg from within PHP. You have to be careful that you escape any user input you pass to exec so it doesn't get exploited by hackers.

@jitendrasinha1343 4 года назад

is it work in window

@horizon42q 3 года назад

Very cool

@Rickmakes 3 года назад

Thank you!

@whisnuariesa.3975 4 года назад

will it work with webcam? what to do to make it work with webcam

@Rickmakes 4 года назад

You should be able to get it working with a webcam. You would need to replace the stream input with the web cam. This page tells how to connect a web cam: trac.ffmpeg.org/wiki/Capture/Webcam Let me know if you have trouble.