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.

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

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.
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.

Parameter Effect Example
maximize=1 UI3 loads with the left and top control bars hidden. This state persists between UI loads. ui3.htm?maximize=1
maximize=0 UI3 loads with the left and top control bars shown. ui3.htm?maximize=0
tab=live The "Live" tab is loaded. ui3.htm?tab=live
tab=alerts The "Alerts" tab is loaded. ui3.htm?tab=alerts
tab=clips The "Clips" tab is loaded. ui3.htm?tab=clips
group=groupname The group with the specified name is loaded. ui3.htm?group=index
cam=shortName The camera with the specified "Short name" is loaded. ui3.htm?cam=porch
Multiple parameters can be combined
Separate multiple parameters with "&", like this: ui3.htm?tab=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

For best results, you should 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 either the "Alerts" or "Clips" tabs at the top of the UI.

Alerts vs Clips

The "Alerts" and "Clips" tabs look similar, but are different in subtle ways. Clips may represent many triggered events or a continuous recording. Alerts, however, are treated as bookmarks into a clip.

Filters

You can filter the Alerts/Clips list by camera, group, date, and flag state.

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 Alert/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). 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.
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 Alerts and Clips tabs
    • 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.

Template