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.
Amcrest IP Cameras: https://amzn.to/2FPzuXv (Amazon affiliate)
hls.js site:https://github.com/video-dev/hls.js/blob/master/docs/API.md
shell.sh
#!/bin/bash
VIDSOURCE="rtsp://username:password@ip-address-of-camera:554/cam/realmonitor?channel=1&subtype=0"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS mystream.m3u8
#!/bin/bash
VIDSOURCE="rtsp://username:password@ip-address-of-camera:554/cam/realmonitor?channel=1&subtype=0"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS mystream.m3u8
#!/bin/bash VIDSOURCE="rtsp://username:password@ip-address-of-camera:554/cam/realmonitor?channel=1&subtype=0" AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2" VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000" OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1" ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS mystream.m3u8
index.html
<!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>
<!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>
<!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>
