Streaming an IP Camera to a Web Browser using FFmpeg
HTML-код
- Опубликовано: 14 дек 2024
- 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
![SahBabii - Viking [Official Music Video]](http://i.ytimg.com/vi/D37cL92JX0I/mqdefault.jpg)
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");
});
});
}
@UCu7asHugFk0ASImi1Pobh0A hls_wrap is deprecated. www.ffmpeg.org/ffmpeg-formats.html#Options-5
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!!
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"
hls_wrap is deprecated. www.ffmpeg.org/ffmpeg-formats.html#Options-5
@@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?
@@tinakeil2567 OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1 -hls_flags delete_segments"
It would be cool to know how to configure nginx and run it all in Docker
hi sir please help, in your video there is only 1 cctv, what if more than 1? to convert ffmpeg in bash?
though it's late but I can help you with that. let me know if you need the script.
You just earned 1 subscriber here buddy.
Thanks! I appreciate it.
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?
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.
@@Rickmakes Thanks!
Thank you for making this video.
Is there a way to stream over webRTC via the udp protocol using ffmpeg to ensure low latency ?
I don't have experience with webRTC but it is my understanding that ffmpeg doesn't directly support it.
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
Thanks a lot for the video. You saved my day!
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
I actually have a video demonstrating this with four videos on a raspberry pi: ruclips.net/video/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.
@@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.
@@Rickmakes How did you setup the RAM disk? This is excatly what i am searching for.
For those who are also looking for that solution, checkout linuxhint.com/ramdisk_ubuntu_1804/
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
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!
same here
+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.
What is the make and model of the camera?
@@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.
THANK YOU🙏
Any updates to this? Any more complete source code online anywhere? For managing starting stopping the streams etc.? Please contact me
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 ?
If you were to open this web server to public, does the camera also need to be opened up to the public?
No. The camera is kept on the backend.
Great video. You just saved my by implementing something horrifying with this simple approach
will your way be able to stream the public rtsp url that come from other place ?
You can change the FFmpeg input to an rtsp URL. Is that what you are asking?
@@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 ?
🤔?
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
Sorry. I don't have experience with node js.
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 ?
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?
Are you getting any sort of error message in the terminal where you are running ffplay?
@@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?
@@Rickmakes I think now that the problem lies with the camera. rtmp: streams work.
Thanks for your help.
nice tutorial, how to run multiple camera?
is it work like a proxy also ? i mean support many clients using just one rtsp connection ?
I think you can use it in that fashion but I'm not sure it is the best tool.
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?
Nginx is just serving up the mp4 files. FFmpeg is doing the stream conversion.
@@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?
@@Den9082 I don't have ffserver running. It was removed from FFmpeg around two years ago.
@@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
@@Den9082 When you install the current versions of FFmpeg, it installs binaries for ffmpeg, ffplay and ffprobe. ffplay runs without ffserver.
how to encrypt the stream packets?
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.
Thank you!
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?
@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
I am trying to do the same on windows; how can I find my webcam url ?
Do you know the model number of the camera you are using?
is HLS free for commercial use?
I'm not sure of the licensing aspects of HLS.
Hi! Excellent video! how does it look the noaudio script?
just leave out the $AUDIO_OPTS from the ffmpeg command at the end of the bash script
This is pre-recorded now live stream correct?
Are you referring to the video of concrete with snow on it? That was captured live from my security camera.
@@Rickmakes Because i saw time line at your video, thought that a limit time range video (pre-recorded)
does this work on localhost ? if not what can i do instead ?
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).
is it work in window
will it work with webcam? what to do to make it work with webcam
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.
I am very interested in doing this with a usb webcam :) I have been able with mjpeg-streamer, but I want to transcode it to h264
how can we call ffmpeg commands from laravel controller
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.
why unknow encoder 'libfaac' ????
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.
@@Rickmakes okay thanks... and how to access multiple channel ?
Very cool
Thank you!
how to get web server ip?
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.
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
Do you have a Bash shell installed on Windows (like WSL)?
@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
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
genius
Thank you!
I am born stupid. I truly hate things I don't understand
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.
@@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...