Deploy your first web application with Amazon GameLift Streams

TutoSartup excerpt from this article:
While traditionally complex and costly to implement, Amazon GameLift Streams is making this powerful capability accessible to companies of all sizes… Recently launched, Amazon GameLift Streams eliminates the need for specialized hardware and software installations to run and stream 3D applicati…

Imagine running graphically intense 3D applications instantly in your web browser, with no downloads or powerful hardware required. That’s the magic of pixel streaming, a game-changing technology that’s revolutionizing how businesses deliver immersive digital experiences. While traditionally complex and costly to implement, Amazon GameLift Streams is making this powerful capability accessible to companies of all sizes.

Recently launched, Amazon GameLift Streams eliminates the need for specialized hardware and software installations to run and stream 3D applications at scale globally. Following this release, we’re excited to introduce a new open source sample that simplifies the process of building, deploying, and streaming web-based 3D applications.

We’ll explore the Sample Amazon GameLift Streams React app, an extensible serverless solution that demonstrates best practices for integrating Amazon GameLift Streams into web applications. This sample builds upon our previous blog post, Scale and deliver game streaming experiences with Amazon GameLift Streams, which showed how to upload and test game executables in the Amazon Web Services Console (AWS Console). While the previous post focused on initial testing, this sample focuses on showcasing how you can integrate Amazon GameLift Streams in your own web application and backend infrastructure.

This technical guide is intended for a developer audience. It covers software development concepts and AWS services are utilized in the sample solution. You will need an AWS account and other prerequisite tools to deploy the solution. More information on these prerequisites, including NodeJS, Node Package Manager (NPM), the AWS Command Line Interface (AWS CLI), and the AWS Cloud Development Kit (AWS CDK), can be found within the repository README.md, as well as information on deployment, pricing, API documentation, and troubleshooting.

Understanding the solution architecture

The Amazon GameLift Streams React Starter is designed with scalability, security, and maintainability in mind. Within the frontend web, a user is able to input their unique Amazon GameLift Streams resource IDs and stream their game or application to the browser.

Figure 1: Input fields to provide GameLift Streams application and stream group IDs within sample solution frontend.

The solution is split into two main components: a serverless backend API, and a React-based frontend application. This separation allows for independent scaling and updating of each component to follow a best practice architecture.

The backend infrastructure uses Amazon API Gateway to expose secure endpoints for stream management, powered by serverless AWS Lambda functions to handle the orchestration of stream sessions. Amazon Cognito is used for user authentication and authorization, ensuring only authorized users can access streaming resources. Amazon Cognito has features to support various identity providers and Amazon API Gateway has additional security features as needed.

Figure2: Architecture diagram of the Amazon GameLift Streams React Starter sample solution.

The frontend is a modern single page React application, built without a design system to maintain flexibility. The frontend application is distributed through Amazon CloudFront, ensuring low-latency access for users worldwide. We’ve also integrated AWS WAF to provide additional security features and protect against common web exploits. This sample uses the React frontend framework, but could be adapted to use other frontend frameworks such as Angular, or Vue.

Stream session management

This section will mention Amazon GameLift Streams core concepts learned within the previous blog, including Amazon GameLift Streams applications and stream groups. We recommend reading that post if you are not yet familiar with these concepts.

One of the most critical aspects of this React sample solution is how it handles stream sessions. When a user initiates a streaming session, several steps occur behind the scenes.

The frontend generates a WebRTC signal request and sends it to the backend API along with the desired Amazon GameLift Streams application and stream group identifiers.

The backend then communicates with Amazon GameLift Streams to create a new session and returns essential information including the session Amazon Resource Name (ARN) and signal response needed to establish the WebRTC connection.

The frontend implements a polling mechanism to monitor the session status until it becomes active. Since in very limited scenarios, on-demand capacity can take longer to become active than Lambdas max execution timeout, this polling mechanism mitigates any potential problems. Capacity management is an important topic, learn more about managing capacity and the difference between always-on and on-demand capacity.

Once active, the WebRTC connection is established, and the stream becomes available in the browser.

The solution implements both windowed and fullscreen modes, with input controls automatically enabled when entering fullscreen mode for an optimal user experience.

Figure 3: Real-time engine executable streaming within the sample solution frontend.

Infrastructure as code with CDK

This solution implements the infrastructure using AWS CDK, which provides several advantages. The AWS CDK is an open source framework to define AWS infrastructure in code and provision it through AWS CloudFormation. This allows our infrastructure to be version-controlled, repeatable, and easy to extend. This sample uses AWS CDK stacks, a collection of AWS resources, to stay organized and allow for independent updates between the frontend and backend infrastructure.

The AWS CDK allows you to use familiar programming languages like TypeScript, Python, Java, and C# to model your applications instead of using CloudFormation templates. It synthesizes your code into CloudFormation templates, enabling you to leverage the full power of your programming language to define reusable components called constructs. This approach makes it easier to create and manage AWS resources, implement best practices, and speed up cloud development workflows.

The AmazonGameLiftStreamsReactStarterAPIStack within the sample repository manages all backend resources, including AWS Lambda functions, Amazon API Gateway configurations, and Amazon Cognito user pools. This stack can be deployed to any supported Amazon GameLift Streams primary location, allowing you to serve users with optimal latency.

The AmazonGameLiftStreamsReactStarterFrontendStack within the sample repository manages all frontend infrastructure, including the Amazon Simple Storage Service (Amazon S3) bucket for hosting, Amazon CloudFront distribution, and Web Application Firewall (WAF) configuration. The frontend stack deploys to us-east-1 because WAF integration with Amazon CloudFront requires deployment in the us-east-1 region. The frontend uses the AWS Amplify SDK to simplify authentication and API calls.

Figure 4: AWS Amplify Authenticator component within the sample solution frontend.

Deployment and operation

After installing the prerequisites, the deployment process involves running a series of commands to install dependencies and deploy the infrastructure. One critical step in the process is to download and include the Amazon GameLift Streams Web SDK bundle and include the necessary SDK files within the project. The README.md includes detailed steps to follow, and you can find additional information within the Setting up Amazon GameLift Streams documentation page if needed.

We’ve included detailed error handling and logging to help troubleshoot issues that might arise during deployment. The solution includes monitoring capabilities through Amazon CloudWatch, allowing you to track key metrics and set up alerts. This operational visibility is crucial for maintaining a high-performing environment.

Figure 5: Amazon GameLift Streams running on mobile device with bluetooth controller.

Security and performance considerations

Security is paramount in streaming applications, and our solution implements several layers of protection. All API requests require valid JSON Web Tokens (JWT) from Amazon Cognito. The CloudFront distribution uses WAF to implement geographic restrictions, controlling which locations can access your streaming application. Access to the frontend requires Amazon Cognito authentication, following AWS security best practices.

The CloudFront distribution optimizes performance by caching static assets from Amazon S3 near users, minimizing frontend delivery latency. The Amazon GameLift Streams Web SDK uses WebRTC connections optimized for network latency fluctuations, while the serverless backend scales automatically with demand.

Cost optimization and management

When working with Amazon GameLift Streams, it’s important to understand the pricing model and implement cost optimization strategies to suit the needs of your business and users. Amazon GameLift Streams is designed to help you manage cost effectively by providing clear visibility of resource usage and enabling quick capacity scaling. Amazon GameLift Streams pricing is based on allocated streams, so it’s important to align your always-on and on-demand settings with actual requirements.

Ensure that your capacity is set to 0 when streams are no longer needed to avoid unintended usage. Idle and in-use streams can be viewed in Amazon CloudWatch Metrics. There are many ways you can adjust your stream capacity to meet your business needs. You can do this via the AWS console, or programmatically with the Amazon GameLift Streams API. For example, you can use an Amazon EventBridge Scheduler to adjust capacity based on time of day, or implement an Amazon CloudWatch Alarm to automatically scale your stream capacity based on stream group utilization.

Conclusion

Amazon GameLift Streams simplifies the process of 3D streaming and improves accessibility to developers at scale. By removing this undifferentiated heavy lifting, AWS is enabling developers to focus on building great 3D real-time experiences rather than wrestling with infrastructure and integration challenges.

We’re excited to see how you’ll extend and customize this solution, to make your 3D experiences more accessible to larger audiences. For those ready to get started, visit the GitHub repository and review the Amazon GameLift Streams documentation for additional insights and capabilities. You can also check out AWS Partners or contact an AWS Representative to know how we can help accelerate your business.