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 thesamples
workspace are for demonstration only and aren't intended for production use.
For more details about the distinctions between the packages
and samples
workspaces, see Classification of production and reference components.
Alexa capabilities
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
TemplateRuntime.RenderPlayerInfo
. -
Alexa.Camera.LiveViewController
interface for smart home camera usage.Note: To request access for theAlexa.Camera.LiveViewController
interface, 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 (packages
)
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.
Packages | Description |
---|---|
alexa-smart-screen-apl |
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. |
alexa-smart-screen-app-utils |
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. |
alexa-smart-screen-binder-client |
An alternative implementation of IClient from the more commonly used WebSocketClient for developers who require a client implementation that binds connections to a function call of the browser window. For more details, see Alexa Smart Screen Binder Client. |
alexa-smart-screen-common |
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. |
alexa-smart-screen-live-view-camera |
Provides components for rendering the output of Alexa.Camera.LiveViewController payloads, including RTC camera feeds and an APL based GUI layer for camera control and interaction. For more details, see Alexa Smart Screen Live View Camera. |
alexa-smart-screen-router |
Directs the message to its appropriate handler based on the registered namespace and version. For more details, see Alexa Smart Screen Router. |
alexa-smart-screen-template-runtime |
Exposes directives and events necessary for rendering payloads of the TemplateRuntime AVS API by the IPC client. For more details, see Alexa Smart Screen Template Runtime. |
alexa-smart-screen-web-socket |
A production web socket client library to communicate to and from the SDK. For more details, see Alexa Smart Screen Web Socket. |
alexa-smart-screen-window-manager |
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 (samples
)
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.
Packages | Description |
---|---|
alexa-smart-screen-sample-app |
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. |
alexa-smart-screen-sample-attention-system |
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. |
alexa-smart-screen-sample-captions |
Provides a component for rendering AlexaCaptions payloads within your web application. For more details, see Alexa Smart Screen Sample Captions. |
alexa-smart-screen-sample-display-cards |
Display card implementation that binds TemplateRuntime visual metadata to a rendering technology. The reference implementation uses APL to render content based on TemplateRuntime RenderTemplate and RenderPlayerInfo directives. For more details, see Alexa Smart Screen Sample Display Cards. |
Related topics
- Get Started with Alexa Voice Service Device SDK
- AVS SDK IPC Server Sample App Quick Start Overview
- AVS Device SDK IPC Client Framework API Overview
Last updated: Apr 11, 2022