1対1ビデオ通話
1対1ビデオ通話を実装するサンプルコードです。
前提条件
開始する前に、次の作業が必要です。
- PlanetKitを初期化してください。
- 適切なアクセストークンを取得してください。
- 1対1通話フローにて、APIを使用するための全般的なプロセスを確認してください。
1対1ビデオ通話実装時の考慮事項
受信者側で通話の通知を受けるには、通知用システムを実装するか、APNs（Apple Push Notification service）またはFCM（Firebase Cloud Messaging）といった外部プッシュ通知システムを連携する必要があります。
また、受信者にどのような情報を渡すべきかを知っておく必要があります。アプリサーバーの役割にて、アプリケーションが渡すべきデータであるcc_paramについて確認できます。
オーディオとビデオエレメントの実装
発信者と受信者は、それぞれ相手の音声を再生するためのオーディオエレメントと、ビデオ映像を再生するためのビデオエレメントを準備します。
<html>
<div>
<video id="my-video" muted autoplay playsinline></video>
</div>
<div>
<audio id="peer-audio" autoplay></audio>
<video id="peer-video" muted autoplay playsinline></video>
</div>
</html>
<script>
const myVideoElement = document.getElementById('my-video');
const peerAudioElement = document.getElementById('peer-audio');
const peerVideoElement = document.getElementById('peer-video');
</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をmakeCall()のMakeCallParamsまたはverifyCall()のVerifyCallParamsに追加すると、ビデオプレビューのために作成したMediaStreamを通話にも使用できます。
もし、作成したMediaStreamManagerを通話に使用しない場合は、MediaStreamManagerのreleaseMediaStream()を使用して整理します。
通話の作成（発信側）
MakeCallParamsオブジェクトを作成します。このサンプルでは、上記のビデオプレビュー機能で作成したMediaStreamManagerを使用します。もし、MediaStreamManagerで作成したMediaStreamを使用しない場合は、mediaStreamManagerを省略します。
const makeCallParams = {
myId: 'MY_ID',
myServiceId: 'MY_SERVICE_ID',
peerId: 'PEER_ID',
peerServiceId: 'PEER_SERVICE_ID',
accessToken: 'ACCESS_TOKEN',
mediaType: 'video',
mediaHtmlElement: {
my: {
video: myVideoElement
},
peer: {
audio: peerAudioElement,
video: peerVideoElement
}
},
delegate: {
// For each of the following, add your own implementation or
// assign an event handler that matches the signature
evtWaitConnected: () => {},
evtConnected: () => {},
evtDisconnected: (disconnectedParam) => {}
},
mediaStreamManager: mediaStreamManager // Optional
};
通話を作成するには、MakeCallParamsオブジェクトを引数としてmakeCall()を呼び出してください。makeCall()呼び出しに失敗した場合、以下の2つのケースに分けて失敗の原因を確認できます。
- 通話接続に失敗した場合
Promise.reject()に返却されるMakeCallErrorでSTART_FAIL_REASONを確認して、失敗の原因を把握できます。
- 通話接続後に失敗した場合
- 通話接続後には、
MakeCallParams.delegateのevtDisconnectedイベントを通じて、失敗の原因を確認できます。通話切断の理由に関する詳細は、通話切断の理由を参照してください。
- 通話接続後には、
planetKit.makeCall(makeCallParams)
.then(() => {
// Successfully made a call
})
.catch((makeCallError) => {
// Failed to make a call
// makeCallError.reason: START_FAIL_REASON
// makeCallError.message: A descriptive message about the failure.
});
通話通知の受信（受信側）
FCMは、ウェブプッシュ通知方法の1つです。次は、CDNを利用したFCM設定の例です。
<html>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-messaging.js"></script>
</html>
<script>
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: 'SAMPLE_API_KEY',
authDomain: 'SAMPLE_AUTH_DOMAIN',
databaseURL: 'SAMPLE_DATABASE_URL',
projectId: 'SAMPLE_PROJECT_ID',
storageBucket: 'SAMPLE_STORAGE_BUCKET',
messagingSenderId: 'SAMPLE_MESSAGING_SENDER_ID',
appId: 'SAMPLE_APP_ID'
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Retrieve a Firebase Messaging object
fcmSample = firebase.messaging();
fcmSample.usePublicVapidKey('SAMPLE_VAPID_KEY');
// Get a web push notification event
fcmSample.onMessage((payload) => {
callVerify(payload.data); // See the next step, "Callee side - Respond to a call"
});
</script>
通話の受信（受信側）
受信者は、プッシュ通知を通じて新しい電話がかかってきたことに気づきます。受信者がプッシュメッセージを受けたら、アプリサーバーで受信した情報に基づいてVerifyCallParamsオブジェクトを作成してください。メッセージからcc_paramをパーシングして、VerifyCallParamsオブジェクトのccParamに設定する必要があります。
通話を受信するには、VerifyCallParamsオブジェクトを引数にしてverifyCall()を呼び出してください。verifyCall()呼び出しに失敗した場合、以下の2つのケースに分けて失敗の原因を確認できます。
- 通話接続に失敗した場合
Promise.reject()に返却されるVerifyCallErrorでSTART_FAIL_REASONを確認して、失敗の原因を把握できます。
- 通話接続後に失敗した場合
- 通話接続後には、
VerifyCallParams.delegateのevtDisconnectedイベントを通じて、失敗の原因を確認できます。通話切断の理由に関する詳細は、通話切断の理由を参照してください。
- 通話接続後には、
function callVerify(notifyParams) {
// Set verifyCallParams based on information of notifyParams received from the app server
const verifyCallParams = {
myId: notifyParams.app_callee_uid,
myServiceId: notifyParams.app_callee_sid,
mediaType: notifyParams.app_call_type, // 'video'
ccParam: notifyParams.cc_param,
mediaHtmlElement: {
my: {
video: myVideoElement
},
peer: {
audio: peerAudioElement,
video: peerVideoElement
}
},
delegate: {
// For each of the following, add your own implementation or
// assign an event handler that matches the signature
evtVerified: (callVerifiedParams) => {},
evtConnected: () => {},
evtDisconnected: (disconnectedParam) => {},
}
}
planetKit.verifyCall(verifyCallParams)
.then(() => {
// Successfully verified a call
})
.catch((verifyCallError) => {
// Failed to verify a call
// verifyCallError.reason: START_FAIL_REASON
// verifyCallError.message: A descriptive message about the failure.
});
}
通話の応答（受信側）
ピアとのセッション接続に成功すると、ウェブクライアントはVerifyCallParamsのdelegateに設定されたevtVerifiedを実行します。evtVerifiedイベントを受けた後、acceptCall()を呼び出して通話を受信します。
planetKit.acceptCall()
.then(() => {
// Successfully accepted a call
})
.catch((error) => {
// Failed to accept a call
});
通話の切断
通話を切断するには、endCall()を呼び出します。
planetKit.endCall();