| <html data-bs-theme="dark"> |
| |
| <head> |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/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 Unicast Server</span> |
| </div> |
| </nav> |
| <br> |
| |
| <div class="container"> |
| <button type="button" class="btn btn-danger" id="connect-audio" onclick="connectAudio()">Connect Audio</button> |
| <button class="btn btn-primary" type="button" disabled> |
| <span class="spinner-border spinner-border-sm" id="ws-status-spinner" aria-hidden="true"></span> |
| <span role="status" id="ws-status">WebSocket Connecting...</span> |
| </button> |
| </div> |
| |
| |
| <script> |
| let player = null; |
| const wsStatus = document.getElementById("ws-status"); |
| const wsStatusSpinner = document.getElementById("ws-status-spinner"); |
| |
| const socket = new WebSocket('ws://127.0.0.1:7654/channel'); |
| socket.binaryType = "arraybuffer"; |
| socket.onmessage = function (message) { |
| if (typeof message.data === 'string' || message.data instanceof String) { |
| console.log(`channel MESSAGE: ${message.data}`); |
| } else { |
| console.log(typeof (message.data)) |
| // BINARY audio data. |
| if (player == null) return; |
| player.feed(message.data); |
| } |
| }; |
| |
| socket.onopen = (message) => { |
| wsStatusSpinner.remove(); |
| wsStatus.textContent = "WebSocket Connected"; |
| } |
| |
| socket.onclose = (message) => { |
| wsStatus.textContent = "WebSocket Disconnected"; |
| } |
| |
| function connectAudio() { |
| player = new PCMPlayer({ |
| inputCodec: 'Int16', |
| channels: 2, |
| sampleRate: 48000, |
| flushTime: 10, |
| }); |
| const button = document.getElementById("connect-audio") |
| button.disabled = true; |
| button.textContent = "Audio Connected"; |
| } |
| </script> |
| </div> |
| </body> |
| |
| </html> |
