グループビデオ通話
グループビデオ通話を実装するサンプルコードです。
前提条件
開始する前に、次の作業が必要です。
- PlanetKitを初期化してください。
- 適切なアクセストークンを取得してください。
- グループ通話フローにて、APIを使用するための全般的なプロセスを確認してください。
オーディオとビデオエレメントの実装
グループビデオ通話で、グループの音声を再生するためのオーディオエレメントと、ビデオ映像を再生するためのビデオエレメントを準備します。
<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>
ローカルユーザーのビデオプレビュー（任意）
WebPlanetKitではユーザーがMediaStreamを簡単に作成し、管理できるMediaStreamManagerを提供します。このMediaStreamManagerを利用することで、ローカルユーザーが通話セッションに関係なく、自分のビデオをプレビューできるビデオプレビュー機能を提供できます。
MediaStreamManagerを活用したビデオプレビューのサンプルコードを見てみましょう。まず、ビデオのプレビュー映像を再生するビデオエレメントを準備します。
<html>
<div>
<video id="preview-video" muted autoplay playsinline></video>
</div>
</html>
MediaStreamManagerを使用して、「preview-video」ビデオエレメントに映像を再生します。
// Init MediaStreamManager
import { MediaStreamManager } from "@line/planetKit";
const mediaStreamManager = new MediaStreamManager();
const previewVideoElement = document.getElementById('preview-video');
// Create media stream with param
const mediaStreamParam = {
videoElement: previewVideoElement
};
const mediaStream = await mediaStreamManager.createMediaStream(mediaStreamParam);
ビデオプレビュー機能で使用したMediaStreamManagerをjoinConference()のConferenceParamsに追加すると、ビデオプレビューのために作成したMediaStreamを通話にも使用できます。
もし、作成したMediaStreamManagerを通話に使用しない場合は、MediaStreamManagerのreleaseMediaStream()を使用して整理します。
グループ通話参加
グループ通話の作成と設定をするためのConferenceParamsオブジェクトを作成します。このサンプルでは、上記のビデオプレビュー機能で作成したMediaStreamManagerを使用します。もし、MediaStreamManagerで作成したMediaStreamを使用しない場合は、mediaStreamManagerを省略します。
const onEvtConnected = () => {
// Triggered when conference join is completed
};
const onEvtDisconnected = (disconnectedParam) => {
// Triggered when the local user leaves the conference
};
const onEvtPeerListUpdated = (peerListUpdatedParam) => {
// Triggered when one or more peers join or leave
};
const onEvtPeersVideoUpdated = (peersVideoUpdatedParam) => {
// Triggered when the video status of one or more peers are changed
};
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: {
// For each of the following, add your own implementation or assign an event handler that matches the signature
evtConnected: onEvtConnected,
evtDisconnected: onEvtDisconnected,
evtPeerListUpdated: onEvtPeerListUpdated,
evtPeersVideoUpdated: onEvtPeersVideoUpdated
},
mediaStreamManager: mediaStreamManager // Optional
};
ConferenceParamsオブジェクトを引数としてjoinConference()を呼び出します。joinConference()呼び出しに失敗した場合、以下の2つのケースに分けて失敗の原因を確認できます。
- 通話参加に失敗した場合
Promise.reject()に返却されるJoinConferenceErrorでSTART_FAIL_REASONを確認して、失敗の原因を把握できます。
- 通話参加後に失敗した場合
- 通話接続後には、
ConferenceParams.delegateのevtDisconnectedイベントを通じて、失敗の原因を確認できます。通話切断の理由に関する詳細は、通話切断の理由を参照してください。
- 通話接続後には、
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.
});
相手のグループ通話への参加と退出確認
相手がグループ通話に参加したり、退出したりすると、ConferenceParams.delegateのevtPeerListUpdatedイベントを通じて確認できます。
// Example function called in the evtPeerListUpdated callback.
const onEvtPeerListUpdated = (peerListUpdatedParam) => {
// Triggered when one or more peers join or leave
const { addedPeers, removedPeers, totalPeersCount } = peerListUpdatedParam;
// Process added peers
addedPeers.forEach(peer => {
console.log(`${peer.userId} is added`);
});
// Process removed peers
removedPeers.forEach(peer => {
console.log(`${peer.userId} is removed`);
});
};
相手のビデオを受信してレンダリング
相手のビデオを受信してレンダリングするには、相手のユーザーIDとリクエストする解像度、ビデオをレンダリングするビデオエレメントを引数としてrequestPeerVideo()を呼び出します。
<html>
<div>
<video id="peer-video" muted autoplay playsinline></video>
</div>
</html>
// Example params to request peer video
const peerVideoElement = document.getElementById('peer-video');
const requestVideoParams = {
userId: 'userId',
resolution: 'vga',
videoViewElement: peerVideoElement
};
// Request the video of peer
planetKit.requestPeerVideo(requestVideoParams)
.then(() => {
// Successfully requested peer's video
})
.catch((error) => {
// Failed to request peer's video
});
相手のビデオをレンダリングするビュー変更
相手のビデオをレンダリングするビデオエレメントを変更するには、相手のユーザーIDと新しいビデオエレメントを引数としてchangePeerView()を呼び出します。このとき、cleanOldElement引数を共に引き渡すと、以前にレンダリングしていたビデオエレメントのビデオが停止され、レンダリングされていたビデオは除去されます。
const newPeerVideoElement = document.getElementById('new-peer-video');
const cleanOldElement = true;
planetKit.changePeerView(userId, newPeerVideoElement, cleanOldElement)
.then(() => {
// Successfully changed peer's view
})
.catch((error) => {
// Failed to change peer's view
});
相手のビデオ受信を中止
相手のビデオ受信を中止するには、相手のユーザーIDを引数としてremovePeerVideo()を呼び出します。
planetKit.removePeerVideo(userId)
.then(() => {
// Successfully removed peer's video
})
.catch((error) => {
// Failed to remove peer's video
});
グループ通話退出
グループ通話から退出するには、leaveConference()を呼び出します。
planetKit.leaveConference();