Cara membangun aplikasi video-chat untuk live streaming menggunakan AWS Amplify dan AWS Media Services

Dalam posting ini, kita akan membangun aplikasi web untuk video chat. Untuk hosting frontend dan resource backend, kita akan menggunakan layanan AWS seperti AWS Amplify, sebuah layanan yang membantu front-end dan mobile developer untuk membangun aplikasi full stack yang scalable. Dengan menggunakan AWS Cloud Development Kit (AWS CDK), sebuah open-source development framework, kita akan memanfaatkan AWS Media Services untuk membuat saluran siaran untuk live event. Pelanggan dapat menggunakan arsitektur referensi ini untuk membuat aplikasi interaktif dengan fitur chat, video, dan autentikasi di mana hal yang terpenting adalah skalabilitas dan desain aplikasi serverless. Misalnya, webinar, masterclass, penjualan produk e-commerce, dan turnamen.

Gambaran Umum

Untuk frontend, kita akan membuat aplikasi React yang dihosting oleh AWS Amplify Console–layanan managed-service untuk deploy dan hosting static website secara global–dan menggunakan pustaka AWS Amplify dan komponen UI-nya. Untuk menambahkan autentikasi kepada pengguna, kita akan menggunakan Amazon Cognito User Pools dan aplikasi sisi klien yang dibuat dalam proyek AWS Amplify. Amazon Cognito memungkinkan anda menambahkan fitur sign-up, sign-in dan kontrol akses ke aplikasi web dan mobile anda dengan cepat dan mudah.

Untuk backend, kita akan menggunakan AWS AppSync, layanan managed-service yang memudahkan pembuatan GraphQL API dengan mengabstraksi koneksi ke data source seperti Amazon DynamoDB, Amazon Aurora, Amazon OpenSearch Service, AWS Lambda, dan layanan AWS Lainnya. Kita dapat menggunakan AWS Management Console untuk membuat backend dengan beberapa klik. Dalam posting ini, kita akan menggunakan Amplify Command Line Interface (Amplify CLI) untuk membuat API dan kode untuk aplikasi React kita secara otomatis.

Dengan menggunakan AWS AppSync GraphQL client, aplikasi kita dapat terhubung ke near-real-time endpoint (wss://) dari AWS AppSync dan menggunakan WebSocket client untuk subscribe data kita: Channels dan Messages. Setiap kali data berubah di aplikasi backend kita, aplikasi frontend kita akan mendapat notifikasi dengan data untuk memperbarui UI secara otomatis. Untuk aplikasi chat kita, kita akan membuat empat subscriptions: onCreateMessage, onCreateChannel, onUpdateChannel, dan onDeleteChannel.

Kita juga akan menggunakan AWS Media Services untuk membuat video live streaming. Untuk melakukan ini, kita akan menggunakan AWS CDK, yang membantu pengguna menentukan resource untuk aplikasi cloud mereka menggunakan bahasa pemrograman yang sudah dikenal. Untuk proyek ini, kita akan menggunakan TypeScript.

Untuk membuat output live broadcast dan streaming, kita akan menggunakan layanan video near-real-time AWS Elemental MediaLive. Layanan ini membantu pengguna membuat streaming video berkualitas tinggi untuk pengiriman ke siaran TV dan perangkat multi-layar yang terhubung ke internet, seperti TV, tablet, smartphone, dan set-top boxes.

Kita juga akan menggunakan AWS Elemental MediaStore, sebuah layanan di AWS untuk penyimpanan dan pengiriman aset video pada alur kerja live streaming. Dengan menggunakan layanan untuk pembuatan dan penyimpanan video ini, live streaming kita akan berkualitas tinggi dan tampak seolah-olah konsisten tanpa tertunda (delay).

Diagram berikut mewakili arsitektur untuk aplikasi video chat ini, yang menggambarkan bagaimana Media Services di AWS disajikan oleh Amazon CloudFront, layanan CDN (Content Delivery Network) yang cepat. Ini akan meningkatkan user experience dengan mengirimkan video dengan latensi rendah. Aplikasi front-end memiliki player yang dikonfigurasi untuk streaming saluran video dengan panel chat di sisinya.

Gambaran Umum Arsitektur

Prasyarat

Akun AWS.
Bekerja di IDE (Integrated Development Environment) lokal atau AWS Cloud9 Anda dengan tools berikut:

Arahan

Membuat aplikasi front-end menggunakan AWS Amplify

Di bagian ini, kami menjelaskan langkah-langkah yang perlu kita ikuti untuk membuat frontend, menggunakan alat dan layanan AWS Amplify untuk membangun aplikasi React.

Langkah 1: Buat dan inisialisasi proyek AWS Amplify

1. Buat aplikasi React, dan instal dependensi¹.

npx create-react-app amplify-video-frontend
cd amplify-video-frontend
npm uninstall react react-dom @testing-library/react
npm install react@17.0.2 @testing-library/react@12.1.5
npm install —save react-dom@17.0.2
npm install aws-amplify@4.3.43 aws-amplify-react@5.1.9 @aws-amplify/ui-react@2.1.9 @material-ui/core@4.12.4 @material-ui/icons@4.11.3 video.js@7.18.1

2. Inisialisasi proyek AWS Amplify² dengan konfigurasi berikut:

amplify init

$ Project information
$ Name: amplifyvideofrontend
$ Environment: dev
$ Default editor: Visual Studio Code
$ App type: javascript
$ JavaScript framework: react
$ Source Directory Path: src
$ Distribution Directory Path: build
$ Build Command: npm run-script build
$ Start Command: npm run-script start
$ Initialize the project with the above configuration? (Y/N): Y
$ Using default provider awscloudformation
$ Select the authentication method you want to use: AWS Profile
$ Please choose the profile you want to use: default (Pilih profil Anda menggunakan kredensial AWS IAM.)

Langkah 2: Tambahkan autentikasi

1. Tambahkan autentikasi, menggunakan Amazon Cognito sebagai penyedia autentikasi utama. Gunakan konfigurasi default sebagai berikut:

amplify add auth

$ Do you want to use the default authentication and security configuration? Default configuration
$ How do you want users to be able to sign in? Username
$ Do you want to configure advanced settings? No, I am done.

2. Untuk men-deploy layanan, jalankan perintah berikut:

amplify push

3. Are you sure you want to continue? (Y/n) Y

Langkah 3: Tambahkan API (GraphQL)

1. Tambahkan API AWS AppSync GraphQL menggunakan Amazon Cognito user pool untuk autentikasi API.

amplify add api

$ Please select from one of the below mentioned services: GraphQL
$ Provide API name: amplifyvideofrontend
$ Choose the default authorization type for the API: Amazon Cognito user pool
$ Use a Cognito user pool configured as a part of this project.
$ Do you want to configure advanced settings for the GraphQL API? No, I am done.
$ Do you have an annotated GraphQL schema? No
$ Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
$ Do you want to edit the schema now? Yes

2. Edit skema dengan membuka file schema.graphql (amplify/backend/api/amplifyvideofrontend/schema.graphql) baru di editor Anda. Ganti dengan skema berikut:

type Channel @model {
  id: ID!
  name: String!
  url: String!
  createdAt: String
  messages: [Message] @connection(keyName: "byChannel", fields: ["id"])
}

enum ModelSortDirection {
  ASC
  DESC
}

type Message @model(subscriptions: null)
@key(name: "byChannel", fields: ["channelId", "createdAt"], queryField: "listMessagesByChannel")
{
  id: ID!
  channelId: ID!
  username: String!
  content: String!
  createdAt: String
  channel: Channel @connection(fields: ["channelId"], sortField: "createdAt")
}

type Subscription {
  onCreateMessage(channelId: ID): Message @aws_subscribe(mutations: ["createMessage"])
}

Langkah 4: Buat/ganti file aplikasi React

1. Perbarui file-file berikut di aplikasi React Anda.

2. Buat file-file berikut di aplikasi React Anda.

Langkah 5: Tambahkan hosting

1. Untuk latihan ini, kita akan memilih deployments manual sehingga anda dapat mempublikasikan aplikasi web anda ke AWS Amplify Console tanpa menghubungkan Git provider.

amplify add hosting

$ Select the plugin module to execute: Hosting through Amplify Console (Managed hosting with custom domains, Continuous deployment)
$ Choose a type: Manual deployment

2. Deploy aplikasi dengan menjalankan perintah berikut untuk membangun skrip:

amplify publish

$ Are you sure you want to continue? Yes

Membuat CDK untuk AWS Media Services

Langkah 1: Buat dan inisialisasi proyek AWS CDK

1. Buat dan inisialisasi proyek AWS CDK³.

mkdir cdk-media-services
cd cdk-media-services
cdk init -l typescript
npm install @aws-cdk/aws-medialive@1.134.0 @aws-cdk/aws-mediastore@1.134.0 @aws-cdk/aws-cloudfront@1.134.0 @aws-cdk/aws-iam@1.134.0 @aws-cdk/assert@1.134.0  ts-node@10.4.0 typescript@4.5.4

Langkah 2: Tambahkan layanan ke stack

1. Perbarui file-file berikut:

2. Perbarui file berikut, dan ganti dengan data anda sendiri untuk akun ID dan region AWS². (Anda juga dapat mengubah media ID, stream key, dan origin access untuk live media input.)

bin/cdk-media-services.ts

Langkah 3: Deploy layanan

1. Menggunakan kredensial AWS CLI untuk environment Anda, terapkan stack AWS CDK dengan perintah berikut.

# build the AWS CDK app
npm run build
# deploy it
cdk deploy

Proses ini membutuhkan waktu beberapa menit untuk menyelesaikannya. Pada akhirnya, Anda dapat menemukan data AWS Media Services yang diperlukan untuk membuat koneksi dan streaming live video. Anda dapat menggunakan Open Broadcaster Software atau aplikasi streaming lainnya.
Output:

CdkMediaServicesStack.DataEndpoint
CdkMediaServicesStack.MediaLiveEndpoint
CdkMediaServicesStack.MediaLiveInputID
CdkMediaServicesStack.PlaybackURL

Catatan: Pastikan resource AWS Elemental MediaLive anda dalam status Running.

Setelah melakukan streaming live video, anda dapat kembali ke aplikasi AWS Amplify dan menambahkan streaming saluran menggunakan PlaybackURL dari output sebelumnya.

Aplikasi berjalan dan streaming pemandangan kota Oaxacan

Pembersihan

Untuk menghindari timbulnya biaya di masa mendatang, hapus resource dengan menghapus stack AWS CloudFormation yang dihasilkan oleh CDK.

Jalankan perintah amplify delete pada Amplify CLI untuk menghapus semua resources yang terkait dengan proyek dari cloud, dan hapus API AWS AppSync menggunakan Amplify CLI atau AWS Management Console.

Kesimpulan

Dalam posting ini, kami menjelaskan cara menggunakan AWS CDK untuk AWS Media Services guna menyederhanakan implementasi infrastruktur live streaming dan mengintegrasikan AWS AppSync untuk interaksi dengan penonton. Dengan menggunakan aplikasi chat bersama AWS AppSync, kita membuat GraphQL mutation payload yang dikirim ke AWS AppSync menggunakan API tanpa perlu menulis Lambda function atau kode tertentu yang perlu dimaintain.

Pembaruan atau perubahan dapat dengan mudah diterapkan dengan Infrastructure-as-Code pilihan anda. Arsitektur serverless ini menggunakan AWS Amplify—yang memudahkan developer untuk menambahkan fitur lokasi ke aplikasi tanpa mengorbankan keamanan data dan privasi pengguna—bersama Amazon Cognito, AWS AppSync, dan AWS CDK untuk AWS Media Services. Bekerja bersama, layanan dan alat ini memberikan solusi yang efektif dan sederhana yang dapat anda gunakan untuk mengelola dan mengirim perubahan data dan event dengan mulus dari backend cloud anda ke ribuan frontend dan mobile clients yang terhubung dengan WebSocket connection management. Menggunakan teknologi serverless yang fleksibel, aplikasi anda dapat scale secara otomatis sesuai permintaan.

AWS menawarkan layanan-layanan yang dibuat khusus untuk direct-to-consumer (D2C) & streaming untuk membantu perusahaan-perusahaan mengirim, monetisasi, dan mendukung live media maupun on-demand melalui internet dengan andal, dan menghadirkan pengalaman tak tertandingi ke layar-layar di mana saja. Jelajahi https://thinkwithwp.com/media/direct-to-consumer-d2c-streaming/ untuk mempelajari lebih lanjut.

Jika Anda memiliki pertanyaan, feedback, atau ingin terlibat dalam diskusi dengan anggota komunitas lainnya, kunjungi AWS Developer Forums: Media Services.

Artikel ini diterjemahkan dari artikel asli berjudul “How-to: Build a video-chat application for live streams using AWS Amplify and AWS Media Services” yang ditulis oleh Arturo Velasco and Uriel Ramirez.

Catatan:

npx create-react-app akan membuat aplikasi React dengan version terbaru saat perintah dijalankan. Di sini kita coba menggunakan versi-versi pustaka yang digunakan saat blog asli diterbitkan.
Pastikan anda menggunakan region di mana layanan AWS Elemental MediaStore tersedia, contohnya us-east-1.
Gunakan AWS CDK versi 1.134.0. Saat diuji pada Desember 2022, kode di langkah 2 belum mendukung CDK versi 2.

Blog AWS Indonesia