Refactor application to integrate WebRTC for audio streaming and enhance overall functionality
**Overview:**
This commit represents a comprehensive refactoring of the application to improve real-time audio streaming capabilities. The key change is the integration of WebRTC for peer-to-peer audio streaming while using Hyperswarm exclusively for signaling. This transition addresses efficiency, reliability, and scalability issues present in the original implementation.
**Old Method:**
- **Audio Streaming via Hyperswarm Data Channels:**
- The original code used Hyperswarm for both signaling and streaming audio data.
- Audio data was captured from the microphone, converted to binary, and transmitted over Hyperswarm connections.
- Listeners received the audio data chunks and processed them to play back the audio.
- **Issues:**
- Inefficient for real-time audio streaming due to Hyperswarm's limitations for media data.
- Higher latency and potential synchronization problems.
- Difficulty managing peer connections and media streams effectively.
**New Method:**
- **Integration of WebRTC for Audio Streaming:**
- Implemented `RTCPeerConnection` instances for efficient, real-time, peer-to-peer audio streaming.
- Used Hyperswarm solely for signaling to establish and manage connections.
- Audio tracks are now transmitted over WebRTC connections, leveraging optimized protocols for media.
- **Benefits:**
- Improved audio quality and reduced latency.
- Enhanced NAT traversal and firewall compatibility via ICE servers.
- Better management of media streams and peer connections.
**Key Changes:**
1. **WebRTC Implementation:**
- **Broadcaster Side:**
- Created `RTCPeerConnection` instances for each listener.
- Added local audio tracks from the microphone to the peer connections.
- Managed signaling messages (`offer`, `answer`, `candidate`) received via Hyperswarm.
- Handled ICE candidate exchange and connection state changes.
- **Listener Side:**
- Created an `RTCPeerConnection` to connect to the broadcaster.
- Added a transceiver with `recvonly` direction to receive audio streams.
- Managed signaling messages and ICE candidates.
- Played received audio streams using HTML `<audio>` elements.
2. **Signaling via Hyperswarm:**
- Utilized Hyperswarm connections for exchanging signaling messages in JSON format.
- Messages include `offer`, `answer`, and `candidate` types.
- Ensured proper serialization and deserialization of signaling data.
3. **ICE Candidate Handling:**
- Implemented ICE candidate queuing to handle candidates arriving before the remote description is set.
- Stored incoming ICE candidates in queues and processed them after setting the remote description.
- Added detailed logging for ICE candidate exchange and connection states.
4. **Peer Count Accuracy:**
- Updated the `updatePeerCount()` function to use `conns.length`, reflecting active Hyperswarm connections.
- Ensured the peer count updates immediately when connections are established or closed.
- Improved UI feedback regarding the number of connected peers.
5. **Audio Input Switching Without Disconnecting Peers:**
- Modified the `applyAudioSource()` function to replace audio tracks in existing peer connections without restarting the station.
- Obtained a new audio stream with the selected input device.
- Used `RTCRtpSender.replaceTrack()` to update the audio track in each peer connection.
- Stopped old audio tracks to free up resources.
- Allowed broadcasters to switch microphones seamlessly without interrupting listeners' audio.
6. **Error Handling and Debugging Improvements:**
- Added extensive logging throughout the code to trace execution flow and internal state.
- Wrapped asynchronous operations in `try...catch` blocks to handle errors gracefully.
- Provided informative console messages for successful operations and errors.
7. **User Interface Adjustments:**
- Retained existing UI elements and controls.
- Updated event listeners to align with the new logic.
- Provided real-time updates to station information and peer count.
**Benefits of the New Method:**
- **Enhanced Audio Quality and Performance:**
- Leveraging WebRTC provides better audio streaming capabilities optimized for real-time communication.
- Reduced latency and improved synchronization.
- **Scalability and Reliability:**
- Proper handling of peer connections and media streams improves the application's scalability.
- Robust error handling ensures better reliability under various network conditions.
- **Improved User Experience:**
- Listeners experience uninterrupted audio even when broadcasters change input devices.
- Accurate peer count provides broadcasters with immediate feedback on their audience size.
**Testing and Verification:**
- Tested the application with multiple broadcasters and listeners to ensure proper functionality.
- Verified that audio streams initiate correctly and continue even after input device changes.
- Confirmed that peer counts update accurately on both broadcaster and listener sides.
- Ensured that no errors appear in the console logs during normal operation.
This commit is contained in:
Raven Scott
parent
461884f5e6
commit
e6891e81c3
594
app.js
594
app.js
@ -1,18 +1,21 @@
|
|||||||
|
// app.js
|
||||||
import Hyperswarm from 'hyperswarm';
|
import Hyperswarm from 'hyperswarm';
|
||||||
import crypto from 'hypercore-crypto';
|
import crypto from 'hypercore-crypto';
|
||||||
import b4a from 'b4a';
|
import b4a from 'b4a';
|
||||||
|
|
||||||
let swarm;
|
let swarm;
|
||||||
let micStream;
|
|
||||||
let audioContext;
|
|
||||||
let isBroadcasting = false;
|
|
||||||
let conns = [];
|
|
||||||
let currentDeviceId = null; // To store the selected audio input device ID
|
|
||||||
let accumulatedBuffer = b4a.alloc(0); // Buffer for accumulating received audio data
|
|
||||||
let stationKey = crypto.randomBytes(32); // Default random key for the station
|
let stationKey = crypto.randomBytes(32); // Default random key for the station
|
||||||
|
let currentDeviceId = null; // To store the selected audio input device ID
|
||||||
|
let isBroadcasting = false;
|
||||||
|
let localStream; // For broadcaster's audio stream
|
||||||
|
let peerConnections = {}; // Store WebRTC peer connections
|
||||||
|
let iceCandidateQueues = {}; // Store ICE candidate queues
|
||||||
|
let conns = []; // Store Hyperswarm connections
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
console.log("DOM fully loaded and parsed");
|
||||||
document.getElementById('create-station').addEventListener('click', () => {
|
document.getElementById('create-station').addEventListener('click', () => {
|
||||||
|
console.log("Create Station button clicked");
|
||||||
const createStationModal = new bootstrap.Modal(document.getElementById('createStationModal'));
|
const createStationModal = new bootstrap.Modal(document.getElementById('createStationModal'));
|
||||||
createStationModal.show();
|
createStationModal.show();
|
||||||
});
|
});
|
||||||
@ -20,12 +23,14 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
document.getElementById('generate-new-key').addEventListener('click', () => {
|
document.getElementById('generate-new-key').addEventListener('click', () => {
|
||||||
stationKey = crypto.randomBytes(32);
|
stationKey = crypto.randomBytes(32);
|
||||||
document.getElementById('existing-key').value = b4a.toString(stationKey, 'hex');
|
document.getElementById('existing-key').value = b4a.toString(stationKey, 'hex');
|
||||||
|
console.log("New station key generated");
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('create-station-button').addEventListener('click', () => {
|
document.getElementById('create-station-button').addEventListener('click', () => {
|
||||||
const existingKey = document.getElementById('existing-key').value.trim();
|
const existingKey = document.getElementById('existing-key').value.trim();
|
||||||
stationKey = existingKey ? b4a.from(existingKey, 'hex') : stationKey;
|
stationKey = existingKey ? b4a.from(existingKey, 'hex') : stationKey;
|
||||||
|
|
||||||
|
console.log("Creating station with key:", b4a.toString(stationKey, 'hex'));
|
||||||
setupStation(stationKey);
|
setupStation(stationKey);
|
||||||
|
|
||||||
const createStationModal = bootstrap.Modal.getInstance(document.getElementById('createStationModal'));
|
const createStationModal = bootstrap.Modal.getInstance(document.getElementById('createStationModal'));
|
||||||
@ -33,31 +38,22 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('leave-stream').addEventListener('click', () => {
|
document.getElementById('leave-stream').addEventListener('click', () => {
|
||||||
stopBroadcast();
|
console.log("Leave Stream button clicked");
|
||||||
leaveStation();
|
leaveStation();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('join-station-button').addEventListener('click', joinStation);
|
document.getElementById('join-station-button').addEventListener('click', () => {
|
||||||
|
console.log("Join Station button clicked");
|
||||||
|
joinStation();
|
||||||
|
const joinModal = bootstrap.Modal.getInstance(document.getElementById('joinModal'));
|
||||||
|
joinModal.hide();
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById('apply-audio-source').addEventListener('click', applyAudioSource);
|
document.getElementById('apply-audio-source').addEventListener('click', applyAudioSource);
|
||||||
// document.getElementById('apply-output-device').addEventListener('click', applyOutputDevice);
|
|
||||||
|
|
||||||
populateAudioInputSources();
|
populateAudioInputSources();
|
||||||
populateAudioOutputSources();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update peer count in the UI
|
|
||||||
function updatePeerCount() {
|
|
||||||
const peerCount = conns.length;
|
|
||||||
const stationInfoElement = document.getElementById('station-info');
|
|
||||||
if (isBroadcasting) {
|
|
||||||
stationInfoElement.textContent = `Station ID: ${b4a.toString(stationKey, 'hex')}\nConnected Peers: ${peerCount}`;
|
|
||||||
} else {
|
|
||||||
stationInfoElement.textContent = `Station ID: ${b4a.toString(stationKey, 'hex')}\nConnected Peers: ${peerCount}`;
|
|
||||||
}
|
|
||||||
console.log(`Peer count updated: ${peerCount}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate audio input sources
|
|
||||||
async function populateAudioInputSources() {
|
async function populateAudioInputSources() {
|
||||||
try {
|
try {
|
||||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
||||||
@ -72,268 +68,420 @@ async function populateAudioInputSources() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
currentDeviceId = audioInputSelect.value;
|
currentDeviceId = audioInputSelect.value;
|
||||||
|
console.log("Audio input devices populated");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error enumerating devices:", err);
|
console.error("Error enumerating devices:", err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Populate audio output sources
|
// Updated applyAudioSource function
|
||||||
async function populateAudioOutputSources() {
|
|
||||||
try {
|
|
||||||
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
||||||
const audioOutputSelect = document.getElementById('audio-output-select');
|
|
||||||
audioOutputSelect.innerHTML = '';
|
|
||||||
devices.forEach((device) => {
|
|
||||||
if (device.kind === 'audiooutput') {
|
|
||||||
// const option = document.createElement('option');
|
|
||||||
// option.value = device.deviceId;
|
|
||||||
// option.textContent = device.label || `Speaker ${audioOutputSelect.length + 1}`;
|
|
||||||
// audioOutputSelect.appendChild(option);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error enumerating output devices:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply the selected audio output device
|
|
||||||
// Apply the selected audio output device
|
|
||||||
async function applyOutputDevice() {
|
|
||||||
const selectedDeviceId = document.getElementById('audio-output-select').value;
|
|
||||||
try {
|
|
||||||
if (!selectedDeviceId) {
|
|
||||||
console.warn("No output device selected.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ensure there is a valid audio element
|
|
||||||
const audioElement = document.createElement('audio');
|
|
||||||
audioElement.autoplay = true; // Play automatically when data is received
|
|
||||||
audioElement.controls = true; // Debugging purposes (can be removed)
|
|
||||||
document.body.appendChild(audioElement); // Add temporarily for testing
|
|
||||||
|
|
||||||
// Set the audio sink to the selected device
|
|
||||||
if (typeof audioElement.setSinkId === 'function') {
|
|
||||||
await audioElement.setSinkId(selectedDeviceId);
|
|
||||||
console.log(`Audio output device applied: ${selectedDeviceId}`);
|
|
||||||
} else {
|
|
||||||
console.error("setSinkId is not supported in this browser.");
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error applying audio output device:", err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply the selected audio input source
|
|
||||||
async function applyAudioSource() {
|
async function applyAudioSource() {
|
||||||
const selectedDeviceId = document.getElementById('audio-input-select').value;
|
const selectedDeviceId = document.getElementById('audio-input-select').value;
|
||||||
if (selectedDeviceId !== currentDeviceId) {
|
if (selectedDeviceId !== currentDeviceId) {
|
||||||
currentDeviceId = selectedDeviceId;
|
currentDeviceId = selectedDeviceId;
|
||||||
stopBroadcast();
|
if (isBroadcasting) {
|
||||||
startBroadcast();
|
console.log("Applying new audio source:", selectedDeviceId);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start broadcasting from the microphone
|
|
||||||
async function startBroadcast() {
|
|
||||||
if (isBroadcasting) stopBroadcast();
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
// Get the new audio stream
|
||||||
micStream = await navigator.mediaDevices.getUserMedia({
|
const newStream = await navigator.mediaDevices.getUserMedia({
|
||||||
audio: { deviceId: currentDeviceId ? { exact: currentDeviceId } : undefined },
|
audio: { deviceId: currentDeviceId ? { exact: currentDeviceId } : undefined },
|
||||||
});
|
});
|
||||||
const source = audioContext.createMediaStreamSource(micStream);
|
console.log("New audio stream obtained");
|
||||||
const processor = audioContext.createScriptProcessor(4096, 1, 1);
|
|
||||||
|
|
||||||
source.connect(processor);
|
// Replace tracks in existing peer connections
|
||||||
processor.connect(audioContext.destination);
|
for (const remoteKey in peerConnections) {
|
||||||
|
const peerConnection = peerConnections[remoteKey];
|
||||||
processor.onaudioprocess = (event) => {
|
const senders = peerConnection.getSenders();
|
||||||
const audioData = event.inputBuffer.getChannelData(0);
|
for (const sender of senders) {
|
||||||
const buffer = b4a.from(new Float32Array(audioData).buffer);
|
if (sender.track && sender.track.kind === 'audio') {
|
||||||
for (const conn of conns) {
|
const newTrack = newStream.getAudioTracks()[0];
|
||||||
conn.write(buffer);
|
await sender.replaceTrack(newTrack);
|
||||||
|
console.log(`Replaced audio track for peer ${remoteKey}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
isBroadcasting = true;
|
// Stop the old audio tracks
|
||||||
console.log("Broadcasting started.");
|
if (localStream) {
|
||||||
|
localStream.getTracks().forEach((track) => track.stop());
|
||||||
|
console.log("Old audio tracks stopped");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the localStream
|
||||||
|
localStream = newStream;
|
||||||
|
console.log("localStream updated with new audio stream");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error starting broadcast:", err);
|
console.error("Error applying new audio source:", err);
|
||||||
|
alert("Failed to apply new audio source. Please try again.");
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Stop broadcasting
|
|
||||||
function stopBroadcast() {
|
|
||||||
if (!isBroadcasting) return;
|
|
||||||
|
|
||||||
broadcastStopSignal();
|
|
||||||
if (micStream) {
|
|
||||||
micStream.getTracks().forEach((track) => track.stop());
|
|
||||||
micStream = null;
|
|
||||||
}
|
|
||||||
if (audioContext) {
|
|
||||||
audioContext.close();
|
|
||||||
audioContext = null;
|
|
||||||
}
|
|
||||||
accumulatedBuffer = b4a.alloc(0);
|
|
||||||
isBroadcasting = false;
|
|
||||||
console.log("Broadcasting stopped.");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Broadcast a stop signal to all peers
|
|
||||||
function broadcastStopSignal() {
|
|
||||||
for (const conn of conns) {
|
|
||||||
conn.write(Buffer.alloc(0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function processIncomingAudioData(data) {
|
|
||||||
// Ensure audioContext is initialized
|
|
||||||
if (!audioContext) {
|
|
||||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
||||||
console.log("AudioContext initialized.");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Accumulate incoming data
|
|
||||||
accumulatedBuffer = b4a.concat([accumulatedBuffer, data]);
|
|
||||||
|
|
||||||
// Debug log for accumulated buffer size
|
|
||||||
console.log("Accumulated buffer size:", accumulatedBuffer.byteLength);
|
|
||||||
|
|
||||||
// Process audio data in chunks
|
|
||||||
while (accumulatedBuffer.byteLength >= 4096) {
|
|
||||||
try {
|
|
||||||
const chunkSize = 4096; // Process fixed-size chunks
|
|
||||||
const audioData = new Float32Array(accumulatedBuffer.slice(0, chunkSize).buffer);
|
|
||||||
accumulatedBuffer = accumulatedBuffer.slice(chunkSize); // Remove processed data
|
|
||||||
|
|
||||||
const sampleRate = audioContext.sampleRate || 44100; // Use context sample rate or default
|
|
||||||
const buffer = audioContext.createBuffer(1, audioData.length, sampleRate);
|
|
||||||
|
|
||||||
// Copy data to the audio buffer
|
|
||||||
buffer.copyToChannel(audioData, 0);
|
|
||||||
|
|
||||||
// Create and configure audio buffer source
|
|
||||||
const source = audioContext.createBufferSource();
|
|
||||||
source.buffer = buffer;
|
|
||||||
source.connect(audioContext.destination);
|
|
||||||
source.start();
|
|
||||||
|
|
||||||
// Debug log for processed audio chunk
|
|
||||||
console.log("Audio chunk processed and played. Chunk size:", chunkSize);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Error processing audio data:", err);
|
|
||||||
break; // Stop processing on error to prevent cascading issues
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Setup a broadcasting station
|
// Update peer count using conns.length
|
||||||
|
function updatePeerCount() {
|
||||||
|
const peerCount = conns.length;
|
||||||
|
const stationInfoElement = document.getElementById('station-info');
|
||||||
|
if (isBroadcasting) {
|
||||||
|
stationInfoElement.textContent = `Station ID: ${b4a.toString(stationKey, 'hex')}\nConnected Peers: ${peerCount}`;
|
||||||
|
} else {
|
||||||
|
stationInfoElement.textContent = `Connected Peers: ${peerCount}`;
|
||||||
|
}
|
||||||
|
console.log(`Peer count updated: ${peerCount}`);
|
||||||
|
}
|
||||||
|
|
||||||
async function setupStation(key) {
|
async function setupStation(key) {
|
||||||
|
try {
|
||||||
|
console.log("Setting up station...");
|
||||||
|
// Initialize Hyperswarm
|
||||||
swarm = new Hyperswarm();
|
swarm = new Hyperswarm();
|
||||||
swarm.join(key, { client: false, server: true });
|
swarm.join(key, { client: false, server: true });
|
||||||
|
|
||||||
|
// Get user media (audio input)
|
||||||
|
localStream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: { deviceId: currentDeviceId ? { exact: currentDeviceId } : undefined },
|
||||||
|
});
|
||||||
|
console.log("Local audio stream obtained");
|
||||||
|
|
||||||
|
isBroadcasting = true;
|
||||||
|
|
||||||
|
swarm.on('connection', (conn) => {
|
||||||
|
console.log("New connection established");
|
||||||
|
conns.push(conn);
|
||||||
|
updatePeerCount(); // Update peer count when a new connection is established
|
||||||
|
const remoteKey = conn.remotePublicKey.toString('hex');
|
||||||
|
console.log("Remote key:", remoteKey);
|
||||||
|
|
||||||
|
// Initialize ICE candidate queue
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
|
||||||
|
// Handle incoming signaling data
|
||||||
|
conn.on('data', async (data) => {
|
||||||
|
console.log("Received data from peer:", data.toString());
|
||||||
|
const message = JSON.parse(data.toString());
|
||||||
|
await handleSignalingData(conn, message);
|
||||||
|
});
|
||||||
|
|
||||||
|
conn.on('close', () => {
|
||||||
|
console.log("Connection closed with peer:", remoteKey);
|
||||||
|
// Clean up peer connection when connection closes
|
||||||
|
if (peerConnections[remoteKey]) {
|
||||||
|
peerConnections[remoteKey].close();
|
||||||
|
delete peerConnections[remoteKey];
|
||||||
|
}
|
||||||
|
delete iceCandidateQueues[remoteKey];
|
||||||
|
conns.splice(conns.indexOf(conn), 1);
|
||||||
|
updatePeerCount(); // Update peer count when a connection is closed
|
||||||
|
});
|
||||||
|
|
||||||
|
conn.on('error', (err) => {
|
||||||
|
console.error("Connection error with peer:", remoteKey, err);
|
||||||
|
if (peerConnections[remoteKey]) {
|
||||||
|
peerConnections[remoteKey].close();
|
||||||
|
delete peerConnections[remoteKey];
|
||||||
|
}
|
||||||
|
delete iceCandidateQueues[remoteKey];
|
||||||
|
conns.splice(conns.indexOf(conn), 1);
|
||||||
|
updatePeerCount(); // Update peer count on error
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById('broadcaster-controls').classList.remove('d-none');
|
document.getElementById('broadcaster-controls').classList.remove('d-none');
|
||||||
document.getElementById('setup').classList.add('d-none');
|
document.getElementById('setup').classList.add('d-none');
|
||||||
document.getElementById('controls').classList.remove('d-none');
|
document.getElementById('controls').classList.remove('d-none');
|
||||||
|
document.getElementById('station-info').textContent = `Station ID: ${b4a.toString(key, 'hex')}`;
|
||||||
|
|
||||||
startBroadcast();
|
console.log("Station setup complete");
|
||||||
updatePeerCount();
|
} catch (err) {
|
||||||
|
console.error("Error setting up station:", err);
|
||||||
swarm.on('connection', (conn) => {
|
alert("Failed to set up station. Please try again.");
|
||||||
conns.push(conn);
|
}
|
||||||
console.log("Peer connected. Total peers:", conns.length);
|
}
|
||||||
updatePeerCount();
|
|
||||||
|
function stopBroadcast() {
|
||||||
conn.once('close', () => {
|
console.log("Broadcast stopped");
|
||||||
conns.splice(conns.indexOf(conn), 1);
|
// Close all peer connections
|
||||||
console.log("Peer disconnected. Total peers:", conns.length);
|
Object.values(peerConnections).forEach((pc) => pc.close());
|
||||||
updatePeerCount();
|
peerConnections = {};
|
||||||
});
|
|
||||||
|
// Stop local media tracks
|
||||||
conn.on('data', handleData);
|
if (localStream) {
|
||||||
|
localStream.getTracks().forEach((track) => track.stop());
|
||||||
conn.on('error', (err) => {
|
localStream = null;
|
||||||
if (err.code === 'ECONNRESET') {
|
console.log("Local media tracks stopped");
|
||||||
console.log("Peer connection reset by remote peer.");
|
}
|
||||||
} else {
|
|
||||||
console.error("Connection error:", err);
|
isBroadcasting = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSignalingData(conn, message, peerConnection = null) {
|
||||||
|
try {
|
||||||
|
const remoteKey = conn.remotePublicKey.toString('hex');
|
||||||
|
console.log("Handling signaling data:", message.type, "from", remoteKey);
|
||||||
|
|
||||||
|
if (!peerConnection) {
|
||||||
|
peerConnection = peerConnections[remoteKey];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (message.type === 'offer') {
|
||||||
|
// Received an offer from a listener (only for broadcaster)
|
||||||
|
console.log("Creating new RTCPeerConnection for remote key:", remoteKey);
|
||||||
|
const configuration = {
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
|
||||||
|
};
|
||||||
|
peerConnection = new RTCPeerConnection(configuration);
|
||||||
|
peerConnections[remoteKey] = peerConnection;
|
||||||
|
|
||||||
|
// Add local stream tracks to peer connection
|
||||||
|
localStream.getTracks().forEach((track) => {
|
||||||
|
peerConnection.addTrack(track, localStream);
|
||||||
|
console.log("Added track to peer connection:", track);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle ICE candidates
|
||||||
|
peerConnection.onicecandidate = ({ candidate }) => {
|
||||||
|
if (candidate) {
|
||||||
|
console.log("Sending ICE candidate to peer:", candidate);
|
||||||
|
conn.write(JSON.stringify({ type: 'candidate', candidate }));
|
||||||
|
} else {
|
||||||
|
console.log("All ICE candidates have been sent to peer");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
peerConnection.oniceconnectionstatechange = () => {
|
||||||
|
console.log("Broadcaster ICE connection state changed to:", peerConnection.iceConnectionState);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set remote description
|
||||||
|
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
|
||||||
|
console.log("Set remote description with offer from peer");
|
||||||
|
|
||||||
|
// Process any queued ICE candidates
|
||||||
|
if (iceCandidateQueues[remoteKey]) {
|
||||||
|
console.log("Processing queued ICE candidates");
|
||||||
|
for (const candidate of iceCandidateQueues[remoteKey]) {
|
||||||
|
await peerConnection.addIceCandidate(candidate);
|
||||||
|
console.log("Added queued ICE candidate");
|
||||||
|
}
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const answer = await peerConnection.createAnswer();
|
||||||
|
await peerConnection.setLocalDescription(answer);
|
||||||
|
console.log("Created and set local description with answer");
|
||||||
|
|
||||||
|
// Send the answer back to the listener
|
||||||
|
conn.write(JSON.stringify({ type: 'answer', answer }));
|
||||||
|
console.log("Sent answer to peer");
|
||||||
|
|
||||||
|
} else if (message.type === 'candidate') {
|
||||||
|
// Received an ICE candidate
|
||||||
|
const candidate = new RTCIceCandidate(message.candidate);
|
||||||
|
console.log("Received ICE candidate from peer:", candidate);
|
||||||
|
|
||||||
|
if (peerConnection && peerConnection.remoteDescription && peerConnection.remoteDescription.type) {
|
||||||
|
await peerConnection.addIceCandidate(candidate);
|
||||||
|
console.log("Added ICE candidate to peer connection");
|
||||||
|
} else {
|
||||||
|
console.log("Remote description not set yet, queuing ICE candidate");
|
||||||
|
if (!iceCandidateQueues[remoteKey]) {
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
}
|
||||||
|
iceCandidateQueues[remoteKey].push(candidate);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if (message.type === 'answer') {
|
||||||
|
// Received an answer from the broadcaster (only for listener)
|
||||||
|
console.log("Received answer from broadcaster");
|
||||||
|
await peerConnection.setRemoteDescription(new RTCSessionDescription(message.answer));
|
||||||
|
console.log("Set remote description with answer from broadcaster");
|
||||||
|
|
||||||
|
// Process any queued ICE candidates
|
||||||
|
if (iceCandidateQueues[remoteKey]) {
|
||||||
|
console.log("Processing queued ICE candidates");
|
||||||
|
for (const candidate of iceCandidateQueues[remoteKey]) {
|
||||||
|
await peerConnection.addIceCandidate(candidate);
|
||||||
|
console.log("Added queued ICE candidate");
|
||||||
|
}
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error handling signaling data:", err);
|
||||||
}
|
}
|
||||||
conns.splice(conns.indexOf(conn), 1);
|
|
||||||
updatePeerCount();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Leave the station
|
|
||||||
function leaveStation() {
|
function leaveStation() {
|
||||||
if (swarm) swarm.destroy();
|
console.log("Leaving station...");
|
||||||
|
if (swarm) {
|
||||||
|
swarm.destroy();
|
||||||
|
console.log("Swarm destroyed");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close all peer connections
|
||||||
|
Object.values(peerConnections).forEach((pc) => pc.close());
|
||||||
|
peerConnections = {};
|
||||||
|
|
||||||
|
// Close all Hyperswarm connections
|
||||||
|
conns.forEach((conn) => conn.destroy());
|
||||||
|
conns = [];
|
||||||
|
|
||||||
|
// Stop local media tracks
|
||||||
|
if (localStream) {
|
||||||
|
localStream.getTracks().forEach((track) => track.stop());
|
||||||
|
localStream = null;
|
||||||
|
console.log("Local media tracks stopped");
|
||||||
|
}
|
||||||
|
|
||||||
|
isBroadcasting = false;
|
||||||
|
|
||||||
document.getElementById('setup').classList.remove('d-none');
|
document.getElementById('setup').classList.remove('d-none');
|
||||||
document.getElementById('controls').classList.add('d-none');
|
document.getElementById('controls').classList.add('d-none');
|
||||||
document.getElementById('broadcaster-controls').classList.add('d-none');
|
document.getElementById('broadcaster-controls').classList.add('d-none');
|
||||||
stopBroadcast();
|
document.getElementById('listener-controls').classList.add('d-none');
|
||||||
|
document.getElementById('station-info').textContent = '';
|
||||||
|
|
||||||
console.log("Left the station.");
|
console.log("Left the station.");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle incoming data from peers
|
|
||||||
function handleData(data) {
|
|
||||||
if (data.length === 0) {
|
|
||||||
stopBroadcast();
|
|
||||||
} else {
|
|
||||||
processIncomingAudioData(data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Join an existing station
|
|
||||||
async function joinStation() {
|
async function joinStation() {
|
||||||
|
try {
|
||||||
const stationId = document.getElementById('station-id').value;
|
const stationId = document.getElementById('station-id').value;
|
||||||
if (!stationId) {
|
if (!stationId) {
|
||||||
alert("Please enter a station ID.");
|
alert("Please enter a station ID.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log("Joining station with ID:", stationId);
|
||||||
const topicBuffer = b4a.from(stationId, 'hex');
|
const topicBuffer = b4a.from(stationId, 'hex');
|
||||||
swarm = new Hyperswarm();
|
swarm = new Hyperswarm();
|
||||||
swarm.join(topicBuffer, { client: true, server: false });
|
swarm.join(topicBuffer, { client: true, server: false });
|
||||||
|
|
||||||
document.getElementById('station-info').textContent = `Connected to Station: ${stationId}`;
|
|
||||||
document.getElementById('setup').classList.add('d-none');
|
|
||||||
document.getElementById('controls').classList.remove('d-none');
|
|
||||||
document.getElementById('broadcaster-controls').classList.add('d-none');
|
|
||||||
// document.getElementById('listener-controls').classList.remove('d-none'); // Ensure listener controls are visible
|
|
||||||
|
|
||||||
// Populate audio output devices
|
|
||||||
await populateAudioOutputSources();
|
|
||||||
|
|
||||||
swarm.on('connection', (conn) => {
|
swarm.on('connection', (conn) => {
|
||||||
|
console.log("Connected to broadcaster");
|
||||||
conns.push(conn);
|
conns.push(conn);
|
||||||
console.log("Peer connected. Total peers:", conns.length);
|
updatePeerCount(); // Update peer count when a new connection is established
|
||||||
updatePeerCount();
|
const remoteKey = conn.remotePublicKey.toString('hex');
|
||||||
|
console.log("Remote key:", remoteKey);
|
||||||
|
|
||||||
conn.on('data', (data) => processIncomingAudioData(data));
|
// Initialize ICE candidate queue
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
|
||||||
conn.once('close', () => {
|
const configuration = {
|
||||||
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
|
||||||
|
};
|
||||||
|
const peerConnection = new RTCPeerConnection(configuration);
|
||||||
|
peerConnections[remoteKey] = peerConnection;
|
||||||
|
|
||||||
|
// Add transceiver to receive audio
|
||||||
|
peerConnection.addTransceiver('audio', { direction: 'recvonly' });
|
||||||
|
|
||||||
|
// Handle incoming tracks (audio streams)
|
||||||
|
peerConnection.ontrack = (event) => {
|
||||||
|
console.log("Received remote track");
|
||||||
|
const [remoteStream] = event.streams;
|
||||||
|
// Play the remote audio stream
|
||||||
|
const audioElement = document.createElement('audio');
|
||||||
|
audioElement.srcObject = remoteStream;
|
||||||
|
audioElement.autoplay = true;
|
||||||
|
document.body.appendChild(audioElement);
|
||||||
|
console.log("Audio element created and playback started");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle ICE candidates
|
||||||
|
peerConnection.onicecandidate = ({ candidate }) => {
|
||||||
|
if (candidate) {
|
||||||
|
console.log("Sending ICE candidate to broadcaster:", candidate);
|
||||||
|
conn.write(JSON.stringify({ type: 'candidate', candidate }));
|
||||||
|
} else {
|
||||||
|
console.log("All ICE candidates have been sent to broadcaster");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
peerConnection.oniceconnectionstatechange = () => {
|
||||||
|
console.log("Listener ICE connection state changed to:", peerConnection.iceConnectionState);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle signaling data from broadcaster
|
||||||
|
conn.on('data', async (data) => {
|
||||||
|
console.log("Received data from broadcaster:", data.toString());
|
||||||
|
const message = JSON.parse(data.toString());
|
||||||
|
await handleSignalingData(conn, message, peerConnection);
|
||||||
|
});
|
||||||
|
|
||||||
|
conn.on('close', () => {
|
||||||
|
console.log("Connection closed with broadcaster");
|
||||||
|
peerConnection.close();
|
||||||
|
delete peerConnections[remoteKey];
|
||||||
|
delete iceCandidateQueues[remoteKey];
|
||||||
conns.splice(conns.indexOf(conn), 1);
|
conns.splice(conns.indexOf(conn), 1);
|
||||||
console.log("Peer disconnected. Total peers:", conns.length);
|
updatePeerCount(); // Update peer count when a connection is closed
|
||||||
updatePeerCount();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
conn.on('error', (err) => {
|
conn.on('error', (err) => {
|
||||||
if (err.code === 'ECONNRESET') {
|
console.error("Connection error with broadcaster:", err);
|
||||||
console.log("Peer connection reset by remote peer.");
|
peerConnection.close();
|
||||||
} else {
|
delete peerConnections[remoteKey];
|
||||||
console.error("Connection error:", err);
|
delete iceCandidateQueues[remoteKey];
|
||||||
}
|
|
||||||
conns.splice(conns.indexOf(conn), 1);
|
conns.splice(conns.indexOf(conn), 1);
|
||||||
updatePeerCount();
|
updatePeerCount(); // Update peer count on error
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const joinModal = bootstrap.Modal.getInstance(document.getElementById('joinModal'));
|
// Start signaling process
|
||||||
if (joinModal) joinModal.hide();
|
initiateOffer(conn, peerConnection, remoteKey);
|
||||||
|
|
||||||
updatePeerCount();
|
updatePeerCount();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('station-info').textContent = `Connected to Station: ${stationId}`;
|
||||||
|
document.getElementById('setup').classList.add('d-none');
|
||||||
|
document.getElementById('controls').classList.remove('d-none');
|
||||||
|
document.getElementById('listener-controls').classList.remove('d-none');
|
||||||
|
|
||||||
|
console.log("Joined station successfully");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error joining station:", err);
|
||||||
|
alert("Failed to join station. Please try again.");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function initiateOffer(conn, peerConnection, remoteKey) {
|
||||||
|
try {
|
||||||
|
console.log("Initiating offer to broadcaster");
|
||||||
|
|
||||||
|
// Handle ICE candidates
|
||||||
|
peerConnection.onicecandidate = ({ candidate }) => {
|
||||||
|
if (candidate) {
|
||||||
|
console.log("Sending ICE candidate to broadcaster:", candidate);
|
||||||
|
conn.write(JSON.stringify({ type: 'candidate', candidate }));
|
||||||
|
} else {
|
||||||
|
console.log("All ICE candidates have been sent to broadcaster");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
peerConnection.oniceconnectionstatechange = () => {
|
||||||
|
console.log("Listener ICE connection state changed to:", peerConnection.iceConnectionState);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create offer
|
||||||
|
const offer = await peerConnection.createOffer();
|
||||||
|
await peerConnection.setLocalDescription(offer);
|
||||||
|
console.log("Created and set local description with offer");
|
||||||
|
|
||||||
|
// Send offer to broadcaster
|
||||||
|
conn.write(JSON.stringify({ type: 'offer', offer }));
|
||||||
|
console.log("Sent offer to broadcaster");
|
||||||
|
|
||||||
|
// Process any queued ICE candidates
|
||||||
|
if (iceCandidateQueues[remoteKey]) {
|
||||||
|
console.log("Processing queued ICE candidates");
|
||||||
|
for (const candidate of iceCandidateQueues[remoteKey]) {
|
||||||
|
await peerConnection.addIceCandidate(candidate);
|
||||||
|
console.log("Added queued ICE candidate");
|
||||||
|
}
|
||||||
|
iceCandidateQueues[remoteKey] = [];
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error initiating offer:", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -46,10 +46,7 @@
|
|||||||
|
|
||||||
<!-- Listener-only Controls -->
|
<!-- Listener-only Controls -->
|
||||||
<div id="listener-controls" class="mt-3 d-none">
|
<div id="listener-controls" class="mt-3 d-none">
|
||||||
<select id="audio-output-select" class="form-select" style="display: none;"></select>
|
<!-- You can add listener-specific controls here -->
|
||||||
|
|
||||||
<!-- <label for="audio-output-select" class="form-label">Select Audio Output Device:</label>
|
|
||||||
<button id="apply-output-device" class="btn btn-success mt-2">Apply</button> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,7 +7,9 @@
|
|||||||
"gui": {
|
"gui": {
|
||||||
"backgroundColor": "#1F2430",
|
"backgroundColor": "#1F2430",
|
||||||
"height": "540",
|
"height": "540",
|
||||||
"width": "720"
|
"width": "720",
|
||||||
|
"links": ["http://127.0.0.1", "http://localhost", "https://ka-f.fontawesome.com", "https://cdn.jsdelivr.net", "https://cdnjs.cloudflare.com", "https://stackpath.bootstrapcdn.com", "ttps://code.jquery.com"]
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user