1対1音声通話
1対1音声通話を実装するサンプルコードです。
前提条件
開始する前に、次の作業が必要です。
- PlanetKitを初期化してください。
- この例では、発信者と受信者の両方に対して通話インスタンスが
planetKitで初期化されたと仮定しています。
- この例では、発信者と受信者の両方に対して通話インスタンスが
- 適切なアクセストークンを取得してください。
- 1対1通話フローにて、APIを使用するための全般的なプロセスを確認してください。
1対1音声通話実装時の考慮事項
受信者側で通話の通知を受けるには、通知用のシステムを実装するか、APNs（Apple Push Notification service）またはFCM（Firebase Cloud Messaging）といった外部のプッシュ通知システムを連携する必要があります。
また、受信者にどのような情報を伝えるべきかを知っておく必要があります。アプリサーバーの役割でアプリケーションが転送すべきデータであるcc_paramについて確認できます。
makeCall()またはverifyCall()に失敗すると、MakeCallParams.delegateまたはVerifyCallParams.delegateのevtDisconnectedイベントで失敗の原因を把握できます。切断理由について詳しくは、通話切断の理由を参照してください。
動作する全体のソースコードは、デモアプリのソースコードで確認できます。
共通 - ビューの実装
発信者と受信者それぞれに対してUIを表示するためのビューを実装します。
<html>
<div id="my-call-view">
<video id="my-video" muted autoplay playsinline></video>
</div>
<div id="peer-call-view">
<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>
発信側 - 通話の作成
MakeCallParamsオブジェクトを作成します。音声通話を作成するためにmediaTypeを'audio'に設定してください。
const callMakeParams = {
myId: 'MY_ID',
myServiceId: 'MY_SERVICE_ID',
peerId: 'PEER_ID',
peerServiceId: 'PEER_SERVICE_ID',
accessToken: 'ACCESS_TOKEN',
mediaType: 'audio',
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) => {}
}
};
通話を作成するには、MakeCallParamsオブジェクトを引数でmakeCall()を呼び出してください。
planetKit.makeCall(callMakeParams);
受信側 - 通話通知の受信
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()を呼び出してください。
function callVerify(notifyParams) {
// Set callVerifyParams based on information of notifyParams received from the app server
const callVerifyParams = {
myId: notifyParams.app_callee_uid,
myServiceId: notifyParams.app_callee_sid,
mediaType: notifyParams.app_call_type, // 'audio'
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(callVerifyParams);
}
受信側 - 通話の応答
ピアとのセッション接続に成功したら、ウェブクライアントはVerifyCallParamsのdelegateに設定されたevtVerifiedを実行します。evtVerifiedイベントを受けた後、acceptCall()を呼び出して通話に応答します。
planetKit.acceptCall();