{"id":6430,"date":"2024-12-11T10:29:46","date_gmt":"2024-12-11T03:29:46","guid":{"rendered":"https:\/\/vcube.co.id\/?p=6430"},"modified":"2024-12-11T10:55:13","modified_gmt":"2024-12-11T03:55:13","slug":"membangun-aplikasi-video-call-dengan-astro-dan-reactjs","status":"publish","type":"post","link":"https:\/\/vcube.co.id\/en\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/","title":{"rendered":"Membangun Aplikasi Video Call dengan Astro dan ReactJS"},"content":{"rendered":"\n<p>Astro adalah framework yang menyajikan HTML statis ke situs web Anda tanpa JavaScript kecuali Anda memintanya secara eksplisit dan popularitasnya meningkat pesat. Namun, dapatkah Anda menambahkan panggilan video ke situs web Astro Anda?<\/p>\n\n\n\n<p>Jawabannya adalah ya! Artikel ini akan mengajarkan Anda cara melakukannya dengan tepat.<\/p>\n\n\n<h2 class=\"simpletoc-title\">Table of Contents<\/h2>\n<ul class=\"simpletoc-list\">\n<li><a href=\"#apa-yang-akan-kami-gunakan\">Apa yang Akan Kami Gunakan<\/a>\n\n<\/li>\n<li><a href=\"#buat-akun-agora\">Buat Akun Agora<\/a>\n\n<\/li>\n<li><a href=\"#inisialisasi-proyek-astro\">Inisialisasi Proyek Astro<\/a>\n\n<\/li>\n<li><a href=\"#h-structure-of-the-project\">Struktur Proyek<\/a>\n\n<\/li>\n<li><a href=\"#h-building-a-form-with-astro\">Membangun Formulir dengan Astro<\/a>\n\n\n<ul><li>\n<a href=\"#h-astro-ssg-vs-ssr\">Astro SSG vs SSR<\/a>\n\n<\/li>\n<li><a href=\"#h-form-ui\">Formulir UI<\/a>\n\n<\/li>\n<li><a href=\"#h-retrieve-form-data-and-redirect-to-the-call-page\">Ambil Data Formulir dan Arahkan ke Halaman Panggilan<\/a>\n\n<\/li>\n<li><a href=\"#h-call-page\">Halaman Panggilan<\/a>\n\n<\/li>\n<li><a href=\"#h-client-only-nbsp-directive\">client:only&nbsp;Direktif<\/a>\n\n<\/li>\n<li><a href=\"#h-add-the-call-component\">Tambahkan Komponen Panggilan<\/a>\n\n<\/li>\n<li><a href=\"#h-videos\">Video<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#h-summary\">Ringkasan<\/a>\n<\/li><\/ul>\n\n\n<h2 id=\"apa-yang-akan-kami-gunakan\" class=\"wp-block-heading\">Apa yang Akan Kami Gunakan<\/h2>\n\n\n\n<p>Tentu saja, kita membutuhkan kerangka Astro, karena itulah judul artikel ini.<\/p>\n\n\n\n<p>Kami akan menggunakan Agora untuk bagian panggilan video aplikasi. Secara khusus, kami akan menggunakan paket\u00a0<code>agora-rtc-react<\/code>. Paket ini adalah React SDK untuk berinteraksi dengan\u00a0<a href=\"https:\/\/vcube.co.id\/agora\/\" data-type=\"page\" data-id=\"1276\">Agora<\/a>.<\/p>\n\n\n\n<p>Saat ini, belum ada paket Astro asli. Namun, Astro dibuat untuk digunakan dengan hampir semua kerangka kerja web populer. Jadi, paket\u00a0<code>agora-rtc-react<\/code> tersebut akan berfungsi dengan baik.<\/p>\n\n\n\n<p>Kita akan menggunakan Tailwind CSS untuk sedikit perubahan gaya pada aplikasi.<\/p>\n\n\n\n<h2 id=\"buat-akun-agora\" class=\"wp-block-heading\">Buat Akun Agora<\/h2>\n\n\n\n<p>Daftar&nbsp;untuk <a href=\"https:\/\/vcube.co.id\/bagaimana-cara-memulai-menggunakan-agora\/\" data-type=\"link\" data-id=\"https:\/\/vcube.co.id\/bagaimana-cara-memulai-menggunakan-agora\/\">membuat akun Agora<\/a>, dan masuk ke dashboard.<\/p>\n\n\n\n<p>Navigasi ke tab Daftar Proyek di bawah tab Manajemen Proyek. Buat proyek dengan mengeklik tombol Buat berwarna biru.<\/p>\n\n\n\n<p>Ambil ID Aplikasi, yang akan kita gunakan untuk mengotorisasi permintaan aplikasi saat kita mengembangkan aplikasi.<\/p>\n\n\n\n<h2 id=\"inisialisasi-proyek-astro\" class=\"wp-block-heading\">Inisialisasi Proyek Astro<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Buat proyek Astro Anda dengan menggunakan&nbsp;<code>npm create astro@latest<\/code>.<\/li>\n\n\n\n<li>Tambahkan Tailwind CSS dengan menggunakan&nbsp;<code>npm astro add tailwind<\/code>.<\/li>\n\n\n\n<li>Tambahkan React dengan menggunakan&nbsp;<code>npm astro add react<\/code>.<\/li>\n\n\n\n<li>Tambahkan Agora UI Kit dengan menggunakan&nbsp;<code>npm install agora-rtc-react<\/code>.<\/li>\n\n\n\n<li>Tambahkan\u00a0<code>PUBLIC_AGORA_APP_ID = '&lt;---Your App Id--->'<\/code>ke\u00a0<code>.env<\/code> berkas Anda.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-structure-of-the-project\">Struktur Proyek<\/h2>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/7eb788dbf219c9baf3e51751b38db5ee.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-a-form-with-astro\">Membangun Formulir dengan Astro<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-astro-ssg-vs-ssr\">Astro SSG vs SSR<\/h3>\n\n\n\n<p>Secara default, proyek Astro menggunakan generator situs statis (SSG) yang membuat situs statis yang tidak dapat Anda ubah. Astro menyediakan cara untuk berinteraksi dengan berbagai kerangka kerja (React, Svelte, Vue, dll.) menggunakan mekanisme yang disebut pulau. Formulir harus interaktif, dan kita dapat menggunakan pulau untuk mewujudkannya. Namun, Anda dapat membuat formulir dengan Astro yang dikirimkan tanpa JavaScript.<\/p>\n\n\n\n<p>Untuk melakukannya, kita perlu mengaktifkan server-side renderer (SSR) dengan menambahkannya&nbsp;<code>output: 'server'<\/code>ke&nbsp;<code>astro.config.mjs<\/code>berkas. Ini berarti bahwa halaman kita akan dirender di server. Ini memberikan manfaat berupa kemampuan mengakses data sisi server dan menjalankan beberapa fungsi sebelum halaman dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-form-ui\">Formulir UI<\/h3>\n\n\n\n<p>Untuk kasus pembuatan dan pengiriman formulir, kami akan memuat halaman terlebih dahulu untuk menampilkan formulir. Kemudian, setiap kali kami mengirimkan formulir, halaman tersebut akan bertindak seperti titik akhir API.<\/p>\n\n\n\n<p>Biasanya, saat Anda mengirimkan formulir, data akan ditambahkan ke URL, dan Anda harus menguraikannya. Dengan mengubah metode transfer data formulir ke POST, formulir akan mengirimkan data sebagai bagian dari isi formulir&nbsp;<code>Request<\/code>. Untuk aplikasi ini, satu-satunya data yang kita perlukan adalah nama saluran yang ingin diikuti pengguna:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/4b67ee208ef5527880153f2434cde9ee.js\"><\/script>\n\n\n\n<p>Formulir kita harus terlihat seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/661e75fc70756be16764754b\/6669dba1d4be74ceccbc5e39_build-a-video-call-app-with-astro-and-reactjs-1-1024x625.webp\" alt=\"Tangkapan layar login Astro x Agora\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-retrieve-form-data-and-redirect-to-the-call-page\">Ambil Data Formulir dan Arahkan ke Halaman Panggilan<\/h3>\n\n\n\n<p>Setelah formulir dikirimkan dengan data di&nbsp;&nbsp;<code>Request<\/code>, halaman dimuat ulang dan data dikirim ke server. Data ini dapat diambil dari sisi server dan ditindaklanjuti sebelum halaman ditampilkan. Dalam kasus ini, kami akan memeriksa kesalahan. Jika kami menemukan kesalahan, kami akan merender halaman yang sama lagi untuk menunjukkan kesalahan kepada pengguna. Jika tidak ada kesalahan, kami akan mengarahkan pengguna ke halaman yang terkait dengan saluran panggilan video yang mereka masukkan:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/7811354cdd3d9137e512a8f9bb992f35.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-call-page\">Halaman Panggilan<\/h3>\n\n\n\n<p>Dalam komponen Panggilan yang akan kita buat dengan&nbsp;<code>agora-rtc-react<\/code>, kita ingin mencetak nama saluran yang telah kita ikuti.<\/p>\n\n\n\n<p>Pengalihan yang kita gunakan di bagian sebelumnya bersifat dinamis, dan akan berbeda tergantung pada channelName yang kita masukkan. Untuk menangani hal ini di Astro, kita perlu membuat folder&nbsp;<code>channel<\/code>dan di folder tersebut tentukan file bernama&nbsp;<code>[channelName].astro<\/code>. Tanda kurung siku menandakan bahwa dynamic&nbsp;<code>${channelName}<\/code>di URL kita akan diteruskan sebagai parameter di komponen ini. Kita hanya perlu mengambil nama saluran dan menampilkannya di UI kita.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-client-only-nbsp-directive\"><code>client:only<\/code> Direktif<\/h3>\n\n\n\n<p>Untuk komponen Panggilan, kita meneruskan&nbsp;<code>channelName<\/code>dan&nbsp;<code>appId<\/code>. Namun, kita juga perlu menambahkan&nbsp;<code>client:only=\"react\"<\/code>direktif. Direktif ini diperlukan untuk membuat pulau Astro. Seperti yang disebutkan, Astro menghasilkan kode HTML statis untuk situs tersebut, dan panggilan video yang kita buat harus interaktif.<\/p>\n\n\n\n<p>Jadi tanpa arahan ini, Astro akan mencoba merender HTML statis dari komponen React ini. Namun, dengan menggunakan perintah ini&nbsp;<code>client:only<\/code>, kita melewati proses rendering sisi server, dan membiarkan React melakukan apa yang diinginkan React: merender hanya pada klien.<\/p>\n\n\n\n<p>Karena Astro mendukung banyak kerangka kerja, kami juga perlu menentukan kerangka kerja mana yang perlu digunakan:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/9339e8023ad5ad3967d1850f68e768f8.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-add-the-call-component\">Tambahkan Komponen Panggilan<\/h3>\n\n\n\n<p>Komponen terakhir ini adalah komponen React murni. Komponen Call akan berisi tiga komponen utama:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Video seluruh peserta<\/li>\n\n\n\n<li>Nama saluran<\/li>\n\n\n\n<li>Tombol akhiri panggilan<\/li>\n<\/ul>\n\n\n\n<p>Nama saluran berupa teks sederhana di kiri atas layar. Tombol panggilan berada di bagian tengah bawah layar. Setiap kali Anda mengeklik tombol tersebut, Anda akan kembali ke layar sebelumnya, tempat Anda dapat bergabung dengan panggilan video lain.<\/p>\n\n\n\n<p>Bagian yang menarik adalah menampilkan video semua peserta. Untuk melakukannya, kita perlu membuat&nbsp;<code>AgoraRTCProvider<\/code>, yang menginisialisasi dan memberi kita akses ke layanan Agora RTC. Di dalamnya, kita sekarang dapat menampilkan video:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-videos\">Video<\/h3>\n\n\n\n<p>Komponen Video akan menjadi bagian dari situs yang menampilkan video semua peserta. Banyak kaitan yang digunakan untuk menyiapkan panggilan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useLocalMicrophoneTrack() mengambil mikrofon pengguna saat ini.<\/li>\n\n\n\n<li>useLocalCameraTrack() mengambil masukan video pengguna saat ini.<\/li>\n\n\n\n<li>useRemoteUsers() mengambil semua informasi pengguna untuk pengguna jarak jauh.<\/li>\n\n\n\n<li>useRemoteAudioTracks() mengambil audio untuk pengguna tersebut.<\/li>\n\n\n\n<li>usePublish() menerbitkan video dan audio pengguna saat ini.<\/li>\n\n\n\n<li>useJoin() menggabungkan saluran untuk panggilan video.<\/li>\n<\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/80ee9e035a1fbd2381838533fdc2b504.js\"><\/script>\n\n\n\n<p>Kemudian kita perlu memastikan semua audio untuk pengguna jarak jauh telah dimulai:<code>audioTracks.map((track) =&gt; track.play());<\/code><\/p>\n\n\n\n<p>Terakhir, kita perlu mendefinisikan UI kita: pertama status pemuatan, sembari kita menunggu mikrofon dan video pengguna lokal dimulai, lalu kisi semua pengguna yang ada dalam panggilan:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/tadaspetra\/0ca16dfedddcb63981f35a8f62e751c9.js\"><\/script>\n\n\n\n<p>Panggilan video terakhir kita akan terlihat seperti ini:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.prod.website-files.com\/661e75fc70756be16764754b\/6669dba2d4be74ceccbc5e6a_build-a-video-call-app-with-astro-and-reactjs-2-1024x596.webp\" alt=\"Tangkapan layar aplikasi panggilan video yang berhasil menunjukkan pembicara mengacungkan jempol\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-summary\">Ringkasan<\/h2>\n\n\n\n<p>Dengan demikian, kami memiliki pengalaman panggilan video yang lengkap. Berikut cara kami membuatnya:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Buat proyek Astro kita.<\/li>\n\n\n\n<li>Instal Tailwind CSS, React, dan Agora SDK.<\/li>\n\n\n\n<li>Buat formulir untuk memasukkan nama saluran.<\/li>\n\n\n\n<li>Arahkan situs ke URL dengan nama saluran.<\/li>\n\n\n\n<li>Menampilkan nama saluran dengan panggilan video.<\/li>\n<\/ol>\n\n\n\n<p>Kode untuk proyek ini dapat ditemukan&nbsp;<a href=\"https:\/\/github.com\/tadaspetra\/astro-video-call\" target=\"_blank\" rel=\"noreferrer noopener\">di sini<\/a>&nbsp;. Anda dapat mengetahui lebih lanjut tentang panggilan video Agora&nbsp;<a href=\"https:\/\/docs.agora.io\/en\/video-calling\/get-started\/get-started-uikit?platform=reactjs\" target=\"_blank\" rel=\"noreferrer noopener\">di sini<\/a>&nbsp;.<\/p>\n\n\n\n<p>Terima kasih telah membaca!<\/p>\n\n\n\n<p><em><sub>Diterjemahkan dari&nbsp;<a href=\"https:\/\/agora.io\/\">blog agora.io<\/a><\/sub><\/em><\/p>\n\n\n\n<p>V-cube Indonesia sebagai partner Agora siap membantu Anda memberikan solusi dan konsultasi teknis agar Anda dapat secara cepat menggunakan SDK yang disediakan sesuai dengan kebutuhkan Aplikasi Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Astro adalah framework yang menyajikan HTML statis ke situs web Anda tanpa JavaScript kecuali Anda memintanya secara eksplisit dan popularitasnya meningkat pesat. Namun, dapatkah Anda menambahkan panggilan video ke situs web Astro Anda? Jawabannya adalah ya! Artikel ini akan mengajarkan Anda cara melakukannya dengan tepat. Apa yang Akan Kami Gunakan Tentu saja, kita membutuhkan kerangka [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6437,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_jetpack_memberships_contains_paid_content":false,"_joinchat":[],"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[1012,1013,1014],"class_list":["post-6430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-berita","tag-astro","tag-react","tag-reactjs"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membangun Aplikasi Video Call dengan Astro dan ReactJS<\/title>\n<meta name=\"description\" content=\"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vcube.co.id\/en\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membangun Aplikasi Video Call dengan Astro dan ReactJS\" \/>\n<meta property=\"og:description\" content=\"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vcube.co.id\/en\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"V-cube Indonesia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/web.facebook.com\/VcubeID\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/web.facebook.com\/VcubeID\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-11T03:29:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-11T03:55:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"V-cube Indonesia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Membangun Aplikasi Video Call dengan Astro dan ReactJS\" \/>\n<meta name=\"twitter:description\" content=\"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/vcubeid\" \/>\n<meta name=\"twitter:site\" content=\"@VcubeID\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"V-cube Indonesia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/\"},\"author\":{\"name\":\"V-cube Indonesia\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#\\\/schema\\\/person\\\/57487681f118bc59b3c4656f35cd72d9\"},\"headline\":\"Membangun Aplikasi Video Call dengan Astro dan ReactJS\",\"datePublished\":\"2024-12-11T03:29:46+00:00\",\"dateModified\":\"2024-12-11T03:55:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/\"},\"wordCount\":963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\",\"keywords\":[\"Astro\",\"React\",\"ReactJS\"],\"articleSection\":[\"Berita\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/\",\"name\":\"Membangun Aplikasi Video Call dengan Astro dan ReactJS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\",\"datePublished\":\"2024-12-11T03:29:46+00:00\",\"dateModified\":\"2024-12-11T03:55:13+00:00\",\"description\":\"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\",\"contentUrl\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Membangun aplikasi Video call dengan Astro dan ReactJS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vcube.co.id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membangun Aplikasi Video Call dengan Astro dan ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#website\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/\",\"name\":\"V-cube Indonesia\",\"description\":\"Solusi Lengkap untuk komunikasi Visual dan LMS\",\"publisher\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vcube.co.id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#organization\",\"name\":\"V-cube Indonesia\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/v-cube-beyond-telework.png\",\"contentUrl\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/v-cube-beyond-telework.png\",\"width\":250,\"height\":71,\"caption\":\"V-cube Indonesia\"},\"image\":{\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/web.facebook.com\\\/VcubeID\\\/\",\"https:\\\/\\\/x.com\\\/VcubeID\",\"https:\\\/\\\/www.instagram.com\\\/vcubeid\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/#\\\/schema\\\/person\\\/57487681f118bc59b3c4656f35cd72d9\",\"name\":\"V-cube Indonesia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/cropped-aboutvcube-96x96.jpg\",\"url\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/cropped-aboutvcube-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/vcube.co.id\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/cropped-aboutvcube-96x96.jpg\",\"caption\":\"V-cube Indonesia\"},\"description\":\"V-cube Indonesia provides cutting edge training and business communication platform\",\"sameAs\":[\"https:\\\/\\\/vcube.co.id\",\"https:\\\/\\\/web.facebook.com\\\/VcubeID\",\"https:\\\/\\\/www.instagram.com\\\/vcubeid\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/pt--v-cube-indonesia\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/vcubeid\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCOIbbMPdIvCkItAYB2xcXaQ?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/vcube.co.id\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membangun Aplikasi Video Call dengan Astro dan ReactJS","description":"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vcube.co.id\/en\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"Membangun Aplikasi Video Call dengan Astro dan ReactJS","og_description":"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.","og_url":"https:\/\/vcube.co.id\/en\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/","og_site_name":"V-cube Indonesia","article_publisher":"https:\/\/web.facebook.com\/VcubeID\/","article_author":"https:\/\/web.facebook.com\/VcubeID","article_published_time":"2024-12-11T03:29:46+00:00","article_modified_time":"2024-12-11T03:55:13+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","type":"image\/jpeg"}],"author":"V-cube Indonesia","twitter_card":"summary_large_image","twitter_title":"Membangun Aplikasi Video Call dengan Astro dan ReactJS","twitter_description":"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.","twitter_image":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","twitter_creator":"@https:\/\/twitter.com\/vcubeid","twitter_site":"@VcubeID","twitter_misc":{"Written by":"V-cube Indonesia","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#article","isPartOf":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/"},"author":{"name":"V-cube Indonesia","@id":"https:\/\/vcube.co.id\/#\/schema\/person\/57487681f118bc59b3c4656f35cd72d9"},"headline":"Membangun Aplikasi Video Call dengan Astro dan ReactJS","datePublished":"2024-12-11T03:29:46+00:00","dateModified":"2024-12-11T03:55:13+00:00","mainEntityOfPage":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/"},"wordCount":963,"commentCount":0,"publisher":{"@id":"https:\/\/vcube.co.id\/#organization"},"image":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","keywords":["Astro","React","ReactJS"],"articleSection":["Berita"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/","url":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/","name":"Membangun Aplikasi Video Call dengan Astro dan ReactJS","isPartOf":{"@id":"https:\/\/vcube.co.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","datePublished":"2024-12-11T03:29:46+00:00","dateModified":"2024-12-11T03:55:13+00:00","description":"Artikel ini membahas tentang bagaimana cara membangun Aplikasi Video Call dengan Astro dan ReactJS. Kami menggunakan Agora SDK untuk bagian Video Call.","breadcrumb":{"@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#primaryimage","url":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","contentUrl":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","width":1280,"height":720,"caption":"Membangun aplikasi Video call dengan Astro dan ReactJS"},{"@type":"BreadcrumbList","@id":"https:\/\/vcube.co.id\/membangun-aplikasi-video-call-dengan-astro-dan-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vcube.co.id\/"},{"@type":"ListItem","position":2,"name":"Membangun Aplikasi Video Call dengan Astro dan ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/vcube.co.id\/#website","url":"https:\/\/vcube.co.id\/","name":"V-cube Indonesia","description":"Solusi Lengkap untuk komunikasi Visual dan LMS","publisher":{"@id":"https:\/\/vcube.co.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vcube.co.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/vcube.co.id\/#organization","name":"V-cube Indonesia","url":"https:\/\/vcube.co.id\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vcube.co.id\/#\/schema\/logo\/image\/","url":"https:\/\/vcube.co.id\/wp-content\/uploads\/2021\/01\/v-cube-beyond-telework.png","contentUrl":"https:\/\/vcube.co.id\/wp-content\/uploads\/2021\/01\/v-cube-beyond-telework.png","width":250,"height":71,"caption":"V-cube Indonesia"},"image":{"@id":"https:\/\/vcube.co.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/web.facebook.com\/VcubeID\/","https:\/\/x.com\/VcubeID","https:\/\/www.instagram.com\/vcubeid"]},{"@type":"Person","@id":"https:\/\/vcube.co.id\/#\/schema\/person\/57487681f118bc59b3c4656f35cd72d9","name":"V-cube Indonesia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vcube.co.id\/wp-content\/uploads\/2022\/11\/cropped-aboutvcube-96x96.jpg","url":"https:\/\/vcube.co.id\/wp-content\/uploads\/2022\/11\/cropped-aboutvcube-96x96.jpg","contentUrl":"https:\/\/vcube.co.id\/wp-content\/uploads\/2022\/11\/cropped-aboutvcube-96x96.jpg","caption":"V-cube Indonesia"},"description":"V-cube Indonesia provides cutting edge training and business communication platform","sameAs":["https:\/\/vcube.co.id","https:\/\/web.facebook.com\/VcubeID","https:\/\/www.instagram.com\/vcubeid","https:\/\/www.linkedin.com\/company\/pt--v-cube-indonesia\/","https:\/\/x.com\/https:\/\/twitter.com\/vcubeid","https:\/\/www.youtube.com\/channel\/UCOIbbMPdIvCkItAYB2xcXaQ?sub_confirmation=1"],"url":"https:\/\/vcube.co.id\/en\/author\/admin\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/vcube.co.id\/wp-content\/uploads\/2024\/12\/Membangun-aplikasi-Video-call-dengan-Astro-dan-ReactJS.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pbtsIP-1FI","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/posts\/6430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/comments?post=6430"}],"version-history":[{"count":8,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/posts\/6430\/revisions"}],"predecessor-version":[{"id":6450,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/posts\/6430\/revisions\/6450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/media\/6437"}],"wp:attachment":[{"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/media?parent=6430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/categories?post=6430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vcube.co.id\/en\/wp-json\/wp\/v2\/tags?post=6430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}