1258 lines
54 KiB
JavaScript
1258 lines
54 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;
|
|
|
|
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;
|
|
}
|
|
|
|
function setVoiceStatus(state) {
|
|
let el = document.getElementById("voice-status");
|
|
if (!el) return;
|
|
el.classList.toggle("connected", state === "connected");
|
|
el.classList.toggle("connecting", state !== "connected");
|
|
let textEl = el.querySelector(".voice-status-text");
|
|
if (textEl) textEl.innerText = processBlah(state === "connected" ? "status.voice.connected" : "status.voice.connecting");
|
|
}
|
|
|
|
function setTileSpeaking(clientId, speaking) {
|
|
let tile = document.getElementById(`voice-tile-${clientId}`);
|
|
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 {
|
|
constructor() {
|
|
super();
|
|
this.users = {};
|
|
this.volumes = {};
|
|
|
|
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 };
|
|
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 >= 4096) user.buffering = false;
|
|
|
|
if (!user.buffering) {
|
|
if (available < output.length) { user.buffering = true; }
|
|
else {
|
|
if (available > 24576) user.readPtr = (user.writePtr - 8192 + 65536) % 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;
|
|
}
|
|
}
|
|
}
|
|
} 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");
|
|
|
|
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 res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
|
const usersRaw = await res.json();
|
|
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);
|
|
|
|
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');
|
|
receiverNode = new AudioWorkletNode(audioContext, 'audio-receiver');
|
|
receiverNode.connect(audioContext.destination);
|
|
isAudioWorkletLoaded = true;
|
|
}
|
|
if (audioContext.state === 'suspended') await audioContext.resume();
|
|
|
|
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();
|
|
|
|
audioDecryptChains[audioId].enqueue(async () => {
|
|
try {
|
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
|
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
|
|
|
setTileSpeaking(clientId, true);
|
|
} 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(receiverNode) receiverNode.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];
|
|
if(receiverNode) receiverNode.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) {
|
|
let name = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
|
if (name && name.includes(':')) name = name.split(':')[0];
|
|
if (!name && window.fetchAsync) {
|
|
try {
|
|
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${roomId}`);
|
|
if (fetched && !fetched.startsWith("error:")) {
|
|
name = fetched.includes(':') ? fetched.split(':')[0] : fetched;
|
|
if (window.dmUsernameCache) window.dmUsernameCache[roomId] = name;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
|
if (!pfpUrl && window.getAvatarUrl) {
|
|
try { pfpUrl = await window.getAvatarUrl(roomId, name || "User"); } catch (e) {}
|
|
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[roomId] = pfpUrl;
|
|
}
|
|
return { name: name || 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
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="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>
|
|
<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);
|
|
|
|
ensureVoiceGridObserver();
|
|
|
|
setupVoiceWindowResize();
|
|
}
|
|
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
|
if (!authorName && u === String(window.id)) authorName = 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 = authorName || 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 && authorName.includes(':')) authorName = authorName.split(':')[0];
|
|
|
|
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
|
if (nameEl) nameEl.innerText = `${authorName || clientId} (${processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen")})`;
|
|
}
|
|
|
|
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);
|
|
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;
|
|
if (receiverNode) {
|
|
receiverNode.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() {
|
|
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' });
|
|
}
|
|
|
|
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}`)));
|
|
}
|
|
}
|