グループ通話を始める
WebPlanetKitを使用すると、1対1通話またはグループ通話の音声およびビデオ通話機能をアプリに連携できます。このガイドでは、ウェブアプリでグループ音声通話の実装を開始する方法について説明します。
より迅速な開発のために、クイックスタートに基づいてアプリを実装できます。
前提条件
- お使いのシステムがシステム要件を満たしていることを確認してください。
- API keyを生成します。詳細については、開発環境を参照してください。
- アクセストークンを作成するアプリサーバーコードを実装します。詳細については、アクセストークンの作成方法を参照してください。
- 現在サポートしているWebブラウザの仕様は次のとおりです。必要に応じてWebブラウザをインストールするか、バージョンをアップグレードしてください。
- Chromium 72+ベースのブラウザ
- Safari 14.5+（beta）
SDKのインストール
WebPlanetKit SDKは2つの方法でインストールできます。
WebPlanetKitは、開発環境に応じて異なるライブラリファイルを提供します。テスト用の環境ではplanetKit.eval.js、実際のサービス用の環境ではplanetKit.jsを使用してください。
npmまたはyarnでインストールする
以下の方法でnpmまたはYarnを使ってSDKをインストールします。
# npm
npm install @line/planet-kit
# yarn
yarn add @line/planet-kit
インストール後は、ご利用の環境に合わせてSDKをご利用します。
-
本番用環境
import * as PlanetKit from "@line/planet-kit"; -
テスト用環境
import * as PlanetKit from "@line/planet-kit/dist/planet-kit-eval";
Gitからダウンロードして<script>タグとして含める
npmまたはYarnとしてインストールするのではなく、Gitリポジトリのdistディレクトリからダウンロードし、<script>タグを使用してWebPlanetKit SDKをコードに直接含める方法としても使用できます。
各環境に合わせてファイルをダウンロードしたら、以下のように<script>タグを使用してSDKをコードに含めます。
-
本番用環境
<script type="text/javascript" src="path/to/js/planet-kit.js"></script> -
テスト用環境
<script type="text/javascript" src="path/to/js/planet-kit-eval.js"></script>
上記のようにSDKを組み込んだら、以下のように使用します。
<script type="text/javascript">
const planetKit = new PlanetKit.Conference();
</script>
SDKの初期化
WebPlanetKit APIを呼び出す前に、SDKを初期化する必要があります。WebPlanetKitには、1対1通話用とグループ通話（カンファレンス）用の2つのインスタンスがあります。各インスタンスは設定情報を引数としてPlanetKit.Call()とPlanetKit.Conference()を呼び出して生成し、このとき適切なログレベルも一緒に設定できます。
グループ通話を使用するには、次のようにSDKを初期化します。
import * as PlanetKit from "@line/planet-kit";
const config = {
logLevel: 'log'
}
const planetKit = new PlanetKit.Conference(config);
アクセストークンの取得
クライアントアプリでアプリサーバーにアクセストークンの作成をリクエストしてアクセストークンを取得します。
joinConference()を呼び出すたびに、新しいアクセストークンを取得して使用する必要があります。
グループ音声通話に参加
グループ音声通話に参加するには、次の引数でjoinConference()を呼び出します。
- 以下の属性を含む
ConferenceParamsオブジェクトmyId：ローカルユーザーのユーザーIDmyServiceId：ローカルユーザーのサービスIDroomId：ルームIDroomServiceId：ルームのサービスIDaccessToken：アクセストークンmediaType：'audio'mediaHtmlElement：再生するメディアのDOM要素roomAudio：音声が再生される<audio>要素delegate：ConferenceDelegateを採用し、準拠するイベントデリゲート（delegate）evtConnected：通話が接続されたときに発生するイベントevtDisconnected：コール接続が終了したときに発生するイベントevtPeerListUpdated：ピアがルームに入ったり出たりしたときに発生するイベント
/* Example of an audio element for roomAudio */
<html>
<div>
<audio id="room-audio" autoplay></audio>
</div>
</html>
<script>
const roomAudioElement = document.getElementById('room-audio');
</script>
/* Prepares a conferenceParams */
const onEvtConnected = () => {
// This is called when the call is connected.
// Write your own code here.
};
const onEvtDisconnected = (disconnectedParam) => {
// This is called when the call is disconnected.
// Write your own code here.
};
const onEvtPeerListUpdated = (conferencePeerUpdatedParam) => {
// This is called when the list of peers is updated.
// Write your own code here.
};
const conferenceParams = {
myId: "MY_ID",
myServiceId: "MY_SERVICE_ID",
roomId: "ROOM_ID",
roomServiceId: "ROOM_SERVICE_ID",
accessToken: "ACCESS_TOKEN",
mediaType: "audio",
mediaHtmlElement: {
roomAudio: roomAudioElement,
},
delegate: {
evtConnected: onEvtConnected,
evtDisconnected: onEvtDisconnected,
evtPeerListUpdated: onEvtPeerListUpdated
}
};
/* Joins conference */
planetKit.joinConference(conferenceParams)
.then(() => {
// Successfully joined a conference
})
.catch((joinConferenceError) => {
// Failed to join a conference
// joinConferenceError.reason: START_FAIL_REASON
// joinConferenceError.message: A descriptive message about the failure.
});
- ユーザーがクライアントアプリからグループ通話ルームに参加するにはルームIDが必要なので、アプリケーションで定義した通信チャネルを通じてルームIDを他のユーザーと共有する必要があります。
- 通話に接続すると、Webブラウザからマイクの権限を要求するポップアップウィンドウが表示され、ユーザーが許可を許可する必要があります。
次のステップ
WebPlanetKitが提供するさまざまな機能と各機能の詳細については、以下のドキュメントを参照してください。