Advanced - Web Interface (UI3) & Webcasting

Articles based on common support questions.
Post Reply
varghesesa
Posts: 28
Joined: Thu Jul 11, 2019 9:52 pm

Advanced - Web Interface (UI3) & Webcasting

Post by varghesesa » Wed Feb 24, 2021 12:11 am

Introduction
Besides being a Video Management System, Blue Iris is also a Streaming Server. This allows users to share their camera feeds externally. The best way to understand how to leverage BI's streaming services is via the following use cases.

BI webcasting.png
BI webcasting.png (63.81 KiB) Viewed 33 times


The most common endpoint for BI webcasting is the web interface (UI3). The Blue Iris Web Interface webinar walks through the user interface and all its features/functionality.


Webcasting (video streaming) Pipeline

Standard streaming pipeline: IP Cameras -> Media Server -> Endpoint
  • IP Cameras
    The process starts with a video capture device otherwise known as a IP camera. The camera is dedicated hardware that usually captures 15-30 frames per second.
    IP Cameras are high performance computers which is why they are so expensive. Compression algorithms are responsible for shrinking each frame to manageable chunks which can be transported over the internet. H.264 and H.265 are standard compression algorithms supported by Blue Iris.
    Packaging involves bundling all the compressed frames into manageable sizes that can be transported over the network. Think of packaging as grouping 1-3s of video frames into one chunk of data that is transported across the network. HLS, MPEG DASH, RTMP and RTSP are all common protocols for video streaming.
  • Network: Responsible for moving the data from cameras to Blue Iris.
  • Blue Iris. Media server + Video Management System
    Blue Iris is also a media server. Media servers can take streams in one format, for example RTSP from a camera and convert them to another format, for example, RTMP so that users can, for example, share their camera streams elsewhere such as YouTube. Media servers are responsible for taking video/audio inputs and streaming the content to various endpoints.
  • Network
  • And the final destination is the endpoint playing the video, for example a browser on a laptop, a mobile device, a TV, a gaming device etc.
In terms of the video pipeline as defined in the BI Streaming Overview article:
Source -> Decode -> Encode -> Endpoint
  • IP Cameras = Source
  • Media server = Decode + Encode
  • Endpoint = Endpoint

Blue Iris Web server
Every time a user accesses BI via a remote endpoint (mobile app, web browser), a connection is made between the BI web server and the endpoint.
BI web server.png
BI web server.png (38.99 KiB) Viewed 1115 times

Web server streams
BI allows for three types of streams from the web server. Global settings -> Web server tab -> Advanced.

webserver streams.PNG
webserver streams.PNG (23.92 KiB) Viewed 1115 times

Web server encoding settings

Global settings -> Web server tab -> Advanced -> Configure button

webserver encoding.PNG
webserver encoding.PNG (167.89 KiB) Viewed 1115 times

H.264 Encoding Settings
  • H.264 video encoding
  • Quality: Value from 0 - 100. Lower the value, lower the quality. The marginal difference in quality after a certain point is minimal. For example, 100 does not produce an image that is twice the quality of a 50 setting. In most cases, quality = 50 is plenty good.
  • Rate control: If selected, you are choosing a Constant Bit Rate (CBR). Choose if you have bandwidth concerns.
    If unchecked, you are using a Variable Bit Rate (VBR).
  • Frame type layout
    Maximum keyframe interval (GOP): 300
    Maximum B-frames between P-frames: 0 (only applies to Main profiles or above)
  • Profiles: H.264 provides features that are encapsulated in profiles.
    Baseline restricts the encoder to certain basic features only. Baseline can easily be played back on most devices. Main and High add features on top of Baseline. Baseline profiles were widely used for mobile devices. However, now more and more mobile devices support Main or High profiles.
    Main: B frames (above) are only allowed in the Main profile or above. They can be used to save on bandwidth but harder to decode. Widely used for web streaming.
    High profile is often used in broadcasting. Used on high definition TVs. Also adopted by the Blu-ray disc storage format.
  • Presets: Presets are a collection of options that will provide a certain encoding speed to compression ratio. A slower preset will provide better compression. This means that, for example, if you target a certain file size or constant bit rate, you will achieve better quality with a slower preset. Similarly, for constant quality encoding, you will simply save bitrate by choosing a slower preset.
Audio encoding
  • Audio: AAC or MP3
  • Bitrate (kbps): 192



Case Studies

YouTube - Streaming

Use case: Pushing Blue Iris live camera stream(s) to YouTube's media server via RTMP.

YouTube architecture.png
YouTube architecture.png (133.13 KiB) Viewed 1110 times

YouTube provides URLs to connect to 3rd party software such as Blue Iris.
youtube setup.png
youtube setup.png (69.32 KiB) Viewed 1110 times

BI setup is just as simple. Camera settings -> Webcast tab.
youtube BI settings.PNG
youtube BI settings.PNG (168.53 KiB) Viewed 1110 times

You do need to supply the correct stream settings that will work with YouTube.
  • Audio: Set to AAC. 128 kbps
  • Max bitrate (kbps): 2048. YouTube prefers 9500 kbps so go higher if network can support bandwidth.
  • Maximum keyframe interval (GOP): 60
  • Profile: main
  • Preset: superfast
  • Zero frame latency: Unchecked
  • Resize output frame width x height: Checked. 1280 x 720. YouTube prefers 2560 x 1440 (double 1280 x 720) so go higher if network can support bandwidth and camera has the resolution. No point increasing the resolution if your camera is 1 MP (1280 x 720).
YouTube will provide Stream status feedback based off which, you can adjust BI settings further.
youtube stream feedback.png
youtube stream feedback.png (57.67 KiB) Viewed 766 times


Displaying UI3 on large displays, remote monitors or TVs Coming soon!
Use case: Accessing UI3 on a device using a wireless connection and a browser.
Firestick
Chromecast
Apple TV




Display BI streams on your website Coming soon!
Scenarios: Zoos live streaming animal footage via their website




Embedded Media Players Coming soon!
Scenario: Play live streams on setup boxes such as XBox.




Amazon Echo Show + Monocle Coming soon!





Gotchas

Gotcha 1: UI3
ui3-gotcha_optimized.png
ui3-gotcha_optimized.png (156.5 KiB) Viewed 1107 times

If you get the orange clock warning, either the fps is low for the stream or the endpoint is overloaded because the resolution is too high. Readjust stream using Gear icon.
ui3-streaming-settings_optimized.png
ui3-streaming-settings_optimized.png (62.35 KiB) Viewed 1110 times

FYI, the UI3 gear settings are just presets values in the web server encoder settings
ui3-vs-settings_optimized.png
ui3-vs-settings_optimized.png (90 KiB) Viewed 1101 times



Gotcha 2: Mobile apps
Scenario 1
You have a large screen tablet in your kitchen for viewing your cameras. This connection is on your local area network and your router has plenty of bandwidth. You want high resolution smooth frames.
  • Use variable bit rate instead of constant bit rate. Unselect Rate control. Crank up Quality value. Gotcha: If network bandwidth too high, adjust.
  • Profile = high Uses more bells and whistles such as b-frames to optimize bandwidth while delivering quality. Gotcha: If endpoint cannot decode, adjust.
  • Preset = veryfast. Set to lowest to maximize quality. Gotcha: If CPU utilization is high adjust.
  • Uncheck Resize output frame. Send the full camera resolution to the device. Gotcha: If network bandwidth spikes, adjust. If the player at the endpoint starts to choke, adjust
  • b-frames are great for increasing quality and optimizing bandwidth. Gotcha: However, if you have a PTZ camera, b-frames can cause delays displaying the new view after a camera position changes.
LAN settings.PNG
LAN settings.PNG (182.59 KiB) Viewed 1101 times

Choose "LAN" profile (profile 0) for your tablet.
Home tab -> Gear icon -> LAN. Profile 0 is the top choice, profile 1 is the second choice and profile 2 is the third choice.

ios settings.png
ios settings.png (142.84 KiB) Viewed 1101 times
Post Reply