Streaming my pond direct to my website for minimal monies

Intro

1. I have no issue spending many hours of time on my stupid projects, as long as they are as close to free as possible. £900 is quite a long way away from free.

2. Even if I owned a Windows PC, I would not want to leave it running 24/7 for the sole (haha) purpose of broadcasting fish. Think of the polar bears! (and my electricity bill)

3. Youtube and Facebook are evil and I don't trust them with a live feed of my garden. Instead, I will broadcast it publicly from my website using a cheap Chinese webcam that has multiple reported security breaches (and no I don't see any irony in that)

4. I want to do something interesting enough to write a blog about

Choosing a camera

• WiFi connectivity - I don't want to run cables down my garden

• As low a price as possible

Getting a useable stream URL

const NodeMediaServer = require("node-media-server");

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 6000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30,
  },
  http: {
    port: 35928,
    allow_origin: "*",
    mediaroot: "./media",
  },
  relay: {
    ffmpeg: "/opt/homebrew/bin/ffmpeg",
    tasks: [
      {
        app: "live",
        mode: "static",
        edge: "rtsp://192.168.1.40/live0",
        name: "fishcam",
        rtsp_transport: "tcp"
      },
    ],
  },
  trans: {
    ffmpeg: "/opt/homebrew/bin/ffmpeg",
    tasks: [
      {
        app: "live",
        ac: "aac",
        vc: "copy",
        hls: true,
        hlsFlags: "[hls_time=2:hls_list_size=100000:hls_flags=delete_segments]",
      },
    ],
  },
};

var nms = new NodeMediaServer(config);
nms.run();

• mediaroot is the directory where the video files will be saved

• relay.tasks is a list of sources. In my case I just have one camera, with the rtsp address shown in edge. Mode is set to static as I like to have a few hours of history in addition to the live stream, but you can set it to pull which will only start the encoding on demand.

• hlsFlags can be tweaked to change the buffer time (lower reduces latency but will lead to buffering on clients with slow networks) and history. HLS streams consist of a playlist file which includes a list of small .ts files, each containing a few seconds of the stream. With the above config, the server will keep 100,000 of these files before deleting the old ones. This uses roughly 3GB of diskspace and gives end users 4.5 hours of footage history.

module.exports = {
  ...
  async rewrites() {
    return [
      ...
      {
        source: '/fishfeed/:path*',
        destination: 'http://{MY PUBLIC IP}/live/fishcam/:path*'
      },
      ...
    ]
  }
}

import { useVideojs } from 'react-videojs-hook'
import { VideoJsPlayerOptions } from 'video.js'
import 'video.js/dist/video-js.css'

const Player = (props: VideoJsPlayerOptions) => {
  const { vjsId, vjsRef, vjsClassName } = useVideojs(props)

  return (
      <div data-vjs-player>
        <video ref={vjsRef} id={vjsId} className={vjsClassName}></video>
      </div>
  )
}

export default Player

const videoJsOptions = {
      autoplay: false,
      liveui: true,
      controls: true,
      fluid: true,
      src: '/fishfeed/index.m3u8',
      type: 'application/x-mpegURL',
      bigPlayButtonCentered: true,
    }
<Player {...videoJsOptions} />

Other little things