UI3 Help Overview

Please choose a section from the navigation menu above.

Support

If you need support with UI3, the best place to go for help is the Blue Iris section of the IpCamTalk forum.

This interface was developed by community member bp2008 from IpCamTalk.

Video Player

Troubleshooting Tip

If you experience choppy audio in UI3, or have trouble playing clips that were recorded in the MP4 format, try installing the K-Lite Codec Pack on your Blue Iris server. Beware of bundled adware when installing any codec pack. You can safely and conveniently get K-Lite Codecs from ninite.com.

Audio Streaming

UI3 supports one-way audio streaming from Blue Iris to UI3. Audio playback is only available when streaming H.264 video, due to the streaming methods used.

Video Codecs (Streaming Quality)

UI3 can stream video using two different compression methods: H.264 and Jpeg. H.264 is more efficient with network bandwidth, and usually achieves a higher frame rate, making it the most desirable choice in most circumstances. H.264 is the default streaming method in browsers which support it. Jpeg streaming is simpler and can be used in all browsers capable of running UI3.

H.264

UI3 can stream H.264 video if your browser supports it. You can check for H.264 compatibility by looking in the Streaming Quality dropdown list. If the only options there are "Jpeg" then your browser is not compatible. If H.264 is available, it often provides a much smoother video stream.

  • If your viewing device has insufficient CPU or network speed, H.264 video will become increasingly delayed. If this happens, UI3 will warn you and suggest that you try a different Streaming Quality option.

H.264 Streaming Profiles

Server-side profiles

Blue Iris provides three streaming profiles called simply "Streaming 0", "Streaming 1", and "Streaming 2". To find these in Blue Iris's local console, open Blue Iris Options > Web server tab > Advanced. Here, you can configure each of the encoder profiles.

The three H.264 encoder profiles are shared between Blue Iris's mobile apps, UI3, and even the legacy default.htm and jpegpull.htm pages.

Client-side profiles

Prior to June 2018, UI3 simply exposed the three server-side profiles as choices in the Streaming Quality menu, and that was that.

Thanks to improvements in Blue Iris, UI3 is now able to provide more-intuitive quality choices such as "1080p", "720p", and "480p". These quality choices each represent a fully-configurable streaming profile, which you can edit by opening the Main Menu and choosing the Streaming Profiles option.

Each of UI3's streaming profiles must be based on one of the server-side profiles. All encoding parameters are inherited from this profile unless otherwise specified in UI3. UI3's default profiles are all based on Streaming 0, but they override the Max Frame Width, Max Frame Height, and Max Bit Rate parameters. Other parameters, such as Quality, are intentionally left blank so their values will be inherited from Streaming 0.

UI3 no longer includes Streaming 0 or Streaming 1 or Streaming 2 as default quality choices. If they are desired, they can be restored easily. Simply create a new profile in UI3, give it a name, and base it on the desired server-side profile. Leave all the encoding parameters alone, and their values will be inherited from your chosen Base Server Profile.

If you want to share your profile changes with all browsers and devices, see the "Quick Start" section of UI Extensions.

Screenshot of the UI3 profile editor

H.264 Profile Configuration Tips

Audio

The audio codec setting has no effect on UI3. UI3 only knows how to decode "mu-law" and that is what Blue Iris provides no matter what you set here. It is therefore not an option in UI3's streaming profile system, but can be configured in Blue Iris's server-side profiles.

Quality vs Bit Rate

Blue Iris will encode up to your specified Quality level, automatically reducing quality if necessary to stay within the bit rate limit. For streaming, it is recommended to always use the Limit bitrate setting, otherwise the actual bit rate can get excessively high and in extreme cases this can cause decoding errors.

The default quality value (50) is already quite high, so setting it higher is almost never a good idea for remote streaming! Actually, lower values like 20 can provide enormous bandwidth savings while retaining acceptable visual quality.

Lower bit rates work better with devices that have a slow CPU or slow network connection.

Maximum keyframe interval (GOP)

Also known as the i-frame interval. For UI3, you should set this as high as it goes (300 at the time of this writing).

Maximum B-frames between P-frames

UI3 is not compatible with B-frames. Keep this set to 0, though evidence suggests this setting has no effect anyway.

Advanced > Profile

"high" profile is recommended for most users. "baseline" profile may reduce CPU requirements slightly at the cost of image quality.

Advanced > Preset

  • "ultrafast" - Lowest CPU usage and lowest image quality
  • "superfast" - A good balance between CPU usage and image quality
  • "veryfast" - Slightly better image quality at the cost of higher CPU usage and some video delay

Zero frame latency

Recommended to be enabled for best UI responsiveness. In testing, no perceptible difference was seen with this enabled or disabled.

Resize output frame width x height

This depends entirely on your personal preference for quality vs efficiency. Lower resolutions are more efficient to work with.

Jpeg Streaming

Jpeg streaming is done by requesting Jpeg-compressed snapshots as quickly as possible. It is not very efficient with network bandwidth and it can't achieve high frame rates over the internet. However, being a simpler streaming method, it tends to "just work". Jpeg streaming is capable of extremely high resolutions and excellent image quality.

Audio playback is not available while streaming Jpeg snapshots.

Context Menu

If you right click (long-press on touchscreens) on a camera, a context menu appears. The first 4 actions are specific to the current video stream, while most other options are specific to the camera you clicked on. Here, blue icons indicate actions that take effect on the Blue Iris server and require Admin privilege, while black icons indicate actions that occur in the web UI.

Screenshot of clip list context menu
Live View Context Menu Actions
Open image in new tab
Opens a snapshot of the current frame in a new tab.
Save image to disk
Downloads a high quality copy of the current frame.
Open HLS Stream
Opens a copy of the video stream using the HLS streaming protocol.
Copy image address
Copies (to the clipboard) a URL for a high-quality jpeg snapshot from the current stream. If you are viewing a clip, the URL will honor your playback position.
Camera Name
This item doesn't do anything. It serves as a separator and indicator of which camera you clicked.
Maximize
Also called "Back to Group" if you are viewing a maximized camera, this item has the same effect as just clicking the camera would have had.
Trigger Now
Admin Triggers an alert for this camera in Blue Iris.
Start/Stop Recording
Admin Toggles manual recording for this camera in Blue Iris.
Snapshot in Blue Iris
Admin Instructs Blue Iris to save a snapshot for this camera. The snapshot will appear in your clip list.
Restart Camera
Admin Instructs Blue Iris to restart this camera. Useful mostly for debugging purposes or to fix streaming problems affecting just one camera.
Stats for nerds
Opens the "Stats for nerds" panel, containing low-level information about the current video and audio streams.
Properties
Admin Opens a properties panel containing many options for this camera.

HLS Streams

Blue Iris can stream any camera or group using the HLS protocol. Though it is not core functionality, UI3 provides the ability to consume these streams.

HLS has significant video delay, but that is configurable to some extent in Blue Iris's streaming profile configuration.

HLS streaming is only available for live video, but it works with individual cameras and groups alike.

Streaming with HLS in UI3

Right-click on any video stream and choose "Open HLS Stream". A special video player called Clappr will open in a dialog window.

If you right-click the HLS player, you have the option to "Open stream in New Tab". Opening an HLS stream in a new tab actually opens a different page called "livestream.htm".

livestream.htm

One of the pages included with UI3 is "livestream.htm" which just plays an HLS stream from Blue Iris and does basically nothing else. The page takes a single URL parameter "cam" with the short name of the camera or group you wish to view. Example: livestream.htm?cam=index

If you omit the "cam" parameter, livestream.htm will attempt to load "index" (a.k.a. "all cameras" ).

Stats for Nerds

Inspired by YouTube's feature with the same name, UI3 has a "Stats for nerds" panel which shows an assortment of details about the video player. This information can be useful for troubleshooting, but otherwise it is just fun to look at.

To access this panel, right-click on UI3's video player and choose the "Stats for nerds" option.

Stats for nerds

"Stats for nerds" item descriptions
Many items in this panel only exist when streaming H.264. Other items may only exist while streaming Jpeg frames.

Viewport
The size of the screen area available for video playback. When using DPI scaling or browser zoom, the zoom ratio is also shown here.
Stream Resolution
The resolution of the current video stream. Jpeg frames are dynamically adjusted to the ideal resolution to fit the viewport.
Native Resolution
The resolution of the current video stream. Jpeg frames are dynamically adjusted to the ideal resolution to fit the viewport.
Seek Position
Shows either "LIVE" or the current playback position as a percentage of the clip.
Frame Offset
The timestamp of the last-rendered frame relative to the start of the streaming connection.
Frame Time
H.264 The approximate date and time when the last-rendered frame was originally captured.
Codecs
The current video and audio codecs.
Jpeg Loading Time
JPEG The amount of time it took to load the last jpeg frame.
Video Bit Rate
H.264 Measured bit rate of the video stream.
Audio Bit Rate
H.264 Measured bit rate of the audio stream.
Audio Buffer
H.264 The amount of audio (in milliseconds) which has been received but not yet played. If this reaches 0, it means no audio is playing.
Frame Size
H.264 The size in bytes of the last video frame.
Inter-Frame Time
H.264 The time in milliseconds between frame renders. If this graph jumps around a lot, it is evidence that the video stream is not smooth. Many cameras don't capture frames at a constant interval when they aren't streaming at their maximum frame rate, so it isn't uncommon to see a pattern like 50ms, 50ms, 100ms, 50ms, 50ms, 100ms.
Frame Timing Error
H.264 This is the difference between the time a frame was supposed to be rendered and the time it was actually rendered. The closer this is to zero, the better.
Network Delay
H.264 The estimated video delay caused by insufficient network speed. Values of a few hundred milliseconds are completely normal and nothing to worry about.
Player Delay
H.264 The estimated video delay caused by insufficient CPU speed. Values of a few hundred milliseconds are completely normal and nothing to worry about. A small amount of player delay is often intentional in order to keep the Frame Timing Error as close to zero as possible.
Delayed Frames
H.264 The number of frames that have been received but not yet decoded and rendered. This directly correlates with Player Delay and low values (0-2) are completely normal. A small number of delayed frames is often intentional in order to keep the Frame Timing Error as close to zero as possible.

URL Parameters

Several URL parameters can change UI3's startup behavior. Each parameter has an alternative short name which can be used to create shorter URLs.

Parameter Effect Example
maximize=1
m=
UI3 loads with the left and top control bars hidden. This state persists between UI loads. ui3.htm?maximize=1
maximize=0
m=
UI3 loads with the left and top control bars shown. ui3.htm?maximize=0
tab=live
t=L
The "Live" tab is loaded. ui3.htm?tab=live
tab=clips
t=C
The "Clips" tab is loaded. ui3.htm?tab=clips
clipview=X
v=
The clip list view specified by X is selected upon UI startup. Possible values of X: all, alerts, new, stored, aux1, aux2, aux3, aux4, aux5, aux6, aux7, flagged, new.clipboard, cancelled, confirmed, zonea, zoneb, zonec, zoned, zonee, zonef, zoneg, zoneh, dio, onvif, audio, external, memos, archive, export ui3.htm?tab=clips&clipview=alerts
group=groupname
g=
The group with the specified name is loaded. ui3.htm?group=index
cam=shortName
c=
The camera with the specified "Short name" is loaded. ui3.htm?cam=porch
rec=ID[-MS]
r=

Opens a specific clip at UI3 startup. The value should be the numeric portion of a clip's database ID. For example, a clip might have database ID @21148130039, so a "rec=" argument to open this clip would be rec=21148130039. To open a clip at a specific time offset, append a hyphen and a number of milliseconds. For example, to open the clip at its 10-second mark, use rec=21148130039-10000.

This parameter also loads the Clips tab at UI3 startup.

To make it easy to share a link to a clip, this parameter is automatically entered into the address bar during clip playback.

ui3.htm?rec=21148130039-10000
streamingprofile=name
p=

Selects a specific streaming profile at UI3 startup. The value name must exactly match one of your streaming profiles. Streaming profile names are case-sensitive and should be URL-encoded when used in a URL parameter.

ProfileName Parameter

ui3.htm?streamingprofile=144p
Multiple parameters can be combined
Separate multiple parameters with "&", like this: ui3.htm?tab=clips&clipview=alerts&cam=porch&maximize=1

UI Extensions

Experienced web developers can extend UI3 with custom JavaScript and CSS.

Of course if you take the most obvious route and modify ui3.js and ui3.css files directly, you would have to re-apply your changes after every update! To solve this problem, UI3 attemps to load two files which do not exist in releases: ui3-local-overrides.js and ui3-local-overrides.css. You can create either or both of these files and place them in the "ui3" subdirectory of your Blue Iris installation's web root directory ("www"). These two files will be loaded after all the other script and style files, allowing you to conveniently override virtually any default functionality you wish, if you have the programming skills to do so.

Examples

For examples, see https://github.com/bp2008/ui3/wiki/Local-Overrides-Scripts-and-Styles

Quick Start - Globally Override Default Settings

At the bottom of the UI Settings panel is an item called 'Create Script: "ui3-local-overrides.js"'. This item is only visible if you have logged in to UI3 as a Blue Iris administrator.

When you click the "Download" link, your browser should download a copy of your current settings in the form of a ui3-local-overrides.js file. If you move this file into your "ui3" subdirectory, then all users will receive your current settings by default.

If you want to customize the default values in this auto-generated file, you should first understand some things:

  • If you manually edit a setting's value in the ui3-local-overrides.js script, you should also increment the Generation number. Each user (each web browser, really) will only adopt your new default value if the Generation associated with it is a higher number than the generation they had previously.

    If you make the change in your own web browser and re-download the ui3-local-overrides.js file, this will automatically increment all generation numbers. Then you just need to replace your old overrides file with the new one.
  • If you want your default value to ALWAYS be reloaded when UI3 is loaded, set "Always Reload" to true. Then, the Generation number does not matter, and your specified value will take effect every time UI3 is loaded regardless of how each user has configured it.
  • To prevent a setting from appearing in the UI Settings panel, change "true" to "false" for the "Options Window" parameter. Uncategorized settings don't appear in the options window anyway, and some items from the UI Settings panel aren't settings in the first place, but buttons (e.g. to forget saved credentials).

Camera Layout

UI3 is unable to control your camera layout. To change the camera layout, you must drag cameras around in Blue Iris's local console.

Optimizing Group Frames

The default group frame size may have a lot of empty black area, or the resolution may be lower than you would like. You can change the resolution of each group in Blue Iris's local console.

Screenshot of Group Properties

You may type any resolution you want into the frame size dropdown box. For best results, use frame dimensions that are multiples of 16. For convenience, here is a list of suitable multiples of 16 that you can copy from:

Multiples of 16
16, 32, 48, 64, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 272, 288, 304, 320, 336, 352, 368, 384, 400, 416, 432, 448, 464, 480, 496, 512, 528, 544, 560, 576, 592, 608, 624, 640, 656, 672, 688, 704, 720, 736, 752, 768, 784, 800, 816, 832, 848, 864, 880, 896, 912, 928, 944, 960, 976, 992, 1008, 1024, 1040, 1056, 1072, 1088, 1104, 1120, 1136, 1152, 1168, 1184, 1200, 1216, 1232, 1248, 1264, 1280, 1296, 1312, 1328, 1344, 1360, 1376, 1392, 1408, 1424, 1440, 1456, 1472, 1488, 1504, 1520, 1536, 1552, 1568, 1584, 1600, 1616, 1632, 1648, 1664, 1680, 1696, 1712, 1728, 1744, 1760, 1776, 1792, 1808, 1824, 1840, 1856, 1872, 1888, 1904, 1920, 1936, 1952, 1968, 1984, 2000, 2016, 2032, 2048, 2064, 2080, 2096, 2112, 2128, 2144, 2160, 2176, 2192, 2208, 2224, 2240, 2256, 2272, 2288, 2304, 2320, 2336, 2352, 2368, 2384, 2400, 2416, 2432, 2448, 2464, 2480, 2496, 2512, 2528, 2544, 2560, 2576, 2592, 2608, 2624, 2640, 2656, 2672, 2688, 2704, 2720, 2736, 2752, 2768, 2784, 2800, 2816, 2832, 2848, 2864, 2880, 2896, 2912, 2928, 2944, 2960, 2976, 2992, 3008, 3024, 3040, 3056, 3072, 3088, 3104, 3120, 3136, 3152, 3168, 3184, 3200, 3216, 3232, 3248, 3264, 3280, 3296, 3312, 3328, 3344, 3360, 3376, 3392, 3408, 3424, 3440, 3456, 3472, 3488, 3504, 3520, 3536, 3552, 3568, 3584, 3600, 3616, 3632, 3648, 3664, 3680, 3696, 3712, 3728, 3744, 3760, 3776, 3792, 3808, 3824, 3840, 3856, 3872, 3888, 3904, 3920, 3936, 3952, 3968, 3984, 4000

Group Optimization Example

Before Optimization

Example of poor layout

After Optimization

Example of better layout

Recordings

To view recorded video, you must use "Clips" tab at the top of the UI.

Alerts

The "Alerts" tab is gone since UI3-120. "Alerts" is now one of many dropdown list items on the "Clips" tab. A "Clip" represents a single video file on disk. An "Alert" is a bookmark to a specific location in a clip. A single clip may have multiple associated alerts, or no associated alerts.

Filters

You can filter the Clips list by camera, group, date, and database view ("All clips", "Alerts", "New", "Sentry confirmed", etc.).

To filter by camera, simply maximize that camera by clicking on it in the main video area. To filter by other criteria, use the filter controls above the Clip list.

Screenshot of recording filters

Expanding the Filters

If you don't see the filter controls, that means you have collapsed them by clicking on the "Filter Clips by:" text. Click the "Filter Clips by:" text again to expand the filter controls section.

Context Menu

If you right click (long-press on touchscreens) on an alert or clip, a context menu appears.

Screenshot of clip list context menu
Clip list context menu actions

Admin privilege is required for some actions.

Flag Admin
Flags the specified item(s) to make them easier to find later.
Protect Admin
Protects the specified item(s) so they will not be deleted by Blue Iris's space-reclaiming algorithm.
Download
Downloads the specified clip(s) file exactly as it exists on the server's disk. Only clips can be downloaded. If you attempt to download an alert, the browser will download the clip which contains the alert. The format of the downloaded clip is whatever format you have configured for the camera in Blue Iris.
Delete Admin
Deletes the specified item(s).
Enlarge/Shrink Thumbnails
Toggles between the standard layout and one that dedicates much more space to thumbnail images.
Enable/Disable Mouseover Thumbs
Enables or disables a much larger thumbnail that appears when you mouse over each clip.
Convert/export
Opens the interface for exporting the selected items as MP4, AVI, or WMV.
Properties
Opens a panel containing properties of the selected clip or alert.

Multi-Select

If your device has a physical keyboard, you can hold SHIFT and/or CTRL keys while clicking to select multiple items for bulk operations.

Tips

  • Headings in the left toolbar can be clicked to collapse and expand their content.
  • The camera icon in the upper right corner is a quick way to download a snapshot of the current video.
  • Several UI elements have a custom context menu that is accessible by right clicking (long-press on touchscreens).
    These elements include:
    • Cameras
    • Alerts and Clips
    • The date filter on Clips tab
    • PTZ Preset buttons
    • Profile and Schedule controls
    • The Stoplight (in the status area at the bottom)
    • The heading that overlays the top of the video player during clip playback
    • The HLS Player
  • The "DISK" status bar in the Status area can be clicked as a shortcut to open the Disk Usage panel.

Camera Properties

Admin user permission is required to access this functionality.

The Camera Properties panel is accessible from the context menu that appears when you right click on a camera (long-press on touchscreens). This panel contains some information about the camera and provides a set of common administrative controls, such as the ability to reconfigure the motion sensor. You can also disable a camera from here. If you disable a camera, you can re-enable it from the Full Camera List in the Main Menu.

Exporting Video

Clips or sections of clips may be exported into MP4, AVI, or WMV formats and then downloaded through UI3.

Exported items are kept on your Blue Iris server in the "New" folder as configured in Blue Iris settings, and the files will automatically be managed according to the rules assigned to that folder. UI3 does not currently offer the ability to delete exported items manually, but you can do this from the Covert/Export queue in Blue Iris's local console.

Begin Exporting

To begin exporting clips, open the Convert/Export interface using one of these methods:

  • Right-click a clip or alert, then choose Convert/export
  • Select multiple clips or alerts, then right-click one of them and choose Convert/export
  • Right-click the video player while a recording is open, then choose Convert/export
  • Click the Export button icon within the playback controls while a recording is open.

Configuring an Export Operation

When you open the Convert/Export interface, you will be shown a panel with options related to the export operation.

MP4 output format is recommended for best compatibility with 3rd-party applications.

Encoder profiles used by the export feature cannot be edited in UI3. This must be done in the local console of Blue Iris.

To export a timelapse, disable the audio track and enable re-encoding video to H.264.

If you are exporting a single clip, you may choose a specific time range to export. Drag the green and red knobs to your desired start and stop points:
time range screenshot

Convert/export settings

Export Status

When you push "Begin Export", the export jobs are queued and then a small dialog appears to give you status updates.

From here, you can:

  • Open the Convert/Export List (also found in the Main Menu)
  • Enable automatic download of finished exports
  • Download finished exports manually

Export status dialog

The Convert/Export List

This dialog is found in the Main Menu, and shows active and recently-finished export jobs. You may download finished items by clicking on them.

Convert/Export List

Template