On this video I stream an IP Digital camera to an internet site browser working with ffmpeg. The web video is served utilizing nginx web browser arrange on Ubuntu linux.
Video notes: https://www.rickmakes.com/streaming-an-ip-digicam-to-a-website-browser-working with-ffmpeg/
Amcrest IP Cameras: https://amzn.to/2FPzuXv (Amazon affiliate)
hls.js web-site:
https://github.com/movie-dev/hls.js/blob/master/docs/API.md
Keep in mind to adjust to me!
https://twitter.com/rickmakes
https://www.instagram.com/rickmakes/
Go to my Amazon Storefront!
https://www.amazon.com/shop/rickmakes
Help my channel!
https://www.rickmakes.com/paypal_donation
#ffmpeg
source
<!DOCTYPE html>
<html><head><title>Live Cam</title></head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></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>
how to encrypt the stream packets?
does this work on localhost ? if not what can i do instead ?
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 – 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.
Is there a way to stream over webRTC via the udp protocol using ffmpeg to ensure low latency ?
genius
How can I stream directly to Youtube Live, instead of setting up the webserver
Thanks for the video. With this solution you have always a delay. I think for a security cam this is unaccaptable. You should go with mjpeg stream or better jpeg/png over websockets instead. The framerate will be much less but it's realtime. The future of life streaming is webrtc.
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
is it work like a proxy also ? i mean support many clients using just one rtsp connection ?
I am trying to do the same on windows; how can I find my webcam url ?
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
will it work with webcam? what to do to make it work with webcam
is it work in window
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 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
Hi! Excellent video! how does it look the noaudio script?
Hi Rick. Can you advise on how to do this with ffmpeg installed on cpanel ? web hosting. can you please maybe email me at ebrahimbadkoubi@gmail.com
why unknow encoder 'libfaac' ????
You just earned 1 subscriber here buddy.
how can we call ffmpeg commands from laravel controller
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"