1690 lines
73 KiB
JavaScript
1690 lines
73 KiB
JavaScript
let currentVoiceWs = null;
|
|
let currentVoiceCallId = null;
|
|
let currentVoiceCallType = null;
|
|
let voiceWsHeartbeat = null;
|
|
let voiceActiveUsers = [];
|
|
let voiceAesKeyBytes = null;
|
|
let voiceAesCryptoKey = null;
|
|
let voiceUiContainer = null;
|
|
|
|
let micStream = null, audioContext = null, isAudioWorkletLoaded = false;
|
|
let micSourceNode = null, senderNode = null, receiverNode = null, audioEncoder = null;
|
|
let remoteAudio = {}, audioDecoders = {}, audioDecryptChains = {};
|
|
let knownVoiceUsers = new Set();
|
|
let isMicMuted = false;
|
|
let remoteVideos = {}, videoDecryptChains = {};
|
|
let camControl = null, screenControl = null;
|
|
let screenReceiverNode = null;
|
|
let voiceOutputAudio = null;
|
|
let voiceLoopSendPc = null, voiceLoopRecvPc = null;
|
|
let voicePlayoutDest = null;
|
|
let voiceLoopWatchdog = null;
|
|
let voiceRemoteStream = null;
|
|
let voiceLoopRestarts = 0;
|
|
let voiceDeviceChangeHandler = null;
|
|
let voiceDeviceChangeTimer = null;
|
|
let isVoiceSpeakerMode = false;
|
|
|
|
const SPEAKING_HANGOVER_MS = 400;
|
|
|
|
let voiceDragState = false;
|
|
let voiceResizeAbort = null;
|
|
|
|
function clampVoiceWindowToViewport(popupEl) {
|
|
const r = popupEl.getBoundingClientRect();
|
|
const W = window.innerWidth, H = window.innerHeight;
|
|
const w = Math.min(r.width, W);
|
|
const h = Math.min(r.height, H);
|
|
const l = Math.min(Math.max(r.left, 0), W - w);
|
|
const t = Math.min(Math.max(r.top, 0), H - h);
|
|
if (l !== r.left || t !== r.top || w !== r.width || h !== r.height) {
|
|
popupEl.style.right = "auto";
|
|
popupEl.style.bottom = "auto";
|
|
popupEl.style.width = w + "px";
|
|
popupEl.style.height = h + "px";
|
|
popupEl.style.left = l + "px";
|
|
popupEl.style.top = t + "px";
|
|
}
|
|
}
|
|
|
|
let voiceVolumeState = {};
|
|
|
|
function getStoredVolume(type, clientId) {
|
|
let v = voiceVolumeState[`${type}:${clientId}`];
|
|
return v === undefined ? 100 : v;
|
|
}
|
|
|
|
let voiceConnectedAt = null;
|
|
let voiceTimerInterval = null;
|
|
let voicePingMs = null;
|
|
|
|
function formatVoiceDuration(ms) {
|
|
let totalSec = Math.floor(ms / 1000);
|
|
let h = Math.floor(totalSec / 3600);
|
|
let m = Math.floor((totalSec % 3600) / 60);
|
|
let s = totalSec % 60;
|
|
let mm = String(m).padStart(2, "0"), ss = String(s).padStart(2, "0");
|
|
return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
|
|
}
|
|
|
|
function updateVoicePing() {
|
|
let pingEl = document.getElementById("voice-ping");
|
|
if (pingEl) pingEl.innerText = voicePingMs !== null ? `${voicePingMs} ms` : "";
|
|
}
|
|
|
|
function isMobileVoiceDevice() {
|
|
return /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent) && !!window.RTCPeerConnection;
|
|
}
|
|
|
|
function getNativeVoiceRouting() {
|
|
try {
|
|
return window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.VoiceRouting ? window.Capacitor.Plugins.VoiceRouting : null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function teardownVoiceLoopback() {
|
|
if (voiceLoopWatchdog) { clearTimeout(voiceLoopWatchdog); voiceLoopWatchdog = null; }
|
|
document.removeEventListener("click", voicePlayRetry, true);
|
|
window.removeEventListener("voicemodechanged", voiceModeChangedHandler);
|
|
if (voiceDeviceChangeHandler && navigator.mediaDevices && navigator.mediaDevices.removeEventListener) {
|
|
navigator.mediaDevices.removeEventListener("devicechange", voiceDeviceChangeHandler);
|
|
}
|
|
voiceDeviceChangeHandler = null;
|
|
clearTimeout(voiceDeviceChangeTimer);
|
|
if (voiceLoopSendPc) { try { voiceLoopSendPc.close(); } catch (e) {} voiceLoopSendPc = null; }
|
|
if (voiceLoopRecvPc) { try { voiceLoopRecvPc.close(); } catch (e) {} voiceLoopRecvPc = null; }
|
|
if (voicePlayoutDest) { try { voicePlayoutDest.disconnect(); } catch (e) {} voicePlayoutDest = null; }
|
|
if (voiceOutputAudio) {
|
|
try { voiceOutputAudio.pause(); } catch (e) {}
|
|
voiceOutputAudio.srcObject = null;
|
|
voiceOutputAudio.remove();
|
|
voiceOutputAudio = null;
|
|
}
|
|
voiceRemoteStream = null;
|
|
}
|
|
|
|
function voicePlayRetry() {
|
|
if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
|
|
}
|
|
|
|
function int16ToBase64(view) {
|
|
let bin = '';
|
|
const u8 = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
|
|
const STEP = 8192;
|
|
for (let i = 0; i < u8.length; i += STEP) {
|
|
bin += String.fromCharCode.apply(null, u8.subarray(i, Math.min(i + STEP, u8.length)));
|
|
}
|
|
return btoa(bin);
|
|
}
|
|
|
|
function handlePcmChunk(ev) {
|
|
const native = getNativeVoiceRouting();
|
|
if (!native || !native.nativeAudioFeed || !ev.data) return;
|
|
try {
|
|
native.nativeAudioFeed({ data: int16ToBase64(new Int16Array(ev.data)) }).catch(() => {});
|
|
} catch (e) {}
|
|
}
|
|
|
|
function stopNativePlayback() {
|
|
const native = getNativeVoiceRouting();
|
|
if (native && native.nativeAudioStop) native.nativeAudioStop().catch(() => {});
|
|
}
|
|
|
|
// Fired natively when Android reverted MODE_IN_COMMUNICATION and the plugin
|
|
// restored it - Chromium's playout track must be re-initialized afterwards.
|
|
function voiceModeChangedHandler() {
|
|
console.debug("Voice: native mode restore detected, replugging playout");
|
|
setTimeout(() => replugVoiceOutputElement(), 150);
|
|
setTimeout(() => replugVoiceOutputElement(), 700);
|
|
}
|
|
|
|
function voicePlayoutOk() {
|
|
let connected = voiceLoopRecvPc && voiceLoopRecvPc.connectionState === "connected";
|
|
let playing = voiceOutputAudio && !voiceOutputAudio.paused;
|
|
return !!connected && !!playing;
|
|
}
|
|
|
|
// Re-attaching the stream forces the browser audio stack to re-initialize its
|
|
// output track - needed after communication device changes on Android.
|
|
async function replugVoiceOutputElement() {
|
|
if (!voiceOutputAudio || !voiceRemoteStream) return;
|
|
console.debug("Voice: replugging WebRTC playout element");
|
|
try { voiceOutputAudio.pause(); } catch (e) {}
|
|
voiceOutputAudio.srcObject = null;
|
|
voiceOutputAudio.srcObject = voiceRemoteStream;
|
|
try { await voiceOutputAudio.play(); } catch (e) {}
|
|
}
|
|
|
|
function fallbackVoiceToMediaOutput() {
|
|
if (!receiverNode || !audioContext || !voicePlayoutDest) return;
|
|
console.warn("Voice: WebRTC playout unavailable, falling back to media output");
|
|
teardownVoiceLoopback();
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
try { receiverNode.connect(audioContext.destination); } catch (e) {}
|
|
}
|
|
|
|
function recoverVoiceLoopback() {
|
|
if (!receiverNode || !audioContext || !voicePlayoutDest) return;
|
|
const native = getNativeVoiceRouting();
|
|
|
|
// First aid: re-plug the playout element (fixes stuck routes after device switches)
|
|
replugVoiceOutputElement().then(() => {
|
|
setTimeout(() => {
|
|
if (!voicePlayoutDest || voicePlayoutOk()) return;
|
|
if (native && voiceLoopRestarts < 2) {
|
|
voiceLoopRestarts++;
|
|
console.warn("Voice: restarting WebRTC loopback (attempt " + voiceLoopRestarts + ")");
|
|
const wasSpeaker = isVoiceSpeakerMode;
|
|
teardownVoiceLoopback();
|
|
isVoiceSpeakerMode = wasSpeaker;
|
|
setupVoiceOutput();
|
|
} else {
|
|
fallbackVoiceToMediaOutput();
|
|
}
|
|
}, 800);
|
|
});
|
|
}
|
|
|
|
function setupVoiceOutput() {
|
|
if (!audioContext || !receiverNode) return;
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
if (screenReceiverNode) {
|
|
try { screenReceiverNode.disconnect(); } catch (e) {}
|
|
screenReceiverNode.connect(audioContext.destination);
|
|
}
|
|
|
|
const native = getNativeVoiceRouting();
|
|
|
|
// App + native plugin: the mixed call audio is played by a native AudioTrack
|
|
// (USAGE_VOICE_COMMUNICATION), so it follows the call volume slider and the
|
|
// earpiece/speaker switch. Nothing is output through the WebAudio graph.
|
|
// The receiver worklet forwards mixed PCM straight here (~20 ms packets).
|
|
if (native && isMobileVoiceDevice()) {
|
|
stopNativePlayback();
|
|
receiverNode.port.onmessage = handlePcmChunk;
|
|
if (native.nativeAudioStart) native.nativeAudioStart({ sampleRate: audioContext.sampleRate }).catch(() => {});
|
|
return;
|
|
}
|
|
|
|
if (!isMobileVoiceDevice()) {
|
|
receiverNode.connect(audioContext.destination);
|
|
return;
|
|
}
|
|
|
|
// Browser-only speaker mode plays through plain media output.
|
|
// With the native plugin present, routing stays on the call path
|
|
// and the speaker switch is handled natively.
|
|
if (isVoiceSpeakerMode) {
|
|
receiverNode.connect(audioContext.destination);
|
|
return;
|
|
}
|
|
|
|
voiceLoopRestarts = 0;
|
|
teardownVoiceLoopback();
|
|
voicePlayoutDest = audioContext.createMediaStreamDestination();
|
|
receiverNode.connect(voicePlayoutDest);
|
|
|
|
voiceLoopSendPc = new RTCPeerConnection();
|
|
voiceLoopRecvPc = new RTCPeerConnection();
|
|
voiceLoopSendPc.onicecandidate = e => { if (e.candidate) try { voiceLoopRecvPc.addIceCandidate(e.candidate); } catch (err) {} };
|
|
voiceLoopRecvPc.onicecandidate = e => { if (e.candidate) try { voiceLoopSendPc.addIceCandidate(e.candidate); } catch (err) {} };
|
|
voiceLoopRecvPc.onconnectionstatechange = () => {
|
|
const st = voiceLoopRecvPc && voiceLoopRecvPc.connectionState;
|
|
if (st === "failed") recoverVoiceLoopback();
|
|
};
|
|
voiceLoopRecvPc.ontrack = e => {
|
|
voiceRemoteStream = e.streams[0];
|
|
if (!voiceOutputAudio) {
|
|
voiceOutputAudio = document.createElement("audio");
|
|
voiceOutputAudio.autoplay = true;
|
|
voiceOutputAudio.setAttribute("playsinline", "");
|
|
document.body.appendChild(voiceOutputAudio);
|
|
}
|
|
voiceOutputAudio.srcObject = voiceRemoteStream;
|
|
voiceOutputAudio.play().catch(() => {});
|
|
};
|
|
document.addEventListener("click", voicePlayRetry, true);
|
|
window.addEventListener("voicemodechanged", voiceModeChangedHandler);
|
|
if (navigator.mediaDevices && navigator.mediaDevices.addEventListener) {
|
|
voiceDeviceChangeHandler = () => {
|
|
clearTimeout(voiceDeviceChangeTimer);
|
|
// Audio route changed (BT/headset/speaker) - re-init the playout track
|
|
voiceDeviceChangeTimer = setTimeout(() => replugVoiceOutputElement(), 400);
|
|
};
|
|
navigator.mediaDevices.addEventListener("devicechange", voiceDeviceChangeHandler);
|
|
}
|
|
voiceLoopSendPc.addTrack(voicePlayoutDest.stream.getAudioTracks()[0], voicePlayoutDest.stream);
|
|
voiceLoopSendPc.createOffer()
|
|
.then(offer => voiceLoopSendPc.setLocalDescription(offer))
|
|
.then(() => voiceLoopRecvPc.setRemoteDescription(voiceLoopSendPc.localDescription))
|
|
.then(() => voiceLoopRecvPc.createAnswer())
|
|
.then(answer => voiceLoopRecvPc.setLocalDescription(answer))
|
|
.then(() => voiceLoopSendPc.setRemoteDescription(voiceLoopRecvPc.localDescription))
|
|
.catch(() => {
|
|
recoverVoiceLoopback();
|
|
});
|
|
|
|
// Safety net: verify the WebRTC playout actually produces sound and repair it if not
|
|
if (voiceLoopWatchdog) clearTimeout(voiceLoopWatchdog);
|
|
voiceLoopWatchdog = setTimeout(() => {
|
|
voiceLoopWatchdog = null;
|
|
if (!voicePlayoutDest) return;
|
|
voicePlayRetry();
|
|
setTimeout(() => {
|
|
if (!voicePlayoutDest || voicePlayoutOk()) return;
|
|
recoverVoiceLoopback();
|
|
}, 600);
|
|
}, 4000);
|
|
}
|
|
|
|
window.toggleVoiceSpeakerMode = async function() {
|
|
isVoiceSpeakerMode = !isVoiceSpeakerMode;
|
|
let btn = document.getElementById("voice-btn-speaker");
|
|
if (btn) btn.classList.toggle("voice-btn-active", isVoiceSpeakerMode);
|
|
|
|
const native = getNativeVoiceRouting();
|
|
if (native && native.setSpeaker) {
|
|
// Native routing keeps playback on the call volume stream - only the
|
|
// physical output (earpiece <-> loudspeaker) changes, like a phone call.
|
|
// The native AudioTrack follows the communication device automatically.
|
|
try { await native.setSpeaker({ enabled: isVoiceSpeakerMode }); } catch (e) {}
|
|
setTimeout(() => replugVoiceOutputElement(), 250);
|
|
setTimeout(() => replugVoiceOutputElement(), 900);
|
|
setTimeout(() => { if (voicePlayoutDest && !voicePlayoutOk()) recoverVoiceLoopback(); }, 1700);
|
|
return;
|
|
}
|
|
|
|
if (!receiverNode) return;
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
|
|
if (!isVoiceSpeakerMode && voicePlayoutDest) {
|
|
receiverNode.connect(voicePlayoutDest);
|
|
if (voiceOutputAudio) voiceOutputAudio.play().catch(() => {});
|
|
} else {
|
|
receiverNode.connect(audioContext.destination);
|
|
if (voiceOutputAudio) { try { voiceOutputAudio.pause(); } catch (e) {} }
|
|
}
|
|
};
|
|
|
|
function setVoiceStatus(state) {
|
|
let el = document.getElementById("voice-status");
|
|
if (!el) return;
|
|
el.classList.toggle("connected", state === "connected");
|
|
el.classList.toggle("connecting", state === "connecting");
|
|
el.classList.toggle("disconnected", state === "disconnected");
|
|
|
|
let textEl = el.querySelector(".voice-status-text");
|
|
if (state === "connected") {
|
|
if (voiceConnectedAt === null) voiceConnectedAt = Date.now();
|
|
if (!voiceTimerInterval) {
|
|
voiceTimerInterval = setInterval(() => {
|
|
let tickEl = document.querySelector("#voice-status .voice-status-text");
|
|
if (tickEl && voiceConnectedAt !== null) tickEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
|
}, 1000);
|
|
}
|
|
if (textEl) textEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
|
updateVoicePing();
|
|
} else {
|
|
if (voiceTimerInterval) { clearInterval(voiceTimerInterval); voiceTimerInterval = null; }
|
|
voiceConnectedAt = null;
|
|
if (state === "disconnected") { voicePingMs = null; updateVoicePing(); }
|
|
if (textEl) textEl.innerText = processBlah(state === "disconnected" ? "status.voice.disconnected" : "status.voice.connecting");
|
|
}
|
|
}
|
|
|
|
function setTileSpeaking(clientId, speaking, streamDecoderId = null) {
|
|
let tile = document.getElementById(`voice-tile-${clientId}`);
|
|
if (streamDecoderId) {
|
|
let streamTile = document.getElementById(`voice-tile-stream-${streamDecoderId}`);
|
|
if (streamTile) tile = streamTile;
|
|
}
|
|
if (!tile) return;
|
|
|
|
if (tile._speakingTimer) {
|
|
clearTimeout(tile._speakingTimer);
|
|
tile._speakingTimer = null;
|
|
}
|
|
|
|
if (speaking) {
|
|
tile.classList.add("speaking");
|
|
tile._speakingTimer = setTimeout(() => {
|
|
tile._speakingTimer = null;
|
|
tile.classList.remove("speaking");
|
|
}, SPEAKING_HANGOVER_MS);
|
|
} else {
|
|
tile.classList.remove("speaking");
|
|
}
|
|
}
|
|
|
|
function clearAllSpeaking() {
|
|
for (const el of document.querySelectorAll(".voice-tile.speaking")) {
|
|
if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
|
|
el.classList.remove("speaking");
|
|
}
|
|
}
|
|
|
|
setInterval(() => {
|
|
const now = Date.now();
|
|
let changed = false;
|
|
for (const [decoderId, data] of Object.entries(remoteVideos)) {
|
|
if (now - data.lastUpdate > 3000) {
|
|
if (data.decoder) { try { data.decoder.close(); } catch (e) {} }
|
|
if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId];
|
|
delete videoDecryptChains[decoderId];
|
|
changed = true;
|
|
}
|
|
}
|
|
if (changed) updateVoiceUIUsers();
|
|
}, 2000);
|
|
|
|
const voiceWorkletCode = `
|
|
class AudioProcessor extends AudioWorkletProcessor {
|
|
|
|
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
|
process(inputs) {
|
|
const input = inputs[0][0];
|
|
if (!input) return true;
|
|
let sumSquares = 0;
|
|
for (let i = 0; i < input.length; i++) {
|
|
let s = Math.max(-1, Math.min(1, input[i]));
|
|
sumSquares += s * s;
|
|
this.buffer[this.pointer++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
|
|
if (this.pointer >= 1024) {
|
|
const rms = Math.sqrt(sumSquares / 1024);
|
|
const db = 20 * Math.log10(rms || 0.0001);
|
|
this.port.postMessage({ audioData: this.buffer.buffer, db: db },[this.buffer.buffer]);
|
|
this.buffer = new Int16Array(1024);
|
|
this.pointer = 0;
|
|
sumSquares = 0;
|
|
}
|
|
} return true;
|
|
}
|
|
}
|
|
class AudioReceiver extends AudioWorkletProcessor {
|
|
// Jitter buffer targets in samples (@48 kHz):
|
|
// PREBUF_START - initial prebuffer before first playback (~43 ms)
|
|
// PREBUF_RESUME - re-prebuffer after a starvation event (~32 ms)
|
|
// HARD_LIMIT - burst ceiling (~128 ms): snap back to target immediately
|
|
// Backlog slightly above target is drained by a gentle trim (1 sample per
|
|
// quantum) instead of letting latency creep up to the hard limit.
|
|
constructor(options) {
|
|
super();
|
|
this.users = {};
|
|
this.volumes = {};
|
|
const opts = (options && options.processorOptions) || {};
|
|
this.forward = !!opts.forward;
|
|
this.acc = new Int16Array(960); // ~20 ms @ 48 kHz
|
|
this.accLen = 0;
|
|
|
|
this.port.onmessage = (e) => {
|
|
if (e.data.action === 'clear') { this.users = {}; this.volumes = {}; return; }
|
|
if (e.data.action === 'setVolume') { this.volumes[e.data.clientId] = e.data.volume; return; }
|
|
if (e.data.action === 'remove') { delete this.users[e.data.clientId]; return; }
|
|
|
|
const { clientId, audioData } = e.data;
|
|
if (!this.users[clientId]) this.users[clientId] = { buffer: new Int16Array(65536), readPtr: 0, writePtr: 0, buffering: true, started: false };
|
|
const user = this.users[clientId];
|
|
const intData = new Int16Array(audioData);
|
|
for (let i = 0; i < intData.length; i++) {
|
|
user.buffer[user.writePtr] = intData[i];
|
|
user.writePtr = (user.writePtr + 1) % 65536;
|
|
}
|
|
};
|
|
}
|
|
process(inputs, outputs) {
|
|
const output = outputs[0][0];
|
|
if (!output) return true;
|
|
output.fill(0);
|
|
for (const id in this.users) {
|
|
const user = this.users[id];
|
|
let available = (user.writePtr - user.readPtr + 65536) % 65536;
|
|
if (user.buffering && available >= (user.started ? 1536 : 2048)) { user.buffering = false; user.started = true; }
|
|
|
|
if (!user.buffering) {
|
|
if (available < output.length) { user.buffering = true; }
|
|
else {
|
|
if (available > 6144) user.readPtr = (user.writePtr - 2048 + 65536) % 65536;
|
|
else if (available > 2049) user.readPtr = (user.readPtr + 1) % 65536;
|
|
let vol = this.volumes[id] !== undefined ? this.volumes[id] : 1.0;
|
|
for (let i = 0; i < output.length; i++) {
|
|
output[i] += (user.buffer[user.readPtr] / 32768) * vol;
|
|
user.readPtr = (user.readPtr + 1) % 65536;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (this.forward && this.port) {
|
|
for (let i = 0; i < output.length; i++) {
|
|
const s = Math.max(-1, Math.min(1, output[i]));
|
|
this.acc[this.accLen++] = s < 0 ? s * 0x8000 : s * 0x7FFF;
|
|
if (this.accLen >= this.acc.length) {
|
|
this.port.postMessage(this.acc.buffer, [this.acc.buffer]);
|
|
this.acc = new Int16Array(960);
|
|
this.accLen = 0;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
registerProcessor('audio-sender', AudioProcessor);
|
|
registerProcessor('audio-receiver', AudioReceiver);`;
|
|
|
|
class TaskQueue {
|
|
constructor() { this.queue = []; this.isProcessing = false; }
|
|
enqueue(task) { this.queue.push(task); this.processNext(); }
|
|
async processNext() {
|
|
if (this.isProcessing || this.queue.length === 0) return;
|
|
this.isProcessing = true;
|
|
try { await this.queue.shift()(); } catch (e) { }
|
|
this.isProcessing = false;
|
|
this.processNext();
|
|
}
|
|
clear() { this.queue = []; }
|
|
}
|
|
|
|
async function initiateVoiceCall(roomId = null) {
|
|
if (currentVoiceWs) {
|
|
showBlahNotification("error:already.in.call");
|
|
return;
|
|
}
|
|
currentVoiceCallType = window.currentRoomType === "groups" ? "groups" : "dms";
|
|
currentVoiceCallId = roomId || window.currentDmId;
|
|
|
|
showAction("action.call.init", "callinit");
|
|
let res = await fetchEncrypted("room/voice/join", JSON.stringify({
|
|
string1: currentVoiceCallType,
|
|
string2: currentVoiceCallId
|
|
}));
|
|
clearAction("callinit");
|
|
|
|
if (res.startsWith("success:")) {
|
|
let bestIp = res.split("success:")[1];
|
|
if (!bestIp.startsWith("ws://") && !bestIp.startsWith("wss://")) {
|
|
bestIp = bestIp.includes("localhost") || bestIp.includes("127.0.0.1") ? "ws://" + bestIp : "wss://" + bestIp;
|
|
}
|
|
await startVoiceSession(bestIp);
|
|
} else {
|
|
showBlahNotification(res);
|
|
}
|
|
}
|
|
|
|
async function startVoiceSession(serverUrl) {
|
|
showVoiceUI();
|
|
updateVoiceUIUsers();
|
|
setVoiceStatus("connecting");
|
|
updateVoiceChatTitle();
|
|
|
|
try {
|
|
const wsUrl = new URL(serverUrl);
|
|
if (!wsUrl.pathname.endsWith("/ws")) {
|
|
wsUrl.pathname = (wsUrl.pathname === "/" ? "" : wsUrl.pathname) + "/ws";
|
|
}
|
|
wsUrl.searchParams.set("room", currentVoiceCallId);
|
|
wsUrl.searchParams.set("userId", window.id);
|
|
wsUrl.searchParams.set("secret", "none");
|
|
|
|
currentVoiceWs = new WebSocket(wsUrl.toString());
|
|
currentVoiceWs.binaryType = 'arraybuffer';
|
|
|
|
currentVoiceWs.onopen = async () => {
|
|
setVoiceStatus("connected");
|
|
let btn = document.getElementById("voice-btn-mic");
|
|
if (btn) {
|
|
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
|
else btn.classList.remove("voice-btn-danger");
|
|
}
|
|
|
|
const fetchUsers = async () => {
|
|
if (!currentVoiceWs || currentVoiceWs.readyState !== WebSocket.OPEN || !currentVoiceCallId) return;
|
|
try {
|
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
|
const t0 = performance.now();
|
|
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
|
const usersRaw = await res.json();
|
|
voicePingMs = Math.round(performance.now() - t0);
|
|
updateVoicePing();
|
|
const users = usersRaw.map(u => String(u));
|
|
let changed = (users.length !== voiceActiveUsers.length);
|
|
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
|
if(changed) {
|
|
voiceActiveUsers = users;
|
|
updateVoiceUIUsers();
|
|
}
|
|
} catch (e) {}
|
|
};
|
|
fetchUsers();
|
|
voiceWsHeartbeat = setInterval(fetchUsers, 5000);
|
|
|
|
const micConstraints = {audio: {echoCancellation: false, noiseSuppression: false, autoGainControl: false}};
|
|
micStream = await navigator.mediaDevices.getUserMedia(micConstraints);
|
|
|
|
const nativeRouting = getNativeVoiceRouting();
|
|
if (nativeRouting && nativeRouting.startCall) {
|
|
try { await nativeRouting.startCall(); } catch (e) {}
|
|
}
|
|
|
|
if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: 48000});
|
|
if (!isAudioWorkletLoaded) {
|
|
await audioContext.audioWorklet.addModule(URL.createObjectURL(new Blob([voiceWorkletCode], {type: 'application/javascript'})));
|
|
senderNode = new AudioWorkletNode(audioContext, 'audio-sender');
|
|
const forwardPcm = !!(getNativeVoiceRouting() && isMobileVoiceDevice());
|
|
receiverNode = new AudioWorkletNode(audioContext, 'audio-receiver', {processorOptions: {forward: forwardPcm}});
|
|
screenReceiverNode = new AudioWorkletNode(audioContext, 'audio-receiver');
|
|
isAudioWorkletLoaded = true;
|
|
}
|
|
if (audioContext.state === 'suspended') await audioContext.resume();
|
|
setupVoiceOutput();
|
|
|
|
micSourceNode = audioContext.createMediaStreamSource(micStream);
|
|
micSourceNode.connect(senderNode);
|
|
|
|
let vadHangover = 0;
|
|
senderNode.port.onmessage = async (e) => {
|
|
if (currentVoiceWs.readyState !== WebSocket.OPEN) return;
|
|
const {audioData, db} = e.data;
|
|
const sensitivity = -65;
|
|
const percent = Math.max(0, Math.min(100, (db + 80) / 80 * 100));
|
|
|
|
let micLevelBar = document.getElementById("voice-mic-level");
|
|
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
|
|
|
if (db >= sensitivity) vadHangover = 75;
|
|
let isSpeaking = vadHangover > 0 && !isMicMuted;
|
|
setTileSpeaking(String(window.id), isSpeaking);
|
|
|
|
if (vadHangover > 0 && !isMicMuted) {
|
|
vadHangover--;
|
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
|
|
|
|
if (!voiceAesCryptoKey) return;
|
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, audioData);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
} else {
|
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
|
}
|
|
};
|
|
};
|
|
|
|
currentVoiceWs.onmessage = async (e) => {
|
|
const arrayBuffer = e.data;
|
|
const view = new DataView(arrayBuffer);
|
|
let clientId = view.getBigUint64(0, true).toString();
|
|
|
|
if (!voiceActiveUsers.includes(clientId) && clientId !== String(window.id)) {
|
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
|
fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`).then(res => res.json()).then(usersRaw => {
|
|
voiceActiveUsers = usersRaw.map(u => String(u));
|
|
updateVoiceUIUsers();
|
|
}).catch(()=>{});
|
|
}
|
|
|
|
const type = view.getUint8(8);
|
|
const isKeyFrame = view.getUint8(9) === 1;
|
|
const iv = new Uint8Array(arrayBuffer, 10, 12);
|
|
const ciphertext = new Uint8Array(arrayBuffer, 22);
|
|
|
|
if (!voiceAesCryptoKey) return;
|
|
|
|
if (type === 0 || type === 4) {
|
|
const isScreenAudio = (type === 4);
|
|
const audioId = isScreenAudio ? `${clientId}_screen` : clientId;
|
|
if (!remoteAudio[audioId]) remoteAudio[audioId] = { lastUpdate: Date.now() };
|
|
remoteAudio[audioId].lastUpdate = Date.now();
|
|
|
|
if (!audioDecryptChains[audioId]) audioDecryptChains[audioId] = new TaskQueue();
|
|
|
|
const targetReceiver = isScreenAudio ? screenReceiverNode : receiverNode;
|
|
audioDecryptChains[audioId].enqueue(async () => {
|
|
try {
|
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
|
if(targetReceiver) targetReceiver.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
|
|
|
setTileSpeaking(clientId, true, isScreenAudio ? `${clientId}-2` : null);
|
|
} catch (err) {}
|
|
});
|
|
} else if (type === 1 || type === 2) {
|
|
const decoderId = `${clientId}-${type}`;
|
|
if (!videoDecryptChains[decoderId]) videoDecryptChains[decoderId] = new TaskQueue();
|
|
|
|
videoDecryptChains[decoderId].enqueue(async () => {
|
|
try {
|
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
|
|
|
if (!remoteVideos[decoderId]) {
|
|
const canvas = document.createElement('canvas');
|
|
remoteVideos[decoderId] = {
|
|
lastUpdate: Date.now(),
|
|
hasKeyFrame: false,
|
|
decoder: null,
|
|
canvas: canvas
|
|
};
|
|
updateVoiceUIUsers();
|
|
}
|
|
|
|
const streamData = remoteVideos[decoderId];
|
|
streamData.lastUpdate = Date.now();
|
|
|
|
if (!streamData.decoder) {
|
|
if (!isKeyFrame) return;
|
|
const canvas = streamData.canvas;
|
|
const ctx = canvas.getContext('2d');
|
|
streamData.decoder = new VideoDecoder({
|
|
output: (frame) => {
|
|
canvas.width = frame.displayWidth;
|
|
canvas.height = frame.displayHeight;
|
|
ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
|
|
frame.close();
|
|
},
|
|
error: e => {
|
|
if (remoteVideos[decoderId]) {
|
|
try { remoteVideos[decoderId].decoder.close(); } catch(err) {}
|
|
remoteVideos[decoderId].decoder = null;
|
|
remoteVideos[decoderId].hasKeyFrame = false;
|
|
}
|
|
}
|
|
});
|
|
streamData.decoder.configure({codec: 'av01.0.04M.08'});
|
|
streamData.hasKeyFrame = true;
|
|
}
|
|
|
|
if (!streamData.hasKeyFrame) {
|
|
if (isKeyFrame) streamData.hasKeyFrame = true;
|
|
else return;
|
|
}
|
|
|
|
const chunk = new EncodedVideoChunk({
|
|
type: isKeyFrame ? 'key' : 'delta',
|
|
timestamp: Math.trunc(performance.now() * 1000),
|
|
data: decryptedBuffer
|
|
});
|
|
|
|
try {
|
|
streamData.decoder.decode(chunk);
|
|
} catch(err) {
|
|
try { streamData.decoder.close(); } catch(e){}
|
|
streamData.decoder = null;
|
|
streamData.hasKeyFrame = false;
|
|
}
|
|
} catch (err) {}
|
|
});
|
|
} else if (type === 3) {
|
|
crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext).then(decrypted => {
|
|
const stoppedTypeId = new Uint8Array(decrypted)[0];
|
|
if (stoppedTypeId === 4) {
|
|
const audioId = `${clientId}_screen`;
|
|
if (remoteAudio[audioId]) {
|
|
if(audioDecryptChains[audioId]) audioDecryptChains[audioId].clear();
|
|
delete audioDecryptChains[audioId]; delete remoteAudio[audioId];
|
|
if(screenReceiverNode) screenReceiverNode.port.postMessage({ action: 'remove', clientId: audioId });
|
|
}
|
|
} else {
|
|
const decoderId = `${clientId}-${stoppedTypeId}`;
|
|
if (remoteVideos[decoderId]) {
|
|
try { if(remoteVideos[decoderId].decoder) remoteVideos[decoderId].decoder.close(); } catch (e) {}
|
|
if(videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId]; delete videoDecryptChains[decoderId];
|
|
updateVoiceUIUsers();
|
|
}
|
|
}
|
|
}).catch(() => {});
|
|
}
|
|
};
|
|
|
|
currentVoiceWs.onclose = () => {
|
|
endVoiceSession();
|
|
};
|
|
|
|
} catch(err) {
|
|
console.error(err);
|
|
showBlahNotification("error:call.connect.failed");
|
|
endVoiceSession();
|
|
}
|
|
}
|
|
|
|
function handleCallUpdate(data) {
|
|
let parts = data.split(":");
|
|
let roomId = parts[1];
|
|
let state = [];
|
|
if(parts.slice(2).join(":") !== "") {
|
|
let stateRaw = JSON.parse(parts.slice(2).join(":"));
|
|
state = stateRaw.map(u => String(u));
|
|
}
|
|
voiceActiveUsers = state;
|
|
|
|
if (currentVoiceCallId === roomId) {
|
|
let myIdStr = String(window.id);
|
|
if (!voiceAesKeyBytes && state.length === 1 && state[0] === myIdStr) {
|
|
voiceAesKeyBytes = crypto.getRandomValues(new Uint8Array(32));
|
|
crypto.subtle.importKey("raw", voiceAesKeyBytes, {name: "AES-GCM"}, false, ["encrypt", "decrypt"])
|
|
.then(k => voiceAesCryptoKey = k);
|
|
}
|
|
if (voiceAesKeyBytes) {
|
|
for (let u of state) {
|
|
if (u !== myIdStr) sendVoiceSignalToUser(u, roomId);
|
|
}
|
|
}
|
|
updateVoiceUIUsers();
|
|
|
|
for (let u in remoteAudio) {
|
|
let pureU = u.replace("_screen", "");
|
|
if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
|
|
if (audioDecoders[u]) try { audioDecoders[u].close(); } catch(e){}
|
|
delete audioDecoders[u];
|
|
delete remoteAudio[u];
|
|
const rn = u.endsWith("_screen") ? screenReceiverNode : receiverNode;
|
|
if(rn) rn.port.postMessage({ action: 'remove', clientId: u });
|
|
}
|
|
}
|
|
|
|
for (let decoderId in remoteVideos) {
|
|
let pureU = decoderId.split('-')[0];
|
|
if (!voiceActiveUsers.includes(pureU) && pureU !== myIdStr) {
|
|
if (remoteVideos[decoderId].decoder) { try { remoteVideos[decoderId].decoder.close(); } catch(e){} }
|
|
if (videoDecryptChains[decoderId]) videoDecryptChains[decoderId].clear();
|
|
delete remoteVideos[decoderId];
|
|
delete videoDecryptChains[decoderId];
|
|
updateVoiceUIUsers();
|
|
}
|
|
}
|
|
} else if (state.length > 0 && !state.includes(String(window.id))) {
|
|
// Someone is in a call, and we are not. Show incoming call banner if it's the current room.
|
|
if (window.currentDmId === roomId) {
|
|
showIncomingCallUI(roomId);
|
|
}
|
|
} else if (state.length === 0) {
|
|
dismissIncomingCall();
|
|
}
|
|
}
|
|
|
|
async function resolveCallerInfo(roomId) {
|
|
if (window.fetchEncrypted) {
|
|
try {
|
|
let infoPayload = await fetchEncrypted("group/info", roomId);
|
|
if (infoPayload && infoPayload.startsWith("{")) {
|
|
let info = JSON.parse(infoPayload);
|
|
if (info.string2) {
|
|
let pfpUrl = null;
|
|
if (window.getGroupAvatarUrl) {
|
|
try { pfpUrl = await getGroupAvatarUrl(roomId, info.string2); } catch (e) {}
|
|
}
|
|
return { name: info.string2, pfpUrl };
|
|
}
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
let targetId = String(roomId);
|
|
let parts = targetId.split('_');
|
|
let myId = `${window.id};${window.host}`;
|
|
if (parts.length === 2 && (parts[0] === myId || parts[1] === myId)) {
|
|
targetId = parts[0] === myId ? parts[1] : parts[0];
|
|
}
|
|
|
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
|
if (!name && window.fetchAsync) {
|
|
try {
|
|
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
|
if (fetched && !fetched.startsWith("error:")) {
|
|
name = fetched;
|
|
if (window.dmUsernameCache) window.dmUsernameCache[targetId] = fetched;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[targetId] : null;
|
|
if (!pfpUrl && window.getAvatarUrl) {
|
|
try { pfpUrl = await window.getAvatarUrl(targetId, name || "User"); } catch (e) {}
|
|
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[targetId] = pfpUrl;
|
|
}
|
|
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
|
}
|
|
|
|
function showIncomingCallUI(roomId) {
|
|
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
|
|
|
let cachedName = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
|
if (cachedName && cachedName.includes(':')) cachedName = cachedName.split(':')[0];
|
|
let cachedPfp = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
|
|
|
let incomingUi = document.createElement("div");
|
|
incomingUi.id = "incoming-call-popup";
|
|
incomingUi.innerHTML = `
|
|
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
|
<div class="incoming-call-info">
|
|
<span class="incoming-call-name">${cachedName || "..."}</span>
|
|
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
|
</div>
|
|
<div class="incoming-call-actions">
|
|
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
|
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
|
</button>
|
|
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
|
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
|
</button>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(incomingUi);
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => incomingUi.classList.add("show"));
|
|
});
|
|
|
|
resolveCallerInfo(roomId).then(({name, pfpUrl}) => {
|
|
if (!document.body.contains(incomingUi)) return;
|
|
let nameEl = incomingUi.querySelector(".incoming-call-name");
|
|
let avatarEl = incomingUi.querySelector(".incoming-call-avatar");
|
|
if (nameEl) nameEl.innerText = name;
|
|
if (avatarEl && pfpUrl) avatarEl.src = pfpUrl;
|
|
});
|
|
}
|
|
|
|
function dismissIncomingCall() {
|
|
let el = document.getElementById("incoming-call-popup");
|
|
if (!el || el.classList.contains("hide")) return;
|
|
el.classList.remove("show");
|
|
el.classList.add("hide");
|
|
setTimeout(() => el.remove(), 300);
|
|
}
|
|
|
|
function joinIncomingCall(roomId) {
|
|
dismissIncomingCall();
|
|
initiateVoiceCall(roomId);
|
|
}
|
|
|
|
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
|
try {
|
|
let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${targetUserId}`);
|
|
let publicKeys = JSON.parse(publicKeysRaw);
|
|
let hybrid = await deriveHybridKeyToUser(publicKeys);
|
|
|
|
let encForMember = await encryptAesGcmToBase64(uint8ToBase64(voiceAesKeyBytes), hybrid.aesKeyBytes);
|
|
let setupPayloadJson = JSON.stringify({
|
|
v: 1,
|
|
ctMlKem: hybrid.ciphertextMlKemBase64,
|
|
enc: encForMember
|
|
});
|
|
|
|
let payload = JSON.stringify({
|
|
string1: currentVoiceCallType,
|
|
string2: roomId,
|
|
string3: JSON.stringify({ to: targetUserId, from: window.id, data: setupPayloadJson })
|
|
});
|
|
await fetchEncrypted("room/signal", payload);
|
|
} catch(e) {
|
|
console.error("Failed to send voice signal", e);
|
|
}
|
|
}
|
|
|
|
async function handleRoomSignal(data) {
|
|
let parts = data.split(":");
|
|
let roomId = parts[1];
|
|
let signalStr = parts.slice(2).join(":");
|
|
let signalObj = JSON.parse(signalStr);
|
|
|
|
if (String(signalObj.to) === String(window.id) && roomId === currentVoiceCallId && !voiceAesKeyBytes) {
|
|
try {
|
|
let setupData = JSON.parse(signalObj.data);
|
|
let publicKeysRaw = await fetchAsync(`${url}/user/key/getpublic?id=${signalObj.from}`);
|
|
let otherPublicKeysObj = JSON.parse(publicKeysRaw);
|
|
let aesKeyBytes = await deriveHybridKeyFromSetup(otherPublicKeysObj, setupData.ctMlKem);
|
|
let decRoomKeyB64 = await decryptAesGcmFromBase64(setupData.enc, aesKeyBytes);
|
|
voiceAesKeyBytes = base64ToUint8(decRoomKeyB64);
|
|
voiceAesCryptoKey = await crypto.subtle.importKey("raw", voiceAesKeyBytes, {name: "AES-GCM"}, false, ["encrypt", "decrypt"]);
|
|
} catch(e) {
|
|
console.error("Signal decryption failed", e);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function resolveVoiceChatTitle() {
|
|
try {
|
|
if (currentVoiceCallType === 'groups') {
|
|
if (!currentVoiceCallId || !window.fetchEncrypted) return null;
|
|
let infoPayload = await fetchEncrypted("group/info", currentVoiceCallId);
|
|
if (infoPayload && infoPayload.startsWith("{")) {
|
|
return JSON.parse(infoPayload).string2 || null;
|
|
}
|
|
return null;
|
|
}
|
|
if (!currentVoiceCallId) return null;
|
|
let parts = String(currentVoiceCallId).split('_');
|
|
let myId = `${window.id};${window.host}`;
|
|
let targetId = parts[0] === myId ? parts[1] : parts[0];
|
|
if (!targetId) return null;
|
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
|
if (!name && window.fetchAsync) {
|
|
name = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
|
if (name && !name.startsWith("error:") && window.dmUsernameCache) window.dmUsernameCache[targetId] = name;
|
|
}
|
|
if (!name || name.startsWith("error:")) return null;
|
|
return name.split(':')[0];
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function updateVoiceChatTitle() {
|
|
let name = await resolveVoiceChatTitle();
|
|
let el = document.querySelector("#voice-header .voice-title span");
|
|
if (el && name) el.innerText = name;
|
|
}
|
|
|
|
function showVoiceUI() {
|
|
if (voiceUiContainer) return;
|
|
|
|
voiceUiContainer = document.createElement("div");
|
|
voiceUiContainer.id = "voice-call-popup";
|
|
|
|
voiceUiContainer.innerHTML = `
|
|
<div id="voice-header">
|
|
<div class="voice-title">
|
|
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
|
<span>${processBlah("title.voice.chat")}</span>
|
|
</div>
|
|
<div id="voice-status" class="connecting">
|
|
<span class="status-dot"></span>
|
|
<span class="status-ping" id="voice-ping"></span>
|
|
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
|
</div>
|
|
</div>
|
|
<div id="voice-users"></div>
|
|
<div class="voice-mic-meter">
|
|
<div id="voice-mic-level"></div>
|
|
</div>
|
|
<div id="voice-footer" class="voice-controls">
|
|
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="${processBlah("action.call.mute")}">
|
|
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
|
</button>
|
|
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="${processBlah("action.call.camera")}">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
|
|
</button>
|
|
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="${processBlah("action.call.screen")}">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
|
</button>
|
|
${(isMobileVoiceDevice() && getNativeVoiceRouting()) ? `<button id="voice-btn-speaker" class="voice-btn${isVoiceSpeakerMode ? " voice-btn-active" : ""}" onclick="toggleVoiceSpeakerMode()" title="${processBlah("action.call.speaker")}">
|
|
${ICONS.speaker({width: "1.4rem", height: "1.4rem"})}
|
|
</button>` : ""}
|
|
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="${processBlah("action.call.disconnect")}">
|
|
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(voiceUiContainer);
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
|
|
});
|
|
|
|
let header = document.getElementById("voice-header");
|
|
let startX, startY, initialLeft, initialTop;
|
|
|
|
header.addEventListener('pointerdown', (e) => {
|
|
if (e.button !== undefined && e.button !== 0) return;
|
|
voiceDragState = true;
|
|
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
|
let rect = voiceUiContainer.getBoundingClientRect();
|
|
initialLeft = rect.left;
|
|
initialTop = rect.top;
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
voiceUiContainer.style.right = "auto";
|
|
voiceUiContainer.style.bottom = "auto";
|
|
voiceUiContainer.style.left = initialLeft + "px";
|
|
voiceUiContainer.style.top = initialTop + "px";
|
|
clampVoiceWindowToViewport(voiceUiContainer);
|
|
});
|
|
|
|
header.addEventListener('pointermove', (e) => {
|
|
if (!voiceDragState) return;
|
|
let dx = e.clientX - startX;
|
|
let dy = e.clientY - startY;
|
|
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
|
voiceUiContainer.style.top = (initialTop + dy) + "px";
|
|
clampVoiceWindowToViewport(voiceUiContainer);
|
|
});
|
|
|
|
let stopDrag = () => { voiceDragState = false; };
|
|
header.addEventListener('pointerup', stopDrag);
|
|
header.addEventListener('pointercancel', stopDrag);
|
|
|
|
ensureVoiceFooterFits(voiceUiContainer);
|
|
|
|
ensureVoiceGridObserver();
|
|
|
|
setupVoiceWindowResize();
|
|
}
|
|
|
|
// Raises the popup's min-width so the footer buttons always fit with the same
|
|
// side padding the footer uses, regardless of how many buttons are rendered.
|
|
function ensureVoiceFooterFits(popupEl) {
|
|
let footer = popupEl.querySelector("#voice-footer");
|
|
if (!footer) return;
|
|
const cs = getComputedStyle(footer);
|
|
let need = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
|
|
const kids = Array.from(footer.children);
|
|
const gap = parseFloat(cs.columnGap) || parseFloat(cs.gap) || 0;
|
|
kids.forEach((kid, i) => {
|
|
if (i > 0) need += gap;
|
|
need += kid.offsetWidth;
|
|
});
|
|
const bcs = getComputedStyle(popupEl);
|
|
need += ((parseFloat(bcs.borderLeftWidth) || 0) + (parseFloat(bcs.borderRightWidth) || 0));
|
|
if (need > 0) {
|
|
popupEl.style.minWidth = Math.ceil(need) + "px";
|
|
clampVoiceWindowToViewport(popupEl);
|
|
}
|
|
}
|
|
|
|
function setupVoiceWindowResize() {
|
|
const popup = voiceUiContainer;
|
|
if (!popup || popup.dataset.resizeInit) return;
|
|
popup.dataset.resizeInit = "1";
|
|
|
|
const minW = () => parseFloat(getComputedStyle(popup).minWidth) || 200;
|
|
const minH = () => parseFloat(getComputedStyle(popup).minHeight) || 160;
|
|
|
|
const applySize = (l, t, w, h) => {
|
|
const W = window.innerWidth, H = window.innerHeight;
|
|
w = Math.round(Math.min(Math.max(w, minW()), W));
|
|
h = Math.round(Math.min(Math.max(h, minH()), H));
|
|
l = Math.round(Math.min(Math.max(l, 0), W - w));
|
|
t = Math.round(Math.min(Math.max(t, 0), H - h));
|
|
popup.style.right = "auto";
|
|
popup.style.bottom = "auto";
|
|
popup.style.width = w + "px";
|
|
popup.style.height = h + "px";
|
|
popup.style.left = l + "px";
|
|
popup.style.top = t + "px";
|
|
};
|
|
|
|
let edgeResizing = false;
|
|
|
|
["n", "s", "e", "w", "ne", "nw", "se", "sw"].forEach((dir) => {
|
|
const handle = document.createElement("div");
|
|
handle.className = `voice-resize-handle voice-resize-${dir}`;
|
|
popup.appendChild(handle);
|
|
|
|
handle.addEventListener("pointerdown", (e) => {
|
|
if (e.button !== undefined && e.button !== 0) return;
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
edgeResizing = true;
|
|
const sx = e.clientX, sy = e.clientY;
|
|
const rect = popup.getBoundingClientRect();
|
|
const sw = rect.width, sh = rect.height, sl = rect.left, st = rect.top;
|
|
try { handle.setPointerCapture(e.pointerId); } catch (err) {}
|
|
|
|
const onMove = (ev) => {
|
|
const dx = ev.clientX - sx, dy = ev.clientY - sy;
|
|
let w = sw, h = sh, l = sl, t = st;
|
|
if (dir.includes("e")) w = sw + dx;
|
|
if (dir.includes("s")) h = sh + dy;
|
|
if (dir.includes("w")) {
|
|
w = sw - dx;
|
|
l = sl + (sw - w);
|
|
}
|
|
if (dir.includes("n")) {
|
|
h = sh - dy;
|
|
t = st + (sh - h);
|
|
}
|
|
applySize(l, t, w, h);
|
|
};
|
|
const onUp = () => {
|
|
edgeResizing = false;
|
|
handle.removeEventListener("pointermove", onMove);
|
|
handle.removeEventListener("pointerup", onUp);
|
|
handle.removeEventListener("pointercancel", onUp);
|
|
};
|
|
handle.addEventListener("pointermove", onMove);
|
|
handle.addEventListener("pointerup", onUp);
|
|
handle.addEventListener("pointercancel", onUp);
|
|
});
|
|
});
|
|
|
|
// pinch-to-resize (dwa palce jak zoom)
|
|
const pointers = new Map();
|
|
let pinch = null;
|
|
let suppressClick = false;
|
|
|
|
popup.addEventListener("pointerdown", (e) => {
|
|
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|
if (pointers.size === 2 && !pinch && !voiceDragState && !edgeResizing) {
|
|
const [a, b] = [...pointers.values()];
|
|
const rect = popup.getBoundingClientRect();
|
|
pinch = {
|
|
dist: Math.max(20, Math.hypot(a.x - b.x, a.y - b.y)),
|
|
w: rect.width,
|
|
h: rect.height
|
|
};
|
|
suppressClick = true;
|
|
}
|
|
if (pointers.size >= 2 || pinch) {
|
|
try { popup.setPointerCapture(e.pointerId); } catch (err) {}
|
|
}
|
|
});
|
|
|
|
popup.addEventListener("pointermove", (e) => {
|
|
if (!pointers.has(e.pointerId)) return;
|
|
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|
if (pointers.size === 2 && pinch) {
|
|
const [a, b] = [...pointers.values()];
|
|
const scale = Math.max(0.05, Math.hypot(a.x - b.x, a.y - b.y)) / pinch.dist;
|
|
const rect = popup.getBoundingClientRect();
|
|
const cx = rect.left + rect.width / 2;
|
|
const cy = rect.top + rect.height / 2;
|
|
applySize(cx - pinch.w * scale / 2, cy - pinch.h * scale / 2, pinch.w * scale, pinch.h * scale);
|
|
}
|
|
});
|
|
|
|
const releasePointer = (e) => {
|
|
pointers.delete(e.pointerId);
|
|
if (pointers.size < 2) pinch = null;
|
|
if (pointers.size === 0) setTimeout(() => { suppressClick = false; }, 250);
|
|
};
|
|
popup.addEventListener("pointerup", releasePointer);
|
|
popup.addEventListener("pointercancel", releasePointer);
|
|
|
|
popup.addEventListener("click", (e) => {
|
|
if (suppressClick) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
suppressClick = false;
|
|
}
|
|
}, true);
|
|
|
|
if (voiceResizeAbort) voiceResizeAbort.abort();
|
|
voiceResizeAbort = new AbortController();
|
|
window.addEventListener("resize", () => {
|
|
clampVoiceWindowToViewport(popup);
|
|
}, { signal: voiceResizeAbort.signal });
|
|
}
|
|
|
|
function updateVoiceUIUsers() {
|
|
let container = document.getElementById("voice-users");
|
|
if (!container) return;
|
|
|
|
for (let u of voiceActiveUsers) {
|
|
let div = document.getElementById(`voice-tile-${u}`);
|
|
if (!div) {
|
|
div = document.createElement("div");
|
|
div.className = "voice-tile tile-enter";
|
|
div.id = `voice-tile-${u}`;
|
|
div.onclick = (e) => showVoiceUserSettings(u, e);
|
|
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
|
|
|
div.innerHTML = `
|
|
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
|
<div class="voice-tile-icons" id="voice-icons-${u}"></div>
|
|
`;
|
|
container.appendChild(div);
|
|
}
|
|
|
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[u] : null;
|
|
if (!authorName && window.fetchAsync) {
|
|
authorName = u;
|
|
window.fetchAsync(`${window.url}/idtoname?id=${u}`).then(async fullUsername => {
|
|
if (fullUsername && !fullUsername.startsWith("error:")) {
|
|
if (window.dmUsernameCache) window.dmUsernameCache[u] = fullUsername;
|
|
if (window.dmPfpCache && window.getAvatarUrl) window.dmPfpCache[u] = await window.getAvatarUrl(u, fullUsername);
|
|
updateVoiceUIUsers();
|
|
}
|
|
});
|
|
}
|
|
let resolvedName = authorName && authorName !== u ? authorName : null;
|
|
if (!resolvedName && u === String(window.id) && window.username) resolvedName = window.host ? `${window.username}:${window.host}` : window.username;
|
|
|
|
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
|
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
|
|
|
if (!avatarRes && window.getAvatarUrl) {
|
|
getAvatarUrl(u, authorName || "User").then(url => {
|
|
if(url) {
|
|
window.dmPfpCache[u] = url;
|
|
let el = document.getElementById(`voice-tile-${u}`);
|
|
if (el) el.style.backgroundImage = `url('${url.replace(/'/g, "\\'")}')`;
|
|
}
|
|
});
|
|
}
|
|
|
|
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
|
let nameEl = document.getElementById(`voice-name-${u}`);
|
|
if (nameEl) nameEl.innerText = resolvedName ? `${resolvedName} (${u})` : String(u);
|
|
}
|
|
|
|
Array.from(container.children).forEach(child => {
|
|
if (child.id.startsWith("voice-tile-") && !child.id.startsWith("voice-tile-stream-")) {
|
|
let u = child.id.replace("voice-tile-", "");
|
|
if (!voiceActiveUsers.includes(u)) {
|
|
child.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
for (let decoderId in remoteVideos) {
|
|
let streamData = remoteVideos[decoderId];
|
|
let clientId = decoderId.split('-')[0];
|
|
let type = decoderId.split('-')[1];
|
|
|
|
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
|
if (!div) {
|
|
div = document.createElement("div");
|
|
div.className = "voice-tile tile-enter";
|
|
div.id = `voice-tile-stream-${decoderId}`;
|
|
div.onclick = (e) => showVoiceUserSettings(clientId, e, true);
|
|
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
|
|
|
let mediaEl = streamData.canvas || streamData.video;
|
|
if (mediaEl) {
|
|
div.appendChild(mediaEl);
|
|
}
|
|
|
|
let nameDiv = document.createElement("div");
|
|
nameDiv.className = "voice-tile-name";
|
|
nameDiv.id = `voice-stream-name-${decoderId}`;
|
|
div.appendChild(nameDiv);
|
|
container.appendChild(div);
|
|
}
|
|
|
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
|
if (!authorName && clientId === String(window.id) && window.username) authorName = window.host ? `${window.username}:${window.host}` : window.username;
|
|
|
|
let streamLabel = processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen");
|
|
let baseName = authorName && authorName !== clientId ? `${authorName} (${clientId})` : clientId;
|
|
|
|
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
|
if (nameEl) nameEl.innerText = `${baseName} · ${streamLabel}`;
|
|
}
|
|
|
|
Array.from(container.children).forEach(child => {
|
|
if (child.id.startsWith("voice-tile-stream-")) {
|
|
let decoderId = child.id.replace("voice-tile-stream-", "");
|
|
if (!remoteVideos[decoderId]) {
|
|
child.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
let orderedTiles = [];
|
|
for (let u of voiceActiveUsers) {
|
|
let userTile = document.getElementById(`voice-tile-${u}`);
|
|
if (userTile) orderedTiles.push(userTile);
|
|
for (let decoderId in remoteVideos) {
|
|
if (decoderId.split('-')[0] === u) {
|
|
let streamTile = document.getElementById(`voice-tile-stream-${decoderId}`);
|
|
if (streamTile) orderedTiles.push(streamTile);
|
|
}
|
|
}
|
|
}
|
|
for (let tile of orderedTiles) {
|
|
container.appendChild(tile);
|
|
}
|
|
|
|
relayoutVoiceTiles();
|
|
}
|
|
|
|
let voiceGridRO = null;
|
|
|
|
function ensureVoiceGridObserver() {
|
|
let container = document.getElementById("voice-users");
|
|
if (!container || !container.isConnected || container.dataset.roInit) return;
|
|
container.dataset.roInit = "1";
|
|
if (!voiceGridRO) {
|
|
voiceGridRO = new ResizeObserver(() => relayoutVoiceTiles());
|
|
}
|
|
voiceGridRO.observe(container);
|
|
}
|
|
|
|
function relayoutVoiceTiles() {
|
|
let container = document.getElementById("voice-users");
|
|
if (!container || !container.isConnected) return;
|
|
|
|
const tiles = Array.from(container.children).filter(el => el.classList.contains("voice-tile"));
|
|
const n = tiles.length;
|
|
if (!n) return;
|
|
|
|
const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
const cs = getComputedStyle(container);
|
|
const innerW = container.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
|
const innerH = container.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
|
|
|
|
if (!isFinite(innerW) || !isFinite(innerH) || !isFinite(rootFs) || innerW <= 0 || innerH <= 0 || rootFs <= 0) {
|
|
container.style.removeProperty("--voice-tile-w");
|
|
container.style.removeProperty("--voice-tile-h");
|
|
delete container.dataset.layoutSig;
|
|
return;
|
|
}
|
|
|
|
const minCol = 6.25 * rootFs;
|
|
const minRow = 7 * rootFs;
|
|
const gap = 0.75 * rootFs;
|
|
|
|
const maxCols = Math.max(1, Math.floor((innerW + gap) / (minCol + gap)));
|
|
const cols = Math.min(n, maxCols);
|
|
const rows = Math.ceil(n / cols);
|
|
const w = Math.floor((innerW - gap * (cols - 1)) / cols);
|
|
const h = Math.floor(Math.max(minRow, (innerH - gap * (rows - 1)) / rows));
|
|
|
|
const sig = `${n}:${cols}:${w}x${h}`;
|
|
if (container.dataset.layoutSig === sig) return;
|
|
container.dataset.layoutSig = sig;
|
|
|
|
container.style.setProperty("--voice-tile-w", w + "px");
|
|
container.style.setProperty("--voice-tile-h", h + "px");
|
|
}
|
|
|
|
let voiceSettingsState = null;
|
|
|
|
function hideVoiceUserSettings() {
|
|
let popup = document.getElementById("voice-user-settings");
|
|
if (popup) popup.remove();
|
|
voiceSettingsState = null;
|
|
document.removeEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
|
}
|
|
|
|
function closeVoiceUserSettingsOnOutsideClick(ev) {
|
|
let popup = document.getElementById("voice-user-settings");
|
|
if (!popup) {
|
|
hideVoiceUserSettings();
|
|
return;
|
|
}
|
|
if (!popup.contains(ev.target)) hideVoiceUserSettings();
|
|
}
|
|
|
|
function showVoiceUserSettings(clientId, e, isStream = false) {
|
|
e.stopPropagation();
|
|
|
|
if (voiceSettingsState && voiceSettingsState.clientId === clientId && voiceSettingsState.isStream === isStream) {
|
|
hideVoiceUserSettings();
|
|
return;
|
|
}
|
|
hideVoiceUserSettings();
|
|
|
|
voiceSettingsState = { clientId, isStream };
|
|
|
|
let popup = document.createElement("div");
|
|
popup.id = "voice-user-settings";
|
|
popup.innerHTML = isStream ? `
|
|
<div class="voice-setting-row">
|
|
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
|
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
|
</div>
|
|
` : `
|
|
<div class="voice-setting-row">
|
|
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
|
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(popup);
|
|
let rect = popup.getBoundingClientRect();
|
|
let left = e.clientX;
|
|
let top = e.clientY;
|
|
if (left + 200 > window.innerWidth) left = window.innerWidth - 210;
|
|
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
|
popup.style.left = left + "px";
|
|
popup.style.top = top + "px";
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => popup.classList.add("open"));
|
|
});
|
|
|
|
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
|
}
|
|
|
|
window.updateVoiceVol = function(clientId, val, type) {
|
|
voiceVolumeState[`${type}:${clientId}`] = val;
|
|
let el = document.getElementById(`val-${type}-${clientId}`);
|
|
if (el) el.innerText = val + '%';
|
|
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
|
const volumeMultiplier = parseInt(val) / 100.0;
|
|
const rn = type === 'screen' ? screenReceiverNode : receiverNode;
|
|
if (rn) {
|
|
rn.port.postMessage({ action: 'setVolume', clientId: audioId, volume: volumeMultiplier });
|
|
}
|
|
};
|
|
|
|
function toggleVoiceMic() {
|
|
isMicMuted = !isMicMuted;
|
|
if (isMicMuted) setTileSpeaking(String(window.id), false);
|
|
let btn = document.getElementById("voice-btn-mic");
|
|
if (btn) {
|
|
if (isMicMuted) {
|
|
btn.classList.add("voice-btn-danger");
|
|
} else {
|
|
btn.classList.remove("voice-btn-danger");
|
|
}
|
|
}
|
|
}
|
|
|
|
function endVoiceSession() {
|
|
setVoiceStatus("disconnected");
|
|
|
|
const nativeRouting = getNativeVoiceRouting();
|
|
if (nativeRouting && nativeRouting.stopCall) {
|
|
try { nativeRouting.stopCall(); } catch (e) {}
|
|
}
|
|
isVoiceSpeakerMode = false;
|
|
voiceLoopRestarts = 0;
|
|
stopNativePlayback();
|
|
|
|
if (currentVoiceCallId) {
|
|
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
|
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
|
}
|
|
|
|
if (currentVoiceWs) {
|
|
try { currentVoiceWs.close(); } catch(e){}
|
|
currentVoiceWs = null;
|
|
}
|
|
if (micStream) {
|
|
micStream.getTracks().forEach(t => t.stop());
|
|
micStream = null;
|
|
}
|
|
if (micSourceNode) { micSourceNode.disconnect(); micSourceNode = null; }
|
|
if (audioEncoder) { try { audioEncoder.close(); } catch(e){} audioEncoder = null; }
|
|
|
|
if (window.fetchUsersInterval) {
|
|
clearInterval(window.fetchUsersInterval);
|
|
window.fetchUsersInterval = null;
|
|
}
|
|
|
|
for (let id in audioDecoders) {
|
|
try { audioDecoders[id].close(); } catch(e){}
|
|
}
|
|
for (let id in audioDecryptChains) {
|
|
if(audioDecryptChains[id]) audioDecryptChains[id].clear();
|
|
}
|
|
audioDecoders = {};
|
|
audioDecryptChains = {};
|
|
remoteAudio = {};
|
|
|
|
if (receiverNode) {
|
|
receiverNode.port.postMessage({ action: 'clear' });
|
|
try { receiverNode.disconnect(); } catch (e) {}
|
|
}
|
|
if (screenReceiverNode) {
|
|
screenReceiverNode.port.postMessage({ action: 'clear' });
|
|
try { screenReceiverNode.disconnect(); } catch (e) {}
|
|
}
|
|
teardownVoiceLoopback();
|
|
|
|
if (camControl) { camControl.stop(); camControl = null; }
|
|
if (screenControl) { screenControl.stop(); screenControl = null; }
|
|
|
|
for (let id in remoteVideos) {
|
|
if (remoteVideos[id].decoder) { try { remoteVideos[id].decoder.close(); } catch(e){} }
|
|
}
|
|
remoteVideos = {};
|
|
videoDecryptChains = {};
|
|
|
|
voiceAesKeyBytes = null;
|
|
voiceAesCryptoKey = null;
|
|
currentVoiceWs = null;
|
|
currentVoiceCallType = null;
|
|
currentVoiceCallId = null;
|
|
|
|
clearAllSpeaking();
|
|
|
|
if (voiceResizeAbort) {
|
|
voiceResizeAbort.abort();
|
|
voiceResizeAbort = null;
|
|
}
|
|
|
|
if (voiceGridRO) {
|
|
voiceGridRO.disconnect();
|
|
voiceGridRO = null;
|
|
}
|
|
|
|
if (voiceUiContainer) {
|
|
let popupEl = voiceUiContainer;
|
|
voiceUiContainer = null;
|
|
popupEl.classList.remove("show");
|
|
popupEl.classList.add("hide");
|
|
setTimeout(() => popupEl.remove(), 350);
|
|
}
|
|
}
|
|
|
|
async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
|
try {
|
|
const stream = await streamPromise;
|
|
const videoTrack = stream.getVideoTracks()[0];
|
|
const videoEl = document.createElement('video');
|
|
videoEl.srcObject = stream; videoEl.muted = true; videoEl.playsInline = true; videoEl.autoplay = true; videoEl.play();
|
|
|
|
const decoderId = window.id + '-' + typeId;
|
|
remoteVideos[decoderId] = { video: videoEl };
|
|
updateVoiceUIUsers();
|
|
|
|
btnEl.classList.add('voice-btn-active');
|
|
let screenAudioEncoder = null, screenAudioSourceNode = null, screenSenderNode = null;
|
|
|
|
if (typeId === 2) {
|
|
const audioTracks = stream.getAudioTracks();
|
|
if (audioTracks.length > 0) {
|
|
screenAudioSourceNode = audioContext.createMediaStreamSource(stream);
|
|
screenSenderNode = new AudioWorkletNode(audioContext, 'audio-sender');
|
|
screenSenderNode.port.onmessage = async (e) => {
|
|
if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceAesCryptoKey) return;
|
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, e.data.audioData);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 4; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
};
|
|
screenAudioSourceNode.connect(screenSenderNode);
|
|
}
|
|
}
|
|
|
|
const getCurrentConfig = () => {
|
|
const fps = typeId === 1 ? 24 : 30;
|
|
const resVal = typeId === 1 ? "1280x720" : "1920x1080";
|
|
const settings = videoTrack.getSettings();
|
|
let sourceWidth = settings.width || 1280, sourceHeight = settings.height || 720, width, height;
|
|
if (resVal === "source") { width = sourceWidth; height = sourceHeight; } else {
|
|
const [targetW, targetH] = resVal.split('x').map(Number);
|
|
const ratio = Math.min(targetW / sourceWidth, targetH / sourceHeight);
|
|
if (ratio < 1) { width = sourceWidth * ratio; height = sourceHeight * ratio; } else { width = sourceWidth; height = sourceHeight; }
|
|
}
|
|
width = Math.floor(width / 2) * 2; height = Math.floor(height / 2) * 2;
|
|
return { width, height, fps, bitrate: Math.floor(width * height * fps * 0.15) };
|
|
};
|
|
|
|
let currentConfig = getCurrentConfig(), isRunning = true, frameCount = 0;
|
|
const encoder = new VideoEncoder({
|
|
output: async (chunk) => {
|
|
if (currentVoiceWs?.readyState !== WebSocket.OPEN || !voiceAesCryptoKey) return;
|
|
const buffer = new ArrayBuffer(chunk.byteLength); chunk.copyTo(buffer);
|
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, buffer);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = typeId; payload[1] = chunk.type === 'key' ? 1 : 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
|
currentVoiceWs.send(payload.buffer);
|
|
}, error: (e) => { stopFunction(); }
|
|
});
|
|
encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});
|
|
|
|
const encodeLoop = () => {
|
|
if (!isRunning) return;
|
|
const newConfig = getCurrentConfig();
|
|
let forceKeyframe = false;
|
|
if (newConfig.width !== currentConfig.width || newConfig.height !== currentConfig.height || newConfig.fps !== currentConfig.fps) {
|
|
currentConfig = newConfig; forceKeyframe = true; frameCount = 0;
|
|
encoder.configure({codec: 'av01.0.04M.08', width: currentConfig.width, height: currentConfig.height, framerate: currentConfig.fps, bitrate: currentConfig.bitrate, latencyMode: 'realtime'});
|
|
}
|
|
|
|
if (encoder.state === 'configured' && encoder.encodeQueueSize <= 2 && currentVoiceWs.bufferedAmount < 1024 * 512 && videoEl.readyState >= 2) {
|
|
let frame = null;
|
|
try {
|
|
frame = new VideoFrame(videoEl, {timestamp: Math.trunc(performance.now() * 1000)});
|
|
frameCount++;
|
|
encoder.encode(frame, {keyFrame: forceKeyframe || (frameCount % (currentConfig.fps * 2)) === 0});
|
|
} catch (err) { } finally { if (frame) frame.close(); }
|
|
}
|
|
setTimeout(encodeLoop, 1000 / currentConfig.fps);
|
|
};
|
|
setTimeout(encodeLoop, 500);
|
|
|
|
videoTrack.onended = () => { if(isRunning) stopFunction(); };
|
|
const stopFunction = async () => {
|
|
if (!isRunning) return;
|
|
isRunning = false; try { encoder.close(); } catch (e) {} stream.getTracks().forEach(t => t.stop());
|
|
|
|
delete remoteVideos[decoderId];
|
|
updateVoiceUIUsers();
|
|
btnEl.classList.remove('voice-btn-active');
|
|
|
|
if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceAesCryptoKey) {
|
|
const buffer = new Uint8Array([typeId]); const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const cipher = await crypto.subtle.encrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, buffer);
|
|
const payload = new Uint8Array(14 + cipher.byteLength);
|
|
payload[0] = 3; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14); currentVoiceWs.send(payload.buffer);
|
|
}
|
|
|
|
if (typeId === 2) {
|
|
if (screenAudioSourceNode) { screenAudioSourceNode.disconnect(); screenAudioSourceNode = null; }
|
|
if (screenSenderNode) { screenSenderNode.disconnect(); screenSenderNode = null; }
|
|
if (screenAudioEncoder) { try { screenAudioEncoder.close(); } catch (e) {} screenAudioEncoder = null; }
|
|
if (currentVoiceWs?.readyState === WebSocket.OPEN && voiceAesCryptoKey) {
|
|
const bufferAudioInfo = new Uint8Array([4]); const ivA = crypto.getRandomValues(new Uint8Array(12));
|
|
const cipherA = await crypto.subtle.encrypt({name: "AES-GCM", iv: ivA}, voiceAesCryptoKey, bufferAudioInfo);
|
|
const payloadA = new Uint8Array(14 + cipherA.byteLength);
|
|
payloadA[0] = 3; payloadA[1] = 0; payloadA.set(ivA, 2); payloadA.set(new Uint8Array(cipherA), 14); currentVoiceWs.send(payloadA.buffer);
|
|
}
|
|
screenControl = null;
|
|
} else if (typeId === 1) { camControl = null; }
|
|
};
|
|
return { stop: stopFunction };
|
|
} catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
|
|
}
|
|
|
|
function toggleVoiceCam() {
|
|
let btn = document.getElementById("voice-btn-cam");
|
|
if (camControl) {
|
|
camControl.stop();
|
|
} else {
|
|
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
|
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
|
}).catch(err => alert(processBlah(`:error.call.camera:${err.message}`)));
|
|
}
|
|
}
|
|
|
|
function toggleVoiceScreen() {
|
|
let btn = document.getElementById("voice-btn-screen");
|
|
if (screenControl) {
|
|
screenControl.stop();
|
|
} else {
|
|
if (!navigator.mediaDevices.getDisplayMedia) { alert(processBlah("error.call.screen.unsupported")); return; }
|
|
navigator.mediaDevices.getDisplayMedia({
|
|
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
|
}).then(stream => {
|
|
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
|
}).catch(err => alert(processBlah(`:error.call.screen:${err.message}`)));
|
|
}
|
|
}
|