WebRTCと電話とのカンファレンス通話

{
    "callId":"aj7l1046nhcs2p47e9cg3po5l1e0nilcibbs6qhefirk-3",
    "timestamp":"2025-11-30T14:19:17.465Z",
    "callsConfigurationId":"CALLS_CONFIGURATION_TEST",
    "platform":{
        "applicationId":"webrtc-test-app"
    },
    "properties":{
        "call":{
            "id":"aj7l1046nhcs2p47e9cg3po5l1e0nilcibbs6qhefirk-3",
            "endpoint":{
                "phoneNumber":"818011111111",
                "type":"PHONE"
            },
            "from":"818011111111",
            "to":"815022222222",
            "direction":"INBOUND",
            "state":"CALLING",
            "media":{
                "audio":{
                    "muted":false,
                    "userMuted":false,
                    "deaf":false
                },
                "video":{
                    "camera":false,
                    "screenShare":false,
                    "blind":false
                }
            },
            "startTime":"2025-11-30T14:19:17.482Z",
            "ringDuration":0,
            "callsConfigurationId":"CALLS_CONFIGURATION_TEST",
            "platform":{
                "applicationId":"webrtc-test-app"
            },
            "customData":{}
        },
        "apiBaseUrl":"https://ibapi.nttcpaas.com"
    },
    "type":"CALL_RECEIVED"
}

{
  "callId": "bvmr1046nhcs2p47e9cg3po5l1e0nilcibbs6qher2r9100",
  "timestamp": "2025-12-03T01:18:39.623Z",
  "callsConfigurationId": "CALLS_CONFIGURATION_TEST",
  "platform": {
    "applicationId": "webrtc-test-app"
  },
  "properties": {
    "callLog": {
      "callId": "bvmr1046nhcs2p47e9cg3po5l1e0nilcibbs6qher2r9100",
      "endpoint": {
        "phoneNumber": "818011111111",
        "type": "PHONE"
      },
      "from": "818011111111",
      "to": "815022222222",
      "direction": "INBOUND",
      "state": "CANCELLED",
      "startTime": "2025-12-03T01:18:32.176Z",
      "endTime": "2025-12-03T01:18:39.623Z",
      "ringDuration": 0,
      "callsConfigurationIds": [],
      "platform": {
        "applicationId": "webrtc-test-app"
      },
      "conferenceIds": [],
      "duration": 0,
      "hasCameraVideo": false,
      "hasScreenshareVideo": false,
      "errorCode": {
        "id": 10202,
        "name": "CANCELLED",
        "description": "The user cancelled the call"
      },
      "customData": {},
      "hangupSource": "ENDPOINT"
    }
  },
  "type": "CALL_FAILED"
}

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();

{
  "id": "034e622a-cc7e-456d-8a10-0ba43b11aa5e",
  "name": "test_room",
  "participants": [
    {
      "callId": "string",
      "endpoint": {
        "phoneNumber": "818011111111",
        "type": "PHONE"
      },
      "state": "JOINING",
      "joinTime": "2019-08-24T14:15:22Z",
      "leaveTime": "2019-08-24T14:15:22Z",
      "media": {
        "audio": {
          "muted": true,
          "userMuted": true,
          "deaf": true
        },
        "video": {
          "camera": true,
          "screenShare": true,
          "blind": true
        }
      },
      "role": {
        "type": "DEFAULT"
      }
    }
  ],
  "callsConfigurationId": "dc5942707c704551a00cd2ea",
  "platform": {
    "entityId": "string",
    "applicationId": "string"
  }
}

{
    "conference": {
        "id": "0c38b792-8949-4dd9-9a33-ce02014f7bd3",
        "name": "test_room",
        "participants": [
            {
                "callId": "2fbf5875-362d-4936-8a1b-11845384299d",
                "endpoint": {
                    "type": "WEBRTC",
                    "identity": "webrtc-caller",
                    "displayName": "webrtc-user"
                },
                "state": "JOINED",
                "joinTime": "2026-07-27T19:47:05.342+0000",
                "media": {
                    "audio": {
                        "muted": false,
                        "userMuted": false,
                        "deaf": false
                    },
                    "video": {
                        "camera": false,
                        "screenShare": false,
                        "blind": false
                    }
                },
                "role": {
                    "type": "DEFAULT"
                }
            },
            {
                "callId": "b2cae37b-2833-48d8-aafc-c0ecc0decba7",
                "endpoint": {
                    "type": "PHONE",
                    "phoneNumber": "818011111111"
                },
                "state": "JOINING",
                "media": {
                    "audio": {
                        "muted": false,
                        "userMuted": false,
                        "deaf": false
                    },
                    "video": {
                        "camera": false,
                        "screenShare": false,
                        "blind": false
                    }
                },
                "role": {
                    "type": "DEFAULT"
                }
            }
        ],
        "callsConfigurationId": "WEBRTC"
    },
    "call": {
        "id": "b2cae37b-2833-48d8-aafc-c0ecc0decba7",
        "endpoint": {
            "type": "PHONE",
            "phoneNumber": "818011111111"
        },
        "from": "815022222222",
        "to": "818011111111",
        "direction": "OUTBOUND",
        "state": "CALLING",
        "media": {
            "audio": {
                "muted": false,
                "userMuted": false,
                "deaf": false
            },
            "video": {
                "camera": false,
                "screenShare": false,
                "blind": false
            }
        },
        "startTime": "2026-07-27T19:47:29.325+0000",
        "ringDuration": 0,
        "callsConfigurationId": "WEBRTC"
    }
}

<!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="room-name-input" placeholder="ルーム名を入力" style="width: 300px;">
        <button id="start-call-btn" onclick="startCall()">発信</button>
        <button id="end-call-btn" onclick="endCall()">通話終了</button>
        <button id="end-call-btn" onclick="deleteLog()">ログ削除</button>
        <div id="call-event-area"></div>
    </div>
    <audio id="audio-elm" playsinline autoplay loop muted></audio>
    <script src="./app.js"></script>
</body>
</html>

let infobipRTC = null;
let activeCall = null;

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 roomNameInput = document.getElementById("room-name-input");
const callEventArea = document.getElementById('call-event-area');
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";
    });
}

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

    activeCall = infobipRTC.joinRoom(roomNameInput.value, RoomCallOptions.builder().build());

    setupCall(activeCall);
}

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

    activeCall.leave();
    resetCallState();
}

// 通話開始時の共通処理
function setupCall(call) {
    // UIを「通話中」の状態にする（ボタンや入力を無効化）
    startCallBtn.disabled = true;
    roomNameInput.disabled = true;

    // ルーム入室時のイベント
    call.on(CallsApiEvent.ROOM_JOINED, (e) => {
        console.log(call);
        audioElm.srcObject = e.stream;
        logCallEvent(`ルーム「${roomNameInput.value}」に参加しました。`);
        logCallEvent(`ConferenceID： ${e.id}`);
    });

    // ルーム退出時のイベント
    call.on(CallsApiEvent.ROOM_LEFT, (e) => {
        resetCallState();
        logCallEvent(`ルーム「${roomNameInput.value}」を退出しました。`);
    });

    // 他の参加者のルーム入室時のイベント
    call.on(CallsApiEvent.PARTICIPANT_JOINED, (e) => {
        const endpoint = e.participant.endpoint;
        const endpointName = endpoint.identifier || endpoint.phoneNumber || '匿名ユーザー';
        logCallEvent(`${endpointName} が参加しました。`);
    });

    // 他の参加者のルーム退出時のイベント
    call.on(CallsApiEvent.PARTICIPANT_LEFT, (e) => {
        const endpoint = e.participant.endpoint;
        const endpointName = endpoint.identifier || endpoint.phoneNumber || '匿名ユーザー';
        logCallEvent(`${endpointName} が退出しました。`);
    });
}

// 通話終了時の状態リセット処理
function resetCallState() {
    activeCall = null;
    startCallBtn.disabled = false;
    roomNameInput.disabled = false;
    audioElm.srcObject = null;
}

// 通話ログを記録
function logCallEvent(message) {
    if (!callEventArea) return;
    
    const timestamp = new Date().toLocaleTimeString();
    const p = document.createElement('p');
    p.style.margin = '4px 0';
    p.textContent = `[${timestamp}] ${message}`;
    callEventArea.appendChild(p);
}

// 通話ログをリセット
function deleteLog(){
    if (!callEventArea) return;
    callEventArea.innerHTML = '';
}