e6891e81c3
**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.
99 lines
3.8 KiB
HTML
99 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="./assets/bootstrap.min.css" rel="stylesheet">
|
|
<title>pearCast</title>
|
|
<style>
|
|
#titlebar {
|
|
-webkit-app-region: drag;
|
|
height: 30px;
|
|
width: 100%;
|
|
background-color: #343a40;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
pear-ctrl[data-platform="darwin"] {
|
|
float: left;
|
|
margin-top: 15px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-dark text-light">
|
|
<div id="titlebar">
|
|
<pear-ctrl></pear-ctrl>
|
|
</div>
|
|
<div class="container mt-5 text-center">
|
|
<h1>pearCast</h1>
|
|
<div id="setup" class="btn-group mt-4">
|
|
<button id="create-station" class="btn btn-primary">Create Station</button>
|
|
<button id="open-join-modal" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#joinModal">Join Station</button>
|
|
</div>
|
|
<div id="controls" class="d-none mt-4">
|
|
<p id="station-info"></p>
|
|
<button id="leave-stream" class="btn btn-danger mt-2">Leave Broadcast</button>
|
|
|
|
<!-- Broadcaster-only Controls -->
|
|
<div id="broadcaster-controls" class="mt-3 d-none">
|
|
<label for="audio-input-select" class="form-label">Select Audio Input Source:</label>
|
|
<select id="audio-input-select" class="form-select"></select>
|
|
<button id="apply-audio-source" class="btn btn-success mt-2">Apply</button>
|
|
</div>
|
|
|
|
<!-- Listener-only Controls -->
|
|
<div id="listener-controls" class="mt-3 d-none">
|
|
<!-- You can add listener-specific controls here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Join Modal -->
|
|
<div class="modal fade" id="joinModal" tabindex="-1" aria-labelledby="joinModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-light">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="joinModalLabel">Join a Station</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="text" id="station-id" class="form-control" placeholder="Enter Station ID">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="join-station-button">Join</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Station Modal -->
|
|
<div class="modal fade" id="createStationModal" tabindex="-1" aria-labelledby="createStationModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark text-light">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createStationModalLabel">Create Station</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Generate a new station ID or use an existing ID?</p>
|
|
<button id="generate-new-key" class="btn btn-primary mt-2">Generate New ID</button>
|
|
<input type="text" id="existing-key" class="form-control mt-3" placeholder="You may manually enter an ID here">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="create-station-button">Create Station</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JavaScript Bundle (includes Popper) -->
|
|
<script src="./assets/bootstrap.bundle.min.js"></script>
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|