Video (Beta)

The <ch5-video> component provides a view onto a streaming video window. Components that need to reside above the video and be visible and active (such as playback control buttons, text describing the video, and annotation controls) must be defined as children elements to this component.

The <ch5-video> component addresses some shortcomings of the standard HTML <video> tag. The <video> tag provided in current HTML5 browsers will stream HTTP-based protocols such as HLS (HTTP Live Streaming) and DASH (Dynamic Adaptive Streaming over HTTP). These protocols are not employed on most security cameras, however, and the design of these protocols specify increased buffering (time delay) that would not be appropriate for use cases associated with a security camera.

The implementation of the <ch5-video> component does not attempt to render the streaming video within the HTML rendering engine. Instead, a three-tiered approach is employed:

• The top tier has an HTML component that is responsible for creating invisible rectangles for exposing content beneath the HTML rendering engine.
• The middle tier provides a surface (a handle to raw buffer for displaying graphics) that will render the streaming video.

NOTE: The top and middle tiers coordinate the location and size of the rendered video stream.

• The bottom tier is responsible for decoding the video stream and interfacing with the middle tier to display the decoded video stream.

Features

The <ch5-video> attributes provide the following features:

• Sets the ratio (width to height) of the video. Valid values are 16:9 (default), 4.3, and custom.
• Allows different video source URLs (signals) to be played via a 0-based index of list items.
• Provides video URLs, source types, and still image URLs to use when the index value changes.
• Starts and stops the video via a Boolean value via control system state.
• Sends signals to the control system on click or tap events.
• Sends video URL, snapshot URL, the current state of the video stream, error codes, resolutions, timestamps, and other video data to the control system.
• Allows support for HDMI® video input (for use with future devices)

Design Considerations

Overlay panels or modal dialog boxes appear as a pop-up at the center of the screen or at a defined location, and the layer is not transparent. Therefore, video should not be used within overlay panels or modal dialog boxes, as video will not be brought to the front of the container per the alpha blending architecture in CH5.

If a video rendered on a touch screen is coming out of its container div, ensure that the stretch attribute is set correctly:

• When stretch="true", the video will adhere to its container.
• When stretch = "false", the video will adhere to its size attribute.

Ensure that a background is placed on all views when using the <ch5-video> component. Otherwise the video's frame may be visible in a component without a background when a user moves between pages.

Standard-issue Angular uses {{ variable }} in HTML markup to allow the markup to display a value of the variable in the typescript/JavaScript. HTML5 UI also uses the double mustache {{ index }} as a counter in lists. However, Angular can be directed not to interpret the {{ }} and to leave them for interpretation by HTML UI via the ngNonBindable directive.

Refer to the sample code below from the Showcase Application as an example:

<!--When using a computed property <b>{{ idx }}</b>, Angular tries to process it as an embedded expression, adding ngNonBindable to the template will force Angular to ignore it.-->

<ch5-list id="demo-list-1" size="500" maxHeight="400px" indexId="idx">
    <template ngNonBindable>
        <div class="horizontal-list-item">
            <span>item_{{idx}}</span>
        </div>
    </template>
</ch5-list>

The <ch5-background> component does not perform optimally when used in conjunction with the Angular router component.

It is recommended that the Angular router component should not be used in projects that use the <ch5-background> component with video.

The <ch5-video> component cannot be placed inside of a scrolling list (such as a button list, subpage reference list, <ch5-list>, and so forth).