Loading...

2024-05-21(火) 16:00

🎤 LiveKitのアカウント作成とNext.jsのサンプルアプリを動かす

LiveKitNext.js
ライブ配信やWeb会議機能を簡単に実装できるLiveKitのアカウント作成とNext.jsを使ったサンプルアプリを動かすまでの手順をまとめます。

目次

前提と注意事項

この記事では以下を前提としています。

  • Next.js を実行できる環境があることを前提とします。
  • npm, pnpm, yarn などのパッケージマネージャが利用できることを前提とします。

この記事のゴール

この記事では、LiveKit のアカウントを作成し、Next.js を使った Zoom のようなサンプルアプリを動かすまでの手順をまとめます。 以下が LiveKit の公式サイトになります。

LiveKit

The Realtime Cloud. Build and scale voice and video applications.

livekit.io

また、実際に動かすサンプルアプリのリポジトリは以下になります。以下に動作イメージ画像も掲載されています。

livekit-examples / meet

Open source video conferencing app built on LiveKit Components, LiveKit Cloud, and Next.js.

github.com

LiveKit のアカウントを作成する

LiveKit の公式サイトから、Try LiveKitをクリックします。以下のように表示されますので、Google アカウントか GitHub、もしくは GitLab アカウントを選択して進みます。

LiveKitのサインインページ

アカウント登録すると、以下のように表示されますので、利用規約とポリシーを確認し、問題なければContinueをクリックして進みます。

利用規約への同意

CONTINUEをクリックすると、以下のようにCreate your first appと表示されるので、LiveKit を使用するプロジェクト名を適当に入力します。ここではMy web app としました。

プロジェクト名の入力

CONTINUEをクリックすると以下のように表示され、いくつかの質問に答える必要があります。

プロジェクトについての質問

質問は記事執筆時点では以下の内容でした。

1. How big is your company?
所属企業の従業員数についての質問です。ここでは、自分のみとしてJust meを選択しました。

2. What kind of application are you building with LiveKit?
LiveKit を使用しているアプリケーションの種類についての質問です。ここでは、Web 会議機能を試すためVideo Conferenceingを選択しました。

3. Are you (considering) switching to LiveKit from another audio/video provider?
他のサービスから LiveKit に切り替えるかどうかについての質問です。ここでは、Noを選択しました。Yesの場合は、どのサービスを使用していたかを入力する欄が表示されます。

4. Why did you choose to use LiveKit? (Select all that apply)
LiveKit を選択した理由についての質問です。Easy of useとOpen sourceを選択しましたが、適当なものを選択してください。

5. How did you find out about us?
LiveKit を知った経緯についての質問です。Search engineを選択しましたが、適当なものを選択してください。

最後にFinishをクリックすれば以下のようにダッシュボード画面が表示されます。

LiveKitのダッシュボード画面

以上で LiveKit のアカウント作成が完了しました。続いて自身のアプリで LiveKit を使用するための API キー作成を行います。

API キーを作成する

SettingsページのKEYSタブの中にあるADD NEW KEYボタンをクリックします。

APIキーの設定画面

以下のように表示されるので、後で何用のキーであるかわかるように DESCRIPTION(キーの説明)を入力してGENERATE をクリックします。

APIキーの作成画面

すると以下のように WEBSOCKET URL、API KEY、SECRET KEYが表示されます。 なお、これは一度しか表示できず、紛失すると再度新しく作成しなおす必要があります。

作成したAPIキーの内容

これで LiveKit のアカウント作成と API キーの作成が完了しました。次に、Next.js を使ったサンプルアプリを動かす手順を説明します。

Next.js を使ったサンプルアプリを動かす

試しに LiveKit が公式に公開している Web 会議アプリを動かしてみます。 Web 会議アプリのサンプルコードはこちらで公開されています。 まずこのリポジトリをクローンします。

サンプルコードのクローン
$ git clone https://github.com/livekit-examples/meet.git

クローンしたmeetディレクトリに移動して、以下のコマンドを実行します。

依存パッケージのインストール
$ cd meet
$ pnpm install

次に、.env.localファイルを作成し、以下の内容を記述します。以下のLIVEKIT_API_KEY、LIVEKIT_API_SECRET、LIVEKIT_URL、は先ほど作成した API キーの内容を記述します。

.env.local
# 1. Copy this file and rename it to .env.local
# 2. Update the enviroment variables below.
 
# API key and secret. If you use LiveKit Cloud this can be generated via the cloud dashboard.
LIVEKIT_API_KEY=As923kAK8dJ
LIVEKIT_API_SECRET=aska903mAJKau3naA78rfmwioj80a
 
# URL pointing to the LiveKit server.
LIVEKIT_URL=wss://your-livekit-subdomain.livekit.cloud
 
## PUBLIC
NEXT_PUBLIC_LK_TOKEN_ENDPOINT=/api/token
# Uncomment settings menu when using a LiveKit Cloud, it'll enable Krisp noise filters.
# NEXT_PUBLIC_SHOW_SETTINGS_MENU=true
# Optional, to pipe logs to datadog
# NEXT_PUBLIC_DATADOG_CLIENT_TOKEN=client-token
# NEXT_PUBLIC_DATADOG_SITE=datadog-site

.env.localファイルを作成したら、以下のコマンドを実行してサンプルアプリを起動します。

サンプルアプリの起動
$ pnpm dev

デフォルトではhttp://localhost:3000で起動したアプリにアクセスできます。

まとめ

LiveKit のアカウント作成とサンプルアプリを動かすまでの手順をまとめました。LiveKit はドキュメントも豊富で Next.js 以外にも Swift や Kotlin、Flutter などの言語やフレームワークにも対応しているので、モバイルアプリも作りやすい印象です。 弊社では LiveKit を使ったライブ配信機能や Web 会議機能を持つアプリケーションの開発も行っておりますので、ご興味のある方やご検討中の方はお気軽にお問い合わせください。