Streaming an IP Camera to a Web Browser using FFmpeg

RickMakes January 27, 2019May 6, 2020 Leave a comment

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

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>

Leave a comment

Cancel reply