@@ -171,7 +169,6 @@
-
@@ -192,21 +189,6 @@
![编辑输出]()
-
-
-
-
-
-
@@ -241,12 +222,12 @@
上传清晰度
-
+
-
+
-
+
-
-
+
+
-
+
-
-
+
+
@@ -608,6 +589,11 @@
try { new ResizeObserver(() => updateCropMask()).observe(camera); } catch (e) {}
}
let ws = null;
+let streamingWanted = false;
+let reconnectTimer = null;
+let reconnectAttempt = 0;
+const RECONNECT_BASE_DELAY_MS = 750;
+const RECONNECT_MAX_DELAY_MS = 5000;
let stream = null;
let videoFileUrl = null;
let usingVideoFile = false;
@@ -636,8 +622,8 @@
let pendingPeCacheKey = null;
let outputPlaybackTimer = null;
let outputPlaybackIntervalMs = null;
-const DEFAULT_TARGET_OUTPUT_QUEUE_DELAY_MS = 200;
-const DEFAULT_MAX_OUTPUT_QUEUE_DELAY_MS = 300;
+const DEFAULT_TARGET_OUTPUT_QUEUE_DELAY_MS = 100;
+const DEFAULT_MAX_OUTPUT_QUEUE_DELAY_MS = 200;
function targetOutputQueueDelayMs() {
const el = document.getElementById("targetQueueDelayMs");
const raw = el && el.value !== "" ? el.value : null;
@@ -651,7 +637,7 @@
const v = raw === null ? NaN : Number(raw);
return Number.isFinite(v) && v >= 0 ? v : DEFAULT_MAX_OUTPUT_QUEUE_DELAY_MS;
}
-const MAX_BACKEND_PENDING_FRAMES = 32;
+const MAX_BACKEND_PENDING_FRAMES = 16;
let sendRealtimeSkips = 0;
let sentFrames = 0;
let backendAckedFrames = 0;
@@ -807,6 +793,25 @@
}, 1000);
}
+function cancelReconnect() {
+ if (reconnectTimer) clearTimeout(reconnectTimer);
+ reconnectTimer = null;
+}
+
+function scheduleReconnect() {
+ if (!streamingWanted || reconnectTimer) return;
+ const delay = Math.min(
+ RECONNECT_MAX_DELAY_MS,
+ RECONNECT_BASE_DELAY_MS * Math.pow(2, Math.min(reconnectAttempt, 3))
+ );
+ reconnectAttempt += 1;
+ reconnectTimer = setTimeout(async () => {
+ reconnectTimer = null;
+ if (!streamingWanted || ws) return;
+ await start();
+ }, delay);
+}
+
function readRefImageDataUrl() {
const el = document.getElementById("refImage");
const file = el && el.files && el.files[0];
@@ -1156,10 +1161,20 @@
}
let h264DecodeOk = false;
+let h264DecodeReady = Promise.resolve(false);
+const CODEC_PROBE_TIMEOUT_MS = 1200;
+function codecProbeWithTimeout(probe, fallback = false) {
+ return Promise.race([
+ Promise.resolve(probe).catch(() => fallback),
+ new Promise((resolve) => setTimeout(() => resolve(fallback), CODEC_PROBE_TIMEOUT_MS)),
+ ]);
+}
if (typeof VideoDecoder !== "undefined") {
- VideoDecoder.isConfigSupported({ codec: "avc1.640028", optimizeForLatency: true })
- .then((s) => { h264DecodeOk = !!(s && s.supported); })
- .catch(() => {});
+ h264DecodeReady = codecProbeWithTimeout(
+ VideoDecoder.isConfigSupported({ codec: "avc1.640028", optimizeForLatency: true })
+ )
+ .then((s) => { h264DecodeOk = !!(s && s.supported); return h264DecodeOk; })
+ .catch(() => false);
}
let outCodecH264 = false;
let outDecoder = null;
@@ -1168,7 +1183,7 @@
let upCodecH264 = false;
let upEncoder = null;
-const UPLINK_KEYFRAME_INTERVAL = 8;
+const UPLINK_KEYFRAME_INTERVAL = 20;
let upSeq = 0;
const upPendingByTs = new Map();
@@ -1608,6 +1623,7 @@
async function beginSession() {
if (!ws || ws.readyState !== WebSocket.OPEN) return false;
+ h264DecodeOk = await h264DecodeReady;
resetRunMetrics();
pePausedSend = false;
clearResultVideo();
@@ -1646,7 +1662,10 @@
upCodecH264 = false;
if (!usingVideoFile && typeof VideoEncoder !== "undefined") {
try {
- const s = await VideoEncoder.isConfigSupported(upEncoderConfig(width, height));
+ const s = await codecProbeWithTimeout(
+ VideoEncoder.isConfigSupported(upEncoderConfig(width, height)),
+ null
+ );
upCodecH264 = !!(s && s.supported);
} catch (e) {}
}
@@ -1714,10 +1733,16 @@
sessionGranted = true;
setSendBusy(true, t("busy_starting"));
showOutputStart(true, t("busy_starting"));
- beginSession();
+ try {
+ const started = await beginSession();
+ if (!started) throw new Error("session start was not sent");
+ } catch (err) {
+ stopActiveRun();
+ }
return;
}
if (msg.type === "started") {
+ reconnectAttempt = 0;
if (Number(msg.width) > 0 && Number(msg.height) > 0) {
document.getElementById("width").value = msg.width;
document.getElementById("height").value = msg.height;
@@ -1959,6 +1984,7 @@
setSendBusy(false, t("busy_disconnected"));
showOutputIdle(true);
updateMetrics();
+ scheduleReconnect();
};
socket.onerror = () => {
if (ws === socket) {
@@ -1969,6 +1995,8 @@
}
function stopActiveRun() {
+ streamingWanted = false;
+ cancelReconnect();
if (timer) clearInterval(timer);
timer = null;
stopVideoPull();
@@ -1992,6 +2020,9 @@
currentWs.onclose = null;
try { currentWs.close(); } catch (err) {}
}
+ startingRun = false;
+ sessionGranted = false;
+ setSendBusy(false, "");
}
async function send() {
@@ -2012,6 +2043,7 @@
sessionGranted = false;
}
stopActiveRun();
+ streamingWanted = true;
await start();
}
@@ -2031,8 +2063,9 @@
},
{
key: "ref_tryon",
- label: "参考图换装", label_en: "Try-On from Reference",
+ label: "参考图编辑", label_en: "Reference Image",
cases: [
+ { title: "我的参考人物", title_en: "My Reference Person", desc: "用上传图片中的人物替换主角", desc_en: "Replace the subject with your uploaded person", text: "将视频中的主角替换为上传的参考图中的人物。保持参考人物的身份、面部、发型和服装，同时保留原视频的姿势、动作、镜头和背景。", text_en: "Replace the main subject in the video with the person shown in the uploaded reference image. Preserve the reference person's identity, face, hairstyle, and clothing while keeping the source pose, motion, camera, and background unchanged." },
{ title: "NY 棒球帽", title_en: "NY Cap", desc: "戴上参考图里的黑色 NY 棒球帽", desc_en: "Black NY cap from the reference image", ref: "hat", text: "将参考图中的黑色 NY 棒球帽戴到主角头上，帽子正面朝前。", text_en: "Put the black NY baseball cap from the reference image on the subject's head, facing forward." },
{ title: "红色围巾", title_en: "Red Scarf", desc: "围上参考图里的红色流苏围巾", desc_en: "Red tasseled scarf from the reference image", ref: "scarf", text: "将参考图中的红色流苏围巾围到主角的颈部。", text_en: "Wrap the red tasseled scarf from the reference image around the subject's neck." },
{ title: "粉色T恤", title_en: "Pink Tee", desc: "换上参考图里的粉色短袖 T 恤", desc_en: "Pink short-sleeve tee from the reference image", ref: "pink_tee", text: "将主角的衣服换成参考图里的粉色短袖 T 恤。", text_en: "Replace the subject's clothing with the pink short-sleeve T-shirt from the reference image." },
@@ -2558,7 +2591,7 @@
const Q_TIERS = [20, 40, 60];
const downQualityUi = document.getElementById("downQualityUi");
const qtierEl = document.getElementById("qtier");
-let autoQTier = 2;
+let autoQTier = 0;
let autoQLowStreak = 0;
let autoQHoldTicks = 0;
function sendOutputQuality(v) {
@@ -2590,7 +2623,7 @@
b.addEventListener("click", () => {
const d = b.getAttribute("data-q");
if (d === "auto") {
- autoQuality = true; autoQTier = 2; autoQLowStreak = 0; autoQHoldTicks = 0;
+ autoQuality = true; autoQTier = 0; autoQLowStreak = 0; autoQHoldTicks = 0;
highlightQTier("auto");
setDownQuality(Q_TIERS[autoQTier], { live: true });
} else {
@@ -2705,6 +2738,7 @@
showCameraOverlay(true);
});
});
+window.addEventListener("pagehide", () => stopActiveRun());