agoraとNext.jsで音声と映像を同時双方向通信する機能を実装する

agoraで作成できるもの

zoomのようなオンラインミーティングアプリやポコチャのようなライブ配信アプリを作成できます。（開発中は月10,000分まで無料で使えます）

本記事で作成するもの

zoomに近いです。特定のルームに入ることでそのルームにいる人とコミュニケーションが取れるアプリです。
GitHubはこちら→https://github.com/kaitokosuge/nextjs-agorasdk-sample

Next.jsの準備

Next.jsの準備をします。現在の安定版はバージョン13のため、13をインストールします。

npx create-next-app@13 videoapp && cd videoapp && npm i next@13

以下を実行することでサーバーを起動し、Next.jsのいつものページが表示されていたら完了です。

npm run dev

agora sdkの準備

npm i agora-react-uikit

以下の公式ページにセットアップ内容があるため、これに従います。
https://jp.vcube.com/sdk/trial

Next.jsでの実装の際に必要なのは下記画像の「App ID」になるため安全な場所で保管しておきましょう。

トップページ実装

部屋の選択が可能です。

page.tsx

import Link from "next/link";

export default function Home() {
	//ダミーid配列で部屋の種類を管理します。
	const roomIds = [1, 2, 3, 4, 5];
	return (
		<main className="p-10">
			<p className="font-bold">部屋を選択してください</p>
			{roomIds.map((id: number) => (
				<div key={id} className="mt-10">
					<Link href={`/room/${id}`}>部屋{id}</Link>
				</div>
			))}
		</main>
	);
}

ミーティング部屋ページの実装

オンラインミーティングが可能です。
roomフォルダに[id]フォルダを作成し、その中にpage.tsxを作成します。

page.tsx

"use client";
import React, { useState } from "react";
import AgoraUIKit, { layout } from "agora-react-uikit";
import { useParams } from "next/navigation";

export default function Video() {
	const params = useParams();
	const roomId = params.id;
	const [videoCall, setVideoCall] = useState(true);
	const rtcProps = {
		appId: appidを入れてください。,
		channel: `${roomId}`,
		token: null,
		layout: layout.grid,
	};
	const callbacks = {
		EndCall: () => setVideoCall(false),
	};
	return (
		<div>
			<div>
				<h1>room {roomId}</h1>
			</div>
			{videoCall ? (
				<div style={{ display: "flex", width: "100vw", height: "100vh" }}>
					<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
				</div>
			) : (
				<h3 onClick={() => setVideoCall(true)}>Start Call</h3>
			)}
		</div>
	);
}

参考資料になります。
https://github.com/AgoraIO-Community/VideoUIKit-Web-React
以上です。