使用 React 和 AWS 构建无服务器直播平台

封面图片由Caspar Camille Rubin提供

直播越来越流行。Twitch 和 YouTube 等平台允许你使用 OBS 等工具，从台式机或笔记本电脑直接向观众实时直播。

如果您想构建自己的自定义流媒体平台，并将其直接嵌入到您的网站或应用中，该怎么办？在这篇文章中，我将向您展示如何使用 Amplify Video 仅用几个步骤即可实现。

主要教程将介绍如何使用 React 前端执行此操作，但我还将展示如何使用 React Native 执行此操作。

与大多数其他 Amplify 服务不同，本教程中使用的视频服务不属于免费套餐。如果您不在生产环境中使用，请务必在完成后停止视频流并删除项目。点击此处查看这些服务的定价。

要查看已完成的项目，请单击此处

本教程将向您展示如何构建直播平台本身。如果您有兴趣将现有的 Twitch、YouTube 或 Mixer 直播嵌入到您的网站，请查看Ryan Harris的react-stream软件包。

概述

这篇文章向您展示如何使用Amplify CLI、AWS Elemental和Amplify Video （ Sam Patzer开发的 Amplify CLI 插件）部署可嵌入到任何网站或应用程序中的视频流服务。

然后我们将研究如何将视频播放器嵌入到 React 应用程序中并进行测试。

在底层，Amplify Video 使用Elemental MediaLive和Elemental MediaStore等AWS 媒体服务，但由于 CLI 完成了所有繁重的工作，因此您只需从 CLI 本地工作即可设置所有内容。

Elemental MediaLive 是一项完全托管的无服务器服务，可让您对直播视频进行编码，以便在任何设备上进行广播和流式传输。它允许您创建高质量的视频流，并将其传送到广播电视和联网的多屏设备，例如联网电视、平板电脑、智能手机和机顶盒。该服务的工作原理是实时编码您的直播视频流，将较大尺寸的直播视频源压缩成较小的版本，以便分发给您的观众。

本教程从开始到结束总共需要大约 15 分钟。

要继续并测试本教程中完成的应用程序，您需要安装OBS

入门

您首先应该做的是安装最新版本的 Amplify CLI，并为其配置用户（如果尚未这样做）：

$ npm i -g @aws-amplify/cli

$ amplify configure

有关如何配置 Amplify CLI 的视频演示，请单击此处

接下来，安装Amplify Video CLI 插件：

$ npm i -g amplify-category-video

现在您的计算机上已经设置了 Amplify 依赖项，请创建一个新的 React 项目并安装 Video.js：

$ npx create-react-app my-streaming-app

$ cd my-streaming app

$ npm install video.js

创建 Amplify 项目

从项目的根目录中，初始化一个新的 Amplify 应用程序：

$ 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

添加视频资源

现在已经配置了 Amplify 项目，我们可以添加视频资源！

为此，我们将运行 Amplifyadd命令：

$ amplify add video

# Follow the prompts. Note that the default values will be sufficient for this tutorial.

要部署服务，请运行 Amplifypush命令：

$ amplify push

部署后，流式传输服务将自动启动。要关闭它，请在所有提示中amplify video stop选择“是”amplify delete ，或运行删除项目。请确保在不使用流式传输时保持运行，否则您将需要支付使用费。

将视频播放器添加到 React 应用程序

接下来，打开src/App.js并添加以下内容：

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

启用 OBS

开放广播软件 (OBS) 可以通过 Amplify video 自动配置。下载 OBS，确保其已关闭，然后运行以下命令配置 OBS 配置文件以推送到您的视频资源。

$ amplify video setup-obs

运行应用程序

要运行该应用程序，请运行以下start命令：

$ npm start

停止流

完成流后，运行stop命令关闭流，这样您就不会产生任何额外的流费用。

$ amplify video stop

? overwrite .../mylivestream-livestream-workflow.template: Y
? Would you like to overwrite all files? Y
? Are you sure you want to continue? Y
? overwrite ./src/aws-video-exports.js? Y

流关闭后，它将处于Idle状态。在 Elemental MediaLive 中，Idle状态费用略低于每小时 0.01 美元。如果您不想产生任何费用，请使用删除服务amplify delete。

重启直播

如果您想重新打开流，请运行以下命令。

$ amplify video start

? overwrite .../mylivestream-livestream-workflow.template: Y
? Would you like to overwrite all files? Y
? Are you sure you want to continue? Y
? overwrite ./src/aws-video-exports.js? Y

删除服务

要从您的帐户中删除服务，请运行以下delete命令：

$ amplify delete

反应原生

Amplify Video 也支持 React Native。要在 React Native 客户端上实现视频流，请先安装React Native Video

npm install react-native-video

要链接本机依赖项，请按照此处的指南进行操作。

接下来，将视频 URI 设置为 MediaStore URL

import Video from 'react-native-video';

<Video source={{uri: awsvideoconfig.awsOutputLiveLL}}
  ref={(ref) => {
    this.videoNode = ref
  }}
/>

定价

要查看 MediaStore 的定价，请单击此处。

要查看 MediaLive 的定价，请单击此处

文章来源：https://dev.to/aws/building-a-serverless-live-streaming-platform-with-react-aws-1jmk