WebRTCと電話との1対1音声通話

npm install infobip-rtc --save

<script src="//rtc.cdn.infobip.com/2.7.0/infobip.rtc.js"></script>

<script src="//rtc.cdn.infobip.com/2/latest/infobip.rtc.js"></script>

curl -L -g -X POST 'https://{baseUrl}/webrtc/1/token' \
-H 'Authorization: {authorization}' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d '{
  "identity": "Alice",
  "displayName": "Alice in Wonderland",
  "timeToLive": 43200
}'

{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZGVudGl0eSI6IkFsaWNlIiwibmFtZSI6IkFsaWNlIGluIFdvbmRlcmxhbmQiLCJleHAiOjE1NzkyOTA2MzgsImNhcHMiOlsyXX0.QyCMqjH8DsftChibW2Rw4EByH-eEviUp3-kHVKuJpKg",
  "expirationTime": "2020-01-17T19:50:38.488589Z"
}

let infobipRTC = createInfobipRtc(token);
infobipRTC.connect();

infobipRTC.disconnect();

infobipRTC.on('incoming-application-call', (incomingApplicationCallEvent) => {
    let incomingCall = incomingApplicationCallEvent.incomingCall;
    incomingCall.accept(ApplicationCallOptions.builder().setAudio(true).build());

    incomingCall.on(CallsApiEvent.ESTABLISHED, (event) => {
        $('#callAudio').srcObject = event.stream;
    });

    incomingCall.on(CallsApiEvent.HANGUP, (event) => {
        console.log(`Call finished. Status: ${event.errorCode.name}`);
        $('#callAudio').srcObject = null;
    });
});

phoneCall.hangup();

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>NTTCPaaS WebRTC</title>
    <script src="//rtc.cdn.infobip.com/2.7.36/infobip.rtc.js"></script>
</head>
<body>
    <div id="connect-field">
        <p>WebRTCトークン</p>
        <input type="text" id="token-input" placeholder="WebRTCトークンを入力" style="width: 300px;">
        <button onclick="connectRTC()">接続</button>
    </div>
    <div id="call-field" style="display: none;">
        <p>電話番号</p>
        <input type="text" id="number-input" placeholder="発信する電話番号をE.164形式で入力" style="width: 300px;">
        <button id="start-call-btn" onclick="startCall()">発信</button>
        <button id="end-call-btn" onclick="endCall()">通話終了</button>
    </div>
    <audio id="audio-elm" playsinline autoplay loop muted></audio>
    <script src="./app.js"></script>
</body>
</html>

let infobipRTC = null;
let activeCall = null;
// 取得した電話番号を入力する（E.164形式で最初の+は省略します）
const fromNumber = "";

const connectField = document.getElementById('connect-field');
const callField = document.getElementById('call-field');

const startCallBtn = document.getElementById('start-call-btn');
const endCallBtn = document.getElementById('end-call-btn');
const numberInput = document.getElementById("number-input");
const audioElm = document.getElementById("audio-elm");


// アプリの初期化
async function connectRTC(){

    // マイク権限取得
    try {
        await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch (e) {
        return;
    }

    audioElm.muted = false;

    // SDKの初期化と接続
    const token = document.getElementById('token-input').value;
    if (!token) return;

    infobipRTC = createInfobipRtc(token);
    infobipRTC.connect();

    infobipRTC.on('connected', (e) => {
        connectField.querySelectorAll('input, button').forEach(element => {
            element.disabled = true;
        });
        callField.style.display = "block";
    });
    
    // 着信イベントのハンドリング
    infobipRTC.on('incoming-application-call', (incomingApplicationCallEvent) => {
        activeCall = incomingApplicationCallEvent.incomingCall;

        if (confirm(`${activeCall.from()}から着信があります`)) {
            activeCall.accept(ApplicationCallOptions.builder().build());
            numberInput.value = activeCall.from();
            setupCall(activeCall);
        } else {
            activeCall.decline();
            activeCall = null;
        } 
    });
}

// 電話に発信
function startCall() {
    if(activeCall || !numberInput.value) return;

    activeCall = infobipRTC.callPhone(numberInput.value, PhoneCallOptions.builder().setFrom(fromNumber).build());

    setupCall(activeCall);
}

// 通話を終了
function endCall() {
    if (!activeCall) return;

    activeCall.hangup();
    resetCallState();
}

// 通話開始時の共通処理
function setupCall(call) {

    // UI を「通話中」の状態にする（ボタンや入力を無効化）
    startCallBtn.disabled = true;
    numberInput.disabled = true;

    // 通話確立時のイベント
    call.on(CallsApiEvent.ESTABLISHED, (e) => {
        audioElm.srcObject = e.stream;
    });

    // 通話切断時（相手が切った場合など）のイベント
    call.on(CallsApiEvent.HANGUP, (e) => {
        resetCallState();
    });
}

// 通話終了時の状態リセット処理
function resetCallState() {
    activeCall = null;

    startCallBtn.disabled = false;
    numberInput.disabled = false;
    audioElm.srcObject = null;
}