examples/hfp_gateway.html

<html data-bs-theme="dark">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://unpkg.com/pcm-player"></script>
</head>

<body>
    <nav class="navbar navbar-dark bg-primary">
        <div class="container">
            <span class="navbar-brand mb-0 h1">Bumble HFP Audio Gateway</span>
        </div>
    </nav>
    <br>

    <div class="container">

        <label class="form-label">Send AT Response</label>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="AT Response" aria-label="AT response" id="at_response">
            <button class="btn btn-primary" type="button"
                onclick="send_at_response(document.getElementById('at_response').value)">Send</button>
        </div>

        <div class="row">
            <div class="col-3">
                <label class="form-label">Speaker Volume</label>
                <div class="input-group mb-3 col-auto">
                    <input type="text" class="form-control" placeholder="0 - 15" aria-label="Speaker Volume"
                        id="speaker_volume">
                    <button class="btn btn-primary" type="button"
                        onclick="send_at_response(`+VGS: ${document.getElementById('speaker_volume').value}`)">Set</button>
                </div>
            </div>
            <div class="col-3">
                <label class="form-label">Mic Volume</label>
                <div class="input-group mb-3 col-auto">
                    <input type="text" class="form-control" placeholder="0 - 15" aria-label="Mic Volume"
                        id="mic_volume">
                    <button class="btn btn-primary" type="button"
                        onclick="send_at_response(`+VGM: ${document.getElementById('mic_volume').value}`)">Set</button>
                </div>
            </div>
            <div class="col-3">
                <label class="form-label">Browser Gain</label>
                <input type="range" class="form-range" id="browser-gain" min="0" max="2" value="1" step="0.1" onchange="setGain()">
            </div>
        </div>

        <div class="row">
            <div class="col-auto">
                <div class="input-group mb-3">
                    <span class="input-group-text">Codec</span>

                    <select class="form-select" id="codec">
                        <option selected value="1">CVSD</option>
                        <option value="2">MSBC</option>
                    </select>
                </div>
            </div>

            <div class="col-auto">
                <button class="btn btn-primary" onclick="negotiate_codec()">Negotiate Codec</button>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" onclick="connect_sco()">Connect SCO</button>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" onclick="disconnect_sco()">Disconnect SCO</button>
            </div>
            <div class="col-auto">
                <button class="btn btn-danger" onclick="connectAudio()">Connect Audio</button>
            </div>
        </div>

        <hr>

        <div class="row">
            <h4>AG Indicators</h2>
                <div class="col-3">
                    <label class="form-label">call</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="call">
                            <option selected value="0">Inactive</option>
                            <option value="1">Active</option>
                        </select>
                        <button class="btn btn-primary" type="button" onclick="update_ag_indicator('call')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">callsetup</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="callsetup">
                            <option selected value="0">Idle</option>
                            <option value="1">Incoming</option>
                            <option value="2">Outgoing</option>
                            <option value="3">Remote Alerted</option>
                        </select>
                        <button class="btn btn-primary" type="button"
                            onclick="update_ag_indicator('callsetup')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">callheld</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="callsetup">
                            <option selected value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <button class="btn btn-primary" type="button"
                            onclick="update_ag_indicator('callheld')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">signal</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="signal">
                            <option selected value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <button class="btn btn-primary" type="button"
                            onclick="update_ag_indicator('signal')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">roam</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="roam">
                            <option selected value="0">0</option>
                            <option value="1">1</option>
                        </select>
                        <button class="btn btn-primary" type="button" onclick="update_ag_indicator('roam')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">battchg</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="battchg">
                            <option selected value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <button class="btn btn-primary" type="button"
                            onclick="update_ag_indicator('battchg')">Set</button>
                    </div>
                </div>
                <div class="col-3">
                    <label class="form-label">service</label>
                    <div class="input-group mb-3 col-auto">
                        <select class="form-select" id="service">
                            <option selected value="0">0</option>
                            <option value="1">1</option>
                        </select>
                        <button class="btn btn-primary" type="button"
                            onclick="update_ag_indicator('service')">Set</button>
                    </div>
                </div>
        </div>

        <hr>

        <button class="btn btn-primary" onclick="send_at_response('+BVRA: 1')">Start Voice Assistant</button>
        <button class="btn btn-primary" onclick="send_at_response('+BVRA: 0')">Stop Voice Assistant</button>

        <hr>


        <h4>Calls</h4>
        <div id="call-lists">
            <template id="call-template">
                <div class="row call-row">
                    <div class="input-group mb-3">
                        <label class="input-group-text">Index</label>
                        <input class="form-control call-index" value="1">

                        <label class="input-group-text">Number</label>
                        <input class="form-control call-number">

                        <label class="input-group-text">Direction</label>
                        <select class="form-select call-direction">
                            <option selected value="0">Originated</option>
                            <option value="1">Terminated</option>
                        </select>

                        <label class="input-group-text">Status</label>
                        <select class="form-select call-status">
                            <option value="0">ACTIVE</option>
                            <option value="1">HELD</option>
                            <option value="2">DIALING</option>
                            <option value="3">ALERTING</option>
                            <option value="4">INCOMING</option>
                            <option value="5">WAITING</option>
                        </select>
                        <button class="btn btn-primary call-remover">❌</button>
                    </div>
                </div>
            </template>
        </div>

        <button class="btn btn-primary" onclick="add_call()">➕ Add Call</button>
        <button class="btn btn-primary" onclick="update_calls()">🗘 Update Calls</button>

        <hr>

        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
            <h3>Log</h3>
            <code id="log" style="white-space: pre-line;"></code>
        </div>
    </div>


    <script>
        let atResponseInput = document.getElementById("at_response")
        let gainInput = document.getElementById('browser-gain')
        let log = document.getElementById("log")
        let socket = new WebSocket('ws://localhost:8888');
        let sampleRate = 0;
        let player;

        socket.binaryType = "arraybuffer";
        socket.onopen = _ => {
            log.textContent += 'SOCKET OPEN\n'
        }
        socket.onclose = _ => {
            log.textContent += 'SOCKET CLOSED\n'
        }
        socket.onerror = (error) => {
            log.textContent += 'SOCKET ERROR\n'
            console.log(`ERROR: ${error}`)
        }
        socket.onmessage = function (message) {
            if (typeof message.data === 'string' || message.data instanceof String) {
                log.textContent += `<-- ${event.data}\n`
                const jsonMessage = JSON.parse(event.data)

                if (jsonMessage.type == 'speaker_volume') {
                    document.getElementById('speaker_volume').value = jsonMessage.level;
                } else if (jsonMessage.type == 'microphone_volume') {
                    document.getElementById('microphone_volume').value = jsonMessage.level;
                } else if (jsonMessage.type == 'sco_state_change') {
                    sampleRate = jsonMessage.sample_rate;
                    console.log(sampleRate);
                    if (player != null) {
                        player = new PCMPlayer({
                            inputCodec: 'Int16',
                            channels: 1,
                            sampleRate: sampleRate,
                            flushTime: 7.5,
                        });
                        player.volume(gainInput.value);
                    }
                }
            } else {
                // BINARY audio data.
                if (player == null) return;
                player.feed(message.data);
            }
        };

        function send(message) {
            if (socket && socket.readyState == WebSocket.OPEN) {
                let jsonMessage = JSON.stringify(message)
                log.textContent += `--> ${jsonMessage}\n`
                socket.send(jsonMessage)
            } else {
                log.textContent += 'NOT CONNECTED\n'
            }
        }

        function send_at_response(response) {
            send({ type: 'at_response', response: response })
        }

        function update_ag_indicator(indicator) {
            const value = document.getElementById(indicator).value
            send({ type: 'ag_indicator', indicator: indicator, value: value })
        }

        function connect_sco() {
            send({ type: 'connect_sco' })
        }

        function negotiate_codec() {
            const codec = document.getElementById('codec').value
            send({ type: 'negotiate_codec', codec: codec })
        }

        function disconnect_sco() {
            send({ type: 'disconnect_sco' })
        }

        function add_call() {
            let callLists = document.getElementById('call-lists');
            let template = document.getElementById('call-template');

            let newNode = document.importNode(template.content, true);
            newNode.querySelector('.call-remover').onclick = function (event) {
                event.target.closest('.call-row').remove();
            }
            callLists.appendChild(newNode);
        }

        function update_calls() {
            let callLists = document.getElementById('call-lists');
            send({
                type: 'update_calls',
                calls: Array.from(
                    callLists.querySelectorAll('.call-row')).map(
                        function (element) {
                            return {
                                index: element.querySelector('.call-index').value,
                                number: element.querySelector('.call-number').value,
                                direction: element.querySelector('.call-direction').value,
                                status: element.querySelector('.call-status').value,
                            }
                        }
                    ),
            }
            )
        }

        function connectAudio() {
            player = new PCMPlayer({
                inputCodec: 'Int16',
                channels: 1,
                sampleRate: sampleRate,
                flushTime: 7.5,
            });
            player.volume(gainInput.value);
        }

        function setGain() {
            if (player != null) {
                player.volume(gainInput.value);
            }
        }
    </script>
    </div>
</body>

</html>