本文にスキップする
Version: 5.3

1対1音声通話

1対1音声通話を実装するサンプルコードです。

前提条件​

開始する前に、次の作業が必要です。

1対1音声通話実装時の考慮事項​

受信者側で通話の通知を受けるには、通知用システムを実装するか、APNs(Apple Push Notification service)またはFCM(Firebase Cloud Messaging)といった外部プッシュ通知システムを連携する必要があります。

また、受信者にどのような情報を渡すべきかを知っておく必要があります。アプリサーバーの役割にて、アプリケーションが渡すべきデータであるcc_paramについて確認できます。

オーディオエレメントの実装​

発信者と受信者は、それぞれ相手の音声を再生するためのオーディオエレメントを準備します。

<html>
    <div>
        <audio id="peer-audio" autoplay></audio>
    </div>
</html>

<script>
    const peerAudioElement = document.getElementById('peer-audio');
</script>

通話の作成（発信側）​

MakeCallParamsオブジェクトを作成します。

const makeCallParams = {
    myId: 'MY_ID',
    myServiceId: 'MY_SERVICE_ID',
    peerId: 'PEER_ID',
    peerServiceId: 'PEER_SERVICE_ID',
    accessToken: 'ACCESS_TOKEN',
    mediaType: 'audio',
    mediaHtmlElement: {
        peer: {
            audio: peerAudioElement
        }
    },
    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()を呼び出してください。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, "Respond to a call(Callee side)"
});
</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, // 'audio'
        ccParam: notifyParams.cc_param,
        mediaHtmlElement: {
            peer: {
                audio: peerAudioElement
            }
        },
        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();

関連サンプルコード​

関連ドキュメント​