グループビデオ通話を始める
WebPlanetKitを使用すると、1対1通話またはグループ通話の音声およびビデオ通話機能をアプリに連携できます。このガイドでは、Webアプリでグループビデオ通話の実装を開始する方法について説明します。
より迅速な開発のために、クイックスタートに基づいてアプリを実装できます。
前提条件
- 使用しているシステムがシステム要件を満たしていることを確認してください。
- API keyを作成してください。詳しくは、開発環境を参照してください。
- アクセストークンを作成するアプリサーバーコードを実装してください。詳しくは、アクセストークン作成方法を参照してください。
- Node.jsをインストールしてください。
- 現在サポートしているWebブラウザの仕様は次のとおりです。必要に応じてWebブラウザをインストールするか、バージョンをアップグレードしてください。
- Chromium 72+ベースのブラウザ
- Safari 16.4+（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：'video'mediaHtmlElement：再生するメディアのDOM要素myVideo：ビデオが再生される<video>要素roomAudio：音声が再生される<audio>要素
delegate：ConferenceDelegateを採用し、準拠するイベントデリゲート（delegate）evtConnected：通話が接続されたときに発生するイベントevtDisconnected：コール接続が終了したときに発生するイベントevtPeerListUpdated：ピアがルームに入ったり出たりしたときに発生するイベントevtPeersVideoUpdated：ピアのビデオが有効または無効になっているときに発生するイベント
<!-- Example of media elements for group video call -->
<html>
<div>
<video id="my-video" muted autoplay playsinline></video>
<audio id="room-audio" autoplay></audio>
</div>
</html>
<script>
const myVideoElement = document.getElementById('my-video');
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 onEvtPeersVideoUpdated = (peersVideoUpdatedParam) => {
// Triggered when the video status of one or more peers are changed.
// 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: 'video',
mediaHtmlElement: {
myVideo: myVideoElement,
roomAudio: roomAudioElement
},
delegate: {
evtConnected: onEvtConnected,
evtDisconnected: onEvtDisconnected,
evtPeerListUpdated: onEvtPeerListUpdated,
evtPeersVideoUpdated: onEvtPeersVideoUpdated
}
};
/* 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ブラウザにマイクとカメラの権限を要求するポップアップウィンドウが表示され、権限を許可することで通話が可能になります。
ピアビデオのリクエストと削除
ピアのビデオを要求するには、ConferenceRequestPeerVideoParamsを引数としてrequestPeerVideoを呼び出します。リクエストしたピアのビデオを削除するには、userIdを引数としてremovePeerVideoを呼び出します。
以下の例は、ピアがルームに参加または退出してイベントが発生したときにイベントハンドラでピアのビデオをリクエストまたは削除する例です。
<!-- Example of peer's video element -->
<html>
<div>
<video id="peer-video-1" muted autoplay playsinline></video>
</div>
</html>
function requestPeerVideo(userId) {
const requestPeerVideoParams = {
userId: userId,
resolution: 'vga',
videoViewElement: document.getElementById('peer-video-1')
};
planetKit.requestPeerVideo(requestPeerVideoParams)
.then(() => {
// Peer video requested successfully.
})
.catch((error) => {
// Failed to request peer video.
});
}
function removePeerVideo(userId) {
planetKit.removePeerVideo(userId)
.then(() => {
// Peer video removed successfully.
})
.catch((error) => {
// Failed to remove peer video.
});
}
// Called when the list of peers is updated.
// This handler is registered as the delegate of conferenceParams.
const onEvtPeerListUpdated = (conferencePeerUpdatedParam) => {
const { addedPeers, removedPeers } = conferencePeerUpdatedParam;
// Request video for newly added peers.
addedPeers.forEach((peerInfo) => {
if (peerInfo.videoState === VIDEO_STATE.ENABLED) {
requestPeerVideo(peerInfo.userId);
}
});
// Remove video for peers that left.
removedPeers.forEach((peerInfo) => {
if (peerInfo.videoRequested) {
removePeerVideo(peerInfo.userId);
}
});
};
次のステップ
WebPlanetKitが提供するさまざまな機能と各機能の詳細については、以下のドキュメントを参照してください。