본문으로 건너뛰기
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() 호출에 실패한 경우, 아래 두 경우로 나눠 실패 원인을 확인할 수 있습니다.

  • 통화 연결 시도 시 실패하는 경우
    • 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은 웹 푸시 알림 방식 중 하나입니다. 다음은 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() 호출에 실패한 경우 아래 두 경우로 나눠 실패 원인을 확인할 수 있습니다.

  • 통화 연결 시도 시 실패하는 경우
    • 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();

관련 예제 코드​

관련 문서​