Blog AWS Indonesia
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 dependensi1.
2. Inisialisasi proyek AWS Amplify2 dengan konfigurasi berikut:
Langkah 2: Tambahkan autentikasi
1. Tambahkan autentikasi, menggunakan Amazon Cognito sebagai penyedia autentikasi utama. Gunakan konfigurasi default sebagai berikut:
2. Untuk men-deploy layanan, jalankan perintah berikut:
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.
2. Edit skema dengan membuka file schema.graphql (amplify/backend/api/amplifyvideofrontend/schema.graphql) baru di editor Anda. Ganti dengan skema berikut:
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.
2. Deploy aplikasi dengan menjalankan perintah berikut untuk membangun skrip:
Membuat CDK untuk AWS Media Services
Langkah 1: Buat dan inisialisasi proyek AWS CDK
1. Buat dan inisialisasi proyek AWS CDK3.
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 AWS2. (Anda juga dapat mengubah media ID, stream key, dan origin access untuk live media input.)
Langkah 3: Deploy layanan
1. Menggunakan kredensial AWS CLI untuk environment Anda, terapkan stack AWS CDK dengan perintah berikut.
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://aws.amazon.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.