Embedding feeds from Agent in your website

Embedding with RTMP

You can live stream to your website with Agent via YouTube or Twitch or any other RTMP provider.

To set this up with YouTube follow the steps below:

  1. Sign into your youtube account and go to https://www.youtube.com/live_dashboard
  2. Create a new Live Stream and make a note of the Server URL and your Stream name/key
  3. Back in Agent, click on your Server and then the settings tab and click the Settings button
  4. Click on the tab "Streaming". Enter the URL and the Stream Key from step 2 here. You may want to adjust the maximum duration. The default is set to 900 seconds (15 minutes)
  5. Click OK.
  6. Back in YouTube, right click on the live player on the website and click "Copy embed code". Your clipboard will now contain the HTML you need to paste into your webpage.

Once these steps are completed you can start live streaming to your website:

Streaming Settings

On the Streaming tab on Server Settings you can control the resolution using the Size dropdown and the bitrate using the Quality slider. If your stream is buffering frequently then try reducing the size or the quality or both to get smooth playback.

Manually Streaming

Open up the live Agent viewer and add whatever cameras you like in whatever mode you like (movement/ alerts/ grid etc). Click the "RTMP Streaming" option at the bottom right of the live viewer.

The stream to YouTube should start. Give it a few seconds to buffer.

Scheduling Streaming

Edit a device and check the "Scheduling" switch on the first tab. Click to edit the Scheduler underneath. Add a schedule command "RTMP Streaming Start" and set the times and days. Then add an "RTMP Streaming Stop" command.

Scheduling Multi Streaming

To setup a schedule to stream multiple cameras, create a new camera using the Dummy video source and use PiP (Picture in Picture) to layout whatever other cameras you like and then use scheduling to stream this camera instead.

Embedding with FTP

You can also FTP frames to your webserver and then use Javascript to play them back as a video on your web page

Add an FTP server in Server Settings and set the Rename option to On. Edit a camera and select the FTP tab and set a fixed filename so Agent will continually overwrite the frame. Make sure the mode is set to Interval. Set the interval to 0.1 for 10 fps.

To display the feed on your website just copy and paste the following HTML code into your webpage (you'll need to modify the _targetimage variable to point to the image you are uploading). This will only work if you have specified a static path to your uploaded image (ie it continually over-writes the same file).