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.

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:

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.