exceed/dc-recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add web interface and WebSocket server for real-time audio transmission to Discord

Browse Source
This commit is contained in:
baharsah
2026-05-13 00:32:27 +07:00
parent 1a5449f16d
commit 18cf941da0
7 changed files with 405 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

8
package.json
View File

@@ -14,16 +14,20 @@
"@snazzah/davey": "^0.1.10", "@snazzah/davey": "^0.1.10",
"crc-32": "^1.2.2", "crc-32": "^1.2.2",
"discord.js-selfbot-v13": "^3.7.1", "discord.js-selfbot-v13": "^3.7.1",
"express": "^5.2.1",
"ffmpeg-static": "^5.3.0", "ffmpeg-static": "^5.3.0",
"fluent-ffmpeg": "^2.1.3", "fluent-ffmpeg": "^2.1.3",
"libsodium-wrappers": "^0.8.2", "libsodium-wrappers": "^0.8.2",
"node-crc": "^4.0.0", "node-crc": "^4.0.0",
"opusscript": "^0.1.1", "opusscript": "^0.1.1",
"prism-media": "2.0.0-alpha.0", "prism-media": "2.0.0-alpha.0",
"sodium-native": "^4.3.2" "sodium-native": "^4.3.2",
"ws": "^8.20.1"
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "latest", "@types/bun": "latest",
"@types/fluent-ffmpeg": "^2.1.28" "@types/express": "^5.0.6",
"@types/fluent-ffmpeg": "^2.1.28",
"@types/ws": "^8.18.1"
} }
} }

273
public/index.html Normal file
View File

@@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord Audio Transmitter</title>
<style>
:root {
--primary: #5865F2;
--bg: #36393f;
--card-bg: #2f3136;
--text: #ffffff;
--text-muted: #b9bbbe;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.card {
background-color: var(--card-bg);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
text-align: center;
width: 100%;
max-width: 400px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
h1 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
p {
color: var(--text-muted);
margin-bottom: 2rem;
}
.status {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
font-size: 0.9rem;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ff4747;
margin-right: 8px;
box-shadow: 0 0 8px #ff4747;
}
.indicator.active {
background-color: #43b581;
box-shadow: 0 0 8px #43b581;
}
button {
background-color: var(--primary);
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
width: 100%;
}
button:hover {
background-color: #4752c4;
}
button:active {
transform: scale(0.98);
}
button:disabled {
background-color: #4f545c;
cursor: not-allowed;
}
.visualizer {
width: 100%;
height: 60px;
background: rgba(0,0,0,0.1);
margin-top: 2rem;
border-radius: 4px;
display: flex;
align-items: flex-end;
gap: 2px;
padding: 4px;
box-sizing: border-box;
}
.bar {
flex: 1;
background: var(--primary);
height: 2px;
transition: height 0.1s ease;
}
</style>
</head>
<body>
<div class="card">
<h1>Audio Transmitter</h1>
<p>Transmit your microphone to Discord Voice</p>
<div class="status">
<div id="indicator" class="indicator"></div>
<span id="statusText">Disconnected</span>
</div>
<button id="toggleBtn">Start Transmitting</button>
<div style="margin-top: 2rem; border-top: 1px solid #4f545c; padding-top: 1.5rem;">
<h3>Listen to Discord</h3>
<button id="listenBtn" style="margin-bottom: 0.5rem; background-color: #43b581;">Join Listen Channel</button>
<audio id="discordAudio" controls style="width: 100%; display: none;"></audio>
<p id="listenStatus" style="font-size: 0.8rem; margin-top: 0.5rem;">Click button to listen</p>
</div>
<div class="visualizer" id="visualizer">
<!-- Bars will be generated by JS -->
</div>
</div>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const indicator = document.getElementById('indicator');
const statusText = document.getElementById('statusText');
const visualizer = document.getElementById('visualizer');
const discordAudio = document.getElementById('discordAudio');
const listenStatus = document.getElementById('listenStatus');
const listenBtn = document.getElementById('listenBtn');
let isListening = false;
listenBtn.onclick = () => {
if (isListening) {
discordAudio.pause();
discordAudio.src = '';
discordAudio.style.display = 'none';
listenBtn.innerText = 'Join Listen Channel';
listenBtn.style.backgroundColor = '#43b581';
listenStatus.innerText = 'Disconnected';
isListening = false;
} else {
discordAudio.src = '/listen';
discordAudio.style.display = 'block';
discordAudio.play();
listenBtn.innerText = 'Stop Listening';
listenBtn.style.backgroundColor = '#f04747';
listenStatus.innerText = 'Listening live...';
isListening = true;
}
};
// Create visualizer bars
for (let i = 0; i < 32; i++) {
const bar = document.createElement('div');
bar.className = 'bar';
visualizer.appendChild(bar);
}
const bars = document.querySelectorAll('.bar');
let isStreaming = false;
let socket = null;
let mediaRecorder = null;
let audioContext = null;
let analyser = null;
let dataArray = null;
toggleBtn.onclick = async () => {
if (isStreaming) {
stopStreaming();
} else {
await startStreaming();
}
};
async function startStreaming() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
// WebSocket Setup
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
socket = new WebSocket(`${protocol}//${window.location.host}`);
socket.binaryType = 'arraybuffer';
socket.onopen = () => {
indicator.classList.add('active');
statusText.innerText = 'Transmitting...';
toggleBtn.innerText = 'Stop Transmitting';
isStreaming = true;
// MediaRecorder Setup
mediaRecorder = new MediaRecorder(stream, {
mimeType: 'audio/webm;codecs=opus'
});
mediaRecorder.ondataavailable = async (event) => {
if (event.data.size > 0 && socket.readyState === WebSocket.OPEN) {
socket.send(await event.data.arrayBuffer());
}
};
mediaRecorder.start(100); // 100ms chunks
};
socket.onclose = () => {
stopStreaming();
};
// Visualizer Setup
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaStreamSource(stream);
analyser = audioContext.createAnalyser();
analyser.fftSize = 64;
source.connect(analyser);
dataArray = new Uint8Array(analyser.frequencyBinCount);
draw();
} catch (err) {
console.error('Error accessing microphone:', err);
alert('Could not access microphone. Make sure you are on HTTPS or localhost.');
}
}
function stopStreaming() {
if (mediaRecorder) mediaRecorder.stop();
if (socket) socket.close();
if (audioContext) audioContext.close();
indicator.classList.remove('active');
statusText.innerText = 'Disconnected';
toggleBtn.innerText = 'Start Transmitting';
isStreaming = false;
bars.forEach(bar => bar.style.height = '2px');
}
function draw() {
if (!isStreaming) return;
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
bars.forEach((bar, index) => {
const value = dataArray[index] || 0;
const percent = (value / 255) * 100;
bar.style.height = `${Math.max(2, percent)}%`;
});
}
</script>
</body>
</html>

13
src/index.ts
View File

@@ -1,6 +1,9 @@
import { Client } from "discord.js-selfbot-v13"; import { Client } from "discord.js-selfbot-v13";
import { startRecording } from "./recorder"; import { startRecording } from "./recorder";
import { config } from "./config"; import { config } from "./config";
import { startWebserver } from "./webserver";
import { discordPlayer } from "./player";
import { getVoiceConnection } from "@discordjs/voice";
// Validasi environment variables // Validasi environment variables
const token = process.env.DISCORD_TOKEN; const token = process.env.DISCORD_TOKEN;
@@ -42,6 +45,16 @@ client.on("ready", async () => {
console.log(`[bot] Joining voice channel: #${channel.name} (${channel.id})`); console.log(`[bot] Joining voice channel: #${channel.name} (${channel.id})`);
} }
await startRecording(client, channel as any); await startRecording(client, channel as any);
// Set up player connection
const connection = getVoiceConnection(guildId!);
if (connection) {
discordPlayer.setConnection(connection);
console.log("[bot] Player connected to voice channel");
}
// Start Webserver
startWebserver(3000);
}); });
client.on("error", (err) => { client.on("error", (err) => {

47
src/player.ts Normal file
View File

@@ -0,0 +1,47 @@
import {
createAudioPlayer,
createAudioResource,
AudioPlayerStatus,
VoiceConnection,
AudioPlayer,
StreamType
} from "@discordjs/voice";
import { Readable } from "stream";
export class DiscordPlayer {
private player: AudioPlayer;
private connection: VoiceConnection | null = null;
constructor() {
this.player = createAudioPlayer();
this.player.on(AudioPlayerStatus.Playing, () => {
console.log("[player] Audio player is now playing!");
});
this.player.on("error", error => {
console.error(`[player] Error: ${error.message}`);
});
}
public setConnection(connection: VoiceConnection) {
this.connection = connection;
this.connection.subscribe(this.player);
}
public playStream(stream: Readable) {
// We assume the stream is Opus or PCM.
// For MediaRecorder (webm/opus), we might need to parse it.
// But let's start with a simple resource.
const resource = createAudioResource(stream, {
inputType: StreamType.WebmOpus,
});
this.player.play(resource);
}
public stop() {
this.player.stop();
}
}
export const discordPlayer = new DiscordPlayer();

7
src/recorder.ts
View File

@@ -139,6 +139,13 @@ export async function startRecording(client: Client, channel: VoiceChannel): Pro
// Pipe: audioStream -> packetFilter -> oggStream -> out // Pipe: audioStream -> packetFilter -> oggStream -> out
audioStream.pipe(packetFilter).pipe(oggStream).pipe(out); audioStream.pipe(packetFilter).pipe(oggStream).pipe(out);
// Also forward to web listeners
oggStream.on('data', (chunk) => {
if ((global as any).broadcastToWeb) {
(global as any).broadcastToWeb(chunk);
}
});
if (config.verbose) { if (config.verbose) {
console.log(`[recorder] Recording user ${userId} → ${filename}`); console.log(`[recorder] Recording user ${userId} → ${filename}`);
} }

59
src/webserver.ts Normal file
View File

@@ -0,0 +1,59 @@
import express from "express";
import { WebSocketServer } from "ws";
import http from "http";
import path from "path";
import { PassThrough } from "stream";
import { discordPlayer } from "./player";
export function startWebserver(port: number = 3000) {
const app = express();
const server = http.createServer(app);
const wss = new WebSocketServer({ server });
const listeners = new Set<express.Response>();
app.use(express.static(path.join(__dirname, "../public")));
// Endpoint for receiving (listening) audio from Discord
app.get("/listen", (req, res) => {
res.setHeader("Content-Type", "audio/ogg");
listeners.add(res);
console.log(`[webserver] New listener connected. Total: ${listeners.size}`);
req.on("close", () => {
listeners.delete(res);
console.log(`[webserver] Listener disconnected. Total: ${listeners.size}`);
});
});
// Function to broadcast audio chunks to all listeners
(global as any).broadcastToWeb = (chunk: Buffer) => {
listeners.forEach(res => res.write(chunk));
};
wss.on("connection", (ws) => {
console.log("[webserver] New WebSocket connection");
const audioStream = new PassThrough();
discordPlayer.playStream(audioStream);
ws.on("message", (data: Buffer) => {
// Write incoming audio chunks to the stream
audioStream.write(data);
});
ws.on("close", () => {
console.log("[webserver] WebSocket connection closed");
audioStream.end();
});
ws.on("error", (err) => {
console.error("[webserver] WebSocket error:", err);
audioStream.end();
});
});
server.listen(port, () => {
console.log(`[webserver] Server listening on http://localhost:${port}`);
});
}