About Alexa Smart Screen Web Components
Alexa Smart Screen Web Components is a Node.js library for smart screen device makers who build web apps that interact with the AVS Device SDK.
The Alexa Smart Screen Web Components library implements a variety of Alexa features that make it convenient for you to create and extend web apps for AVS Device SDK-based smart screen devices. It provides two yarn workspaces that are distributed through a lerna-based monorepo:
packages: contains common stable features and components with documented surface interfaces used across all other packages in the library.
samples: contains sample implementations of features in the library that serve as a reference for how you might leverage them.Note: The samples in the
samplesworkspace are for demonstration only and aren't intended for production use.
For more details about the distinctions between the
samples workspaces, see Classification of production and reference components.
The Alexa Smart Screen Web Components library supports the following Alexa Smart Screen capabilities:
- Alexa Presentation Language (APL)-based rendering of Alexa visual responses that use the APL Client Library.
- AVS display cards rendering, including Audio Playback user interface (UI) supported through
Alexa.Camera.LiveViewControllerinterface for smart home camera usage.Note: To request access for the
Alexa.Camera.LiveViewControllerinterface, contact your Amazon Business representative.
- Alexa captions for speech responses.
- Do Not Disturb (DND) mode.
Inter-process communication (IPC) components
All web apps that interact with the AVS Device SDK must leverage an IPC protocol. To simplify the implementation, the Alexa Smart Screen Web Components library provides the following packages:
- Common interfaces for defining an IPC client.
- A generalized router for handling all routing of inbound and outbound messages over your chosen IPC protocol.
- A standard implementation of a Web Socket Client for communication over a WebSocket server.
- An alternative implementation of a Binder Client that binds connection to a function of the browser window.
- A complete collection of event and directive handlers for all IPC Client Framework APIs.
Sample Web Application
The Alexa Smart Screen Web Components library provides a robust, configurable Sample Web Application to showcase the use of all features and components in the library.
The Sample Web Application is for direct use with the AVS Device SDK IPC Server Sample Application, as the IPC client.
By organizing the components into multiple packages, the Alexa Smart Screen Web Components library provides you with the freedom to choose the required components and integrate them into your web app. When you use a lerna-based monorepo, all the components consistently follow the same build, test, and release practices.
Classification of production and reference components
Production components (
You should use the production components as they are presented. You can pass custom objects to production components by using pre-defined interfaces. The following table shows the packages for the production components.
||Provides IPC components, media elements, and wrappers for integrating the APL Client Library renderer into your project for the presentation of APL-based Alexa visual content. For more details, see Alexa Smart Screen APL Module.|
||Application-level IPC handlers, events, and implementations related to settings, IPC version management, and session setup. For more details, see Alexa Smart Screen App Utils.|
||An alternative implementation of
||A collection of interfaces and classes common to smart screen components. This component includes ActivityTracker, FocusManager, Logger, Observers, and other functionalities. For more details, see Alexa Smart Screen Common.|
||Provides components for rendering the output of
||Directs the message to its appropriate handler based on the registered namespace and version. For more details, see Alexa Smart Screen Router.|
||Exposes directives and events necessary for rendering payloads of the
||A production web socket client library to communicate to and from the SDK. For more details, see Alexa Smart Screen Web Socket.|
||Exposes directives and events to allow the IPC client to report and control window-based presentations. For more details, see Alexa Smart Screen Window Manager.|
Reference components (
Reference components are components that you can modify based on your own requirements. You might require to change these basic implementations to meet the AVS guidelines and certification. Reference components align with Sample App implementation. The following table shows the packages for the reference components.
||Configurable sample implementation of a web app that uses smart screen web components to demonstrate rendering of AVS Device SDK visual capabilities. It establishes sessions with the IPC Server Sample App. For more details, see Alexa Smart Screen Sample Web Application.|
||Sample text-based Alexa attention system implementation. The attention system includes states, such as listening, thinking, and speaking. For more details, see Attention system states and Alexa Smart Screen Sample Attention System.|
||Provides a component for rendering
||Display card implementation that binds