前提と注意事項

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

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

この記事のゴール

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

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

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

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

アカウント登録すると、以下のように表示されますので、利用規約とポリシーを確認し、問題なければ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 を使用するための API キー作成を行います。

API キーを作成する

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

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

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

これで 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 キーの内容を記述します。

# 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 会議機能を持つアプリケーションの開発も行っておりますので、ご興味のある方やご検討中の方はお気軽にお問い合わせください。