An Interest In:
Web News this Week
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
- March 20, 2024
Building a Serverless Live-streaming Platform with React & AWS
Cover image by Caspar Camille Rubin
Live streaming is becoming more and more popular. Platforms like Twitch and YouTube allow you to stream using tools like OBS directly to your audience in real-time from your desktop or laptop.
What if you wanted to build your own custom streaming platform embedded directly into your own website or app? In this post, I'll show you how to do this in just a few steps using Amplify Video.
The main tutorial will cover how to do this with a React Front end, but I'll also show how to do this with React Native.
This tutorial shows you how to build the streaming platform itself. If you're interested in embedding your existing Twitch, YouTube, or Mixer stream in your website, check out the react-stream package from Ryan Harris
Overview
This post shows you how to use the Amplify CLI, AWS Elemental, and Amplify Video (an Amplify CLI plugin by Sam Patzer) to deploy a video streaming service embeddable into your website or app.
We'll then look at how to embed the video player into a React app and test it out.
Under the hood, Amplify Video uses AWS Media Services like Elemental MediaLive and Elemental MediaStore, but because the CLI does all of the heavy lifting you will only have to work locally from your CLI to set everything up.
Elemental MediaLive is a fully managed and Serverless service that allows you to encode live video for broadcast and streaming to any device. It lets you create high-quality video streams for delivery to broadcast televisions and internet-connected multiscreen devices, like connected TVs, tablets, smart phones, and set-top boxes. The service works by encoding your live video streams in real-time, taking a larger-sized live video source and compressing it into smaller versions for distribution to your viewers.
This tutorial should take a total of about 15 minutes from start to finish.
To follow along and test out the completed app in this tutorial, you will need have OBS installed
Getting started
The first think you should do is install the latest version of the Amplify CLI and configure it with a user if you have not already done so:
$ npm i -g @aws-amplify/cli$ amplify configure
For a video walkthrough of how to configure the Amplify CLI, click here
Next, install the Amplify Video CLI plugin:
$ npm i -g amplify-category-video
Now that the Amplify dependencies are set up on your computer, create a new React project:
$ npx create-react-app my-streaming-app$ cd my-streaming app
Creating the Amplify project
From within the root of the project, initialize a new Amplify app:
$ amplify init# Choose the project name, environment name, your preferred text editor, and the defaults for the rest of the options.# When prompted for your AWS Profile, choose the profile you created when you configured the Amplify CLI
Add a video resource
Now that the Amplify project has been configured, we can add a video resource!
To do so, we will run the Amplify add
command:
$ amplify add video# Follow the prompts. Note that the default values will be sufficient for this tutorial
To deploy the service, run the Amplify push
command:
$ amplify push
Adding the video player to the React application
Next, open src/App.js and add the following:
import React from 'react'import videojs from 'video.js'import awsvideoconfig from './aws-video-exports'import './App.css'import 'video.js/dist/video-js.css'class VideoPlayer extends React.Component { componentDidMount() { this.player = videojs(this.videoNode, this.props) } componentWillUnmount() { if (this.player) { this.player.dispose() } } render() { return ( <> <div data-vjs-player style={{ width: 960, height: 540 }}> <video ref={(node) => { this.videoNode = node; }} className="video-js" /> </div> </> ); }}const videoJsOptions = { autoplay: true, controls: true, sources: [{ src: awsvideoconfig.awsOutputLiveLL, }]}function App() { return ( <div> <nav style={nav}> <p style={navHeading}>Live Streaming with React & AWS</p> </nav> <div style={container}> <VideoPlayer { ...videoJsOptions } /> </div> </div> );}const nav = { padding: '0px 40px', height: 60, borderBottom: '1px solid #ddd', display: 'flex', alignItems: 'center' }const container = { paddingTop: 40, width: 960, margin: '0 auto' }const navHeading = { margin: 0, fontSize: 18 }export default App
Enable OBS
Open Broadcast Software (OBS) can be automatically configured through Amplify video. Download OBS, make sure it's closed, and run the following command to configure an OBS profile to push to your Video resource.
$ amplify video setup-obs
Running the app
To run the app, run the start
command:
$ npm start
React Native
Amplify Video also works with React Native. To implement the stream on the React Native client, first install React Native Video
npm install react-native-video
To link the native dependencies, follow the guide here.
Next, set the video URI as the MediaStore URL
import Video from 'react-native-video';<Video source={{uri: awsvideoconfig.awsOutputLiveLL}} ref={(ref) => { this.videoNode = ref }}/>
Original Link: https://dev.to/aws/building-a-serverless-live-streaming-platform-with-react-aws-1jmk
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To