dsh-vidi 0.7.5 → 0.7.7

package/lib/client.js

@@ -73,6 +73,198 @@ function onOpenRequest(fn) {
 /** Video links worth offering to open in the player. */
 const VIDEO_LINK = /\bhttps?:\/\/(?:www\.|m\.|live\.)?(?:youtube\.com\/(?:watch|live|shorts)|youtu\.be\/|bilibili\.com\/(?:video|bangumi)|b23\.tv\/|live\.bilibili\.com\/|twitch\.tv\/|vimeo\.com\/|x\.com\/\S+\/status|twitter\.com\/\S+\/status|douyin\.com\/|v\.douyin\.com\/|ixigua\.com\/|weibo\.com\/tv|tiktok\.com\/|kick\.com\/|xiaoyuzhoufm\.com\/episode\/)\S*|\b\S+\.m3u8\b|\brtmps?:\/\/\S+|\bsrt:\/\/\S+/i;
 
+// src/client/Pick.tsx
+/** Theme tokens copied onto the list, so it looks like the place it opened from (light page, dark player menu). */
+const TOKENS = [
+	"--bg",
+	"--l1",
+	"--l2",
+	"--ink",
+	"--muted",
+	"--faint",
+	"--line",
+	"--hover",
+	"--accent"
+];
+/**
+* A drop-down in the page's own style, in place of the browser's <select>
+* (which draws a system menu as wide as the screen allows). The list is sized
+* to its options, scrolls when long, opens upward when there is no room
+* below, and works with the keyboard (arrows, Enter, Esc, typing a letter).
+*/
+function Pick(props) {
+	const { value, options, onChange, placeholder, disabled, className, title, label } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	const [active, setActive] = (0, react.useState)(-1);
+	const [place, setPlace] = (0, react.useState)({});
+	const btn = (0, react.useRef)(null);
+	const list = (0, react.useRef)(null);
+	const chosen = options.find((o) => o.value === value);
+	const usable = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+	const close = (focus = true) => {
+		setOpen(false);
+		if (focus) btn.current?.focus();
+	};
+	const choose = (o) => {
+		if (o.disabled) return;
+		onChange(o.value);
+		close();
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (!open || !btn.current) return;
+		const r = btn.current.getBoundingClientRect();
+		const cs = getComputedStyle(btn.current);
+		const vars = Object.fromEntries(TOKENS.map((k) => [k, cs.getPropertyValue(k).trim()]).filter(([, v]) => v));
+		const room = window.innerHeight - r.bottom - 8, above = r.top - 8;
+		const up = room < 220 && above > room;
+		const maxH = Math.max(120, Math.min(320, up ? above - 4 : room - 4));
+		const minWidth = Math.min(Math.max(r.width, 180), window.innerWidth - 16);
+		const maxWidth = Math.max(minWidth, Math.min(380, window.innerWidth - 16));
+		const side = r.left + maxWidth > window.innerWidth - 8 ? { right: Math.max(8, window.innerWidth - r.right) } : { left: Math.max(8, r.left) };
+		setPlace({
+			...vars,
+			...side,
+			minWidth,
+			maxWidth,
+			maxHeight: maxH,
+			...up ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 },
+			fontFamily: cs.fontFamily
+		});
+		setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+	}, [open]);
+	(0, react.useEffect)(() => {
+		list.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [active, open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const away = (e) => {
+			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
+		};
+		const gone = (e) => {
+			const t = e.target;
+			if (list.current?.contains(t)) return;
+			if (e.type === "resize" || t === document || t === document.documentElement || t instanceof Node && btn.current && t.contains(btn.current)) close(false);
+		};
+		document.addEventListener("pointerdown", away, true);
+		window.addEventListener("resize", gone);
+		window.addEventListener("scroll", gone, true);
+		return () => {
+			document.removeEventListener("pointerdown", away, true);
+			window.removeEventListener("resize", gone);
+			window.removeEventListener("scroll", gone, true);
+		};
+	}, [open]);
+	const onKey = (e) => {
+		if (disabled) return;
+		const step = (d) => {
+			const at = usable.indexOf(active);
+			setActive(usable[Math.min(usable.length - 1, Math.max(0, (at < 0 ? d > 0 ? -1 : usable.length : at) + d))] ?? -1);
+		};
+		if (!open) {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				" "
+			].includes(e.key)) {
+				e.preventDefault();
+				setOpen(true);
+			}
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			close();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			step(1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			step(-1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			setActive(usable[0] ?? -1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			setActive(usable.at(-1) ?? -1);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			const o = options[active];
+			if (o) choose(o);
+		} else if (e.key === "Tab") close(false);
+		else if (e.key.length === 1) {
+			const k = e.key.toLowerCase();
+			const from = usable.indexOf(active);
+			const hit = [...usable.slice(from + 1), ...usable.slice(0, from + 1)].find((i) => options[i].label.toLowerCase().startsWith(k));
+			if (hit !== void 0) setActive(hit);
+		}
+	};
+	let lastGroup;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		ref: btn,
+		type: "button",
+		className: `dshl-select ${open ? "open" : ""} ${className ?? ""}`,
+		disabled,
+		title,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		onClick: () => setOpen((v) => !v),
+		onKeyDown: onKey,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "v",
+			children: label ?? chosen?.label ?? placeholder ?? ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+			className: "caret",
+			"aria-hidden": "true"
+		})]
+	}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: list,
+		className: "dshl-options",
+		role: "listbox",
+		style: place,
+		onKeyDown: onKey,
+		children: options.map((o, i) => {
+			const head = o.group && o.group !== lastGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grp",
+				children: o.group
+			}, `g:${o.group}`) : null;
+			lastGroup = o.group;
+			return [head, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-i": i,
+				role: "option",
+				"aria-selected": o.value === value,
+				"aria-disabled": o.disabled || void 0,
+				className: `opt ${o.value === value ? "on" : ""} ${i === active ? "act" : ""} ${o.disabled ? "off" : ""}`,
+				onPointerEnter: () => !o.disabled && setActive(i),
+				onClick: () => choose(o),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "l",
+						children: o.label
+					}),
+					o.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h",
+						children: o.hint
+					}),
+					o.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: "ok",
+						viewBox: "0 0 24 24",
+						width: "14",
+						height: "14",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2.4",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+					})
+				]
+			}, o.value)];
+		})
+	}), document.fullscreenElement ?? document.body)] });
+}
+
 // src/client/icons.tsx
 /** Minimal stroke icons (24×24, currentColor). */
 const P = {
@@ -793,198 +985,6 @@ function langLabel(code, ui, fallback) {
 	return NAMES[code]?.[ui] ?? fallback ?? code;
 }
 
-// src/client/Pick.tsx
-/** Theme tokens copied onto the list, so it looks like the place it opened from (light page, dark player menu). */
-const TOKENS = [
-	"--bg",
-	"--l1",
-	"--l2",
-	"--ink",
-	"--muted",
-	"--faint",
-	"--line",
-	"--hover",
-	"--accent"
-];
-/**
-* A drop-down in the page's own style, in place of the browser's <select>
-* (which draws a system menu as wide as the screen allows). The list is sized
-* to its options, scrolls when long, opens upward when there is no room
-* below, and works with the keyboard (arrows, Enter, Esc, typing a letter).
-*/
-function Pick(props) {
-	const { value, options, onChange, placeholder, disabled, className, title, label } = props;
-	const [open, setOpen] = (0, react.useState)(false);
-	const [active, setActive] = (0, react.useState)(-1);
-	const [place, setPlace] = (0, react.useState)({});
-	const btn = (0, react.useRef)(null);
-	const list = (0, react.useRef)(null);
-	const chosen = options.find((o) => o.value === value);
-	const usable = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
-	const close = (focus = true) => {
-		setOpen(false);
-		if (focus) btn.current?.focus();
-	};
-	const choose = (o) => {
-		if (o.disabled) return;
-		onChange(o.value);
-		close();
-	};
-	(0, react.useLayoutEffect)(() => {
-		if (!open || !btn.current) return;
-		const r = btn.current.getBoundingClientRect();
-		const cs = getComputedStyle(btn.current);
-		const vars = Object.fromEntries(TOKENS.map((k) => [k, cs.getPropertyValue(k).trim()]).filter(([, v]) => v));
-		const room = window.innerHeight - r.bottom - 8, above = r.top - 8;
-		const up = room < 220 && above > room;
-		const maxH = Math.max(120, Math.min(320, up ? above - 4 : room - 4));
-		const minWidth = Math.min(Math.max(r.width, 180), window.innerWidth - 16);
-		const maxWidth = Math.max(minWidth, Math.min(380, window.innerWidth - 16));
-		const side = r.left + maxWidth > window.innerWidth - 8 ? { right: Math.max(8, window.innerWidth - r.right) } : { left: Math.max(8, r.left) };
-		setPlace({
-			...vars,
-			...side,
-			minWidth,
-			maxWidth,
-			maxHeight: maxH,
-			...up ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 },
-			fontFamily: cs.fontFamily
-		});
-		setActive(Math.max(0, options.findIndex((o) => o.value === value)));
-	}, [open]);
-	(0, react.useEffect)(() => {
-		list.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: "nearest" });
-	}, [active, open]);
-	(0, react.useEffect)(() => {
-		if (!open) return;
-		const away = (e) => {
-			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
-		};
-		const gone = (e) => {
-			const t = e.target;
-			if (list.current?.contains(t)) return;
-			if (e.type === "resize" || t === document || t === document.documentElement || t instanceof Node && btn.current && t.contains(btn.current)) close(false);
-		};
-		document.addEventListener("pointerdown", away, true);
-		window.addEventListener("resize", gone);
-		window.addEventListener("scroll", gone, true);
-		return () => {
-			document.removeEventListener("pointerdown", away, true);
-			window.removeEventListener("resize", gone);
-			window.removeEventListener("scroll", gone, true);
-		};
-	}, [open]);
-	const onKey = (e) => {
-		if (disabled) return;
-		const step = (d) => {
-			const at = usable.indexOf(active);
-			setActive(usable[Math.min(usable.length - 1, Math.max(0, (at < 0 ? d > 0 ? -1 : usable.length : at) + d))] ?? -1);
-		};
-		if (!open) {
-			if ([
-				"ArrowDown",
-				"ArrowUp",
-				"Enter",
-				" "
-			].includes(e.key)) {
-				e.preventDefault();
-				setOpen(true);
-			}
-			return;
-		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			close();
-		} else if (e.key === "ArrowDown") {
-			e.preventDefault();
-			step(1);
-		} else if (e.key === "ArrowUp") {
-			e.preventDefault();
-			step(-1);
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			setActive(usable[0] ?? -1);
-		} else if (e.key === "End") {
-			e.preventDefault();
-			setActive(usable.at(-1) ?? -1);
-		} else if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			const o = options[active];
-			if (o) choose(o);
-		} else if (e.key === "Tab") close(false);
-		else if (e.key.length === 1) {
-			const k = e.key.toLowerCase();
-			const from = usable.indexOf(active);
-			const hit = [...usable.slice(from + 1), ...usable.slice(0, from + 1)].find((i) => options[i].label.toLowerCase().startsWith(k));
-			if (hit !== void 0) setActive(hit);
-		}
-	};
-	let lastGroup;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		ref: btn,
-		type: "button",
-		className: `dshl-select ${open ? "open" : ""} ${className ?? ""}`,
-		disabled,
-		title,
-		"aria-haspopup": "listbox",
-		"aria-expanded": open,
-		onClick: () => setOpen((v) => !v),
-		onKeyDown: onKey,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "v",
-			children: label ?? chosen?.label ?? placeholder ?? ""
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-			className: "caret",
-			"aria-hidden": "true"
-		})]
-	}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: list,
-		className: "dshl-options",
-		role: "listbox",
-		style: place,
-		onKeyDown: onKey,
-		children: options.map((o, i) => {
-			const head = o.group && o.group !== lastGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "grp",
-				children: o.group
-			}, `g:${o.group}`) : null;
-			lastGroup = o.group;
-			return [head, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-i": i,
-				role: "option",
-				"aria-selected": o.value === value,
-				"aria-disabled": o.disabled || void 0,
-				className: `opt ${o.value === value ? "on" : ""} ${i === active ? "act" : ""} ${o.disabled ? "off" : ""}`,
-				onPointerEnter: () => !o.disabled && setActive(i),
-				onClick: () => choose(o),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "l",
-						children: o.label
-					}),
-					o.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "h",
-						children: o.hint
-					}),
-					o.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "ok",
-						viewBox: "0 0 24 24",
-						width: "14",
-						height: "14",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2.4",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
-					})
-				]
-			}, o.value)];
-		})
-	}), document.fullscreenElement ?? document.body)] });
-}
-
 // src/client/LineChips.tsx
 const MAX_TRANSLATIONS = 4;
 /**
@@ -35187,7 +35187,28 @@ function upload(file, onProgress) {
 		xhr.send(file);
 	});
 }
-/** A value to copy: plain text (not an input look-alike) and a text button. */
+/** Cameras, screens and microphones on the computer Vidi runs on (null while loading). */
+function useDevices(enabled) {
+	const [devices, setDevices] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!enabled || devices) return;
+		fetch("/live/api/devices").then((r) => r.json()).then((d) => setDevices(d.devices ?? [])).catch(() => setDevices([]));
+	}, [enabled, devices]);
+	return devices;
+}
+/**
+* Ask for the camera / microphone from the page first when the page runs on the same computer: the system
+* then asks the user once for this app, and the capture that follows is allowed.
+*/
+async function askDeviceAccess(video) {
+	if (!(location.protocol === "dsh-app:" || /^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname)) || !navigator.mediaDevices?.getUserMedia) return;
+	try {
+		(await navigator.mediaDevices.getUserMedia({
+			audio: true,
+			video
+		})).getTracks().forEach((tr) => tr.stop());
+	} catch {}
+}
 /** The push stream key: copy it, or change it (typed, or a new random one). */
 function KeyRow({ value, t, onChanged }) {
 	const [edit, setEdit] = (0, react.useState)(null);
@@ -35368,6 +35389,23 @@ function LiveView(props) {
 	const linesBox = (0, react.useRef)(null);
 	const fileInput = (0, react.useRef)(null);
 	const active = !!job && (job.status === "resolving" || job.status === "running" || job.status === "stopping");
+	const [srcTab, setSrcTabRaw] = (0, react.useState)(() => store.get("source", "link"));
+	const setSrcTab = (v) => {
+		setSrcTabRaw(v);
+		store.set("source", v);
+		setError("");
+	};
+	const devices = useDevices(srcTab === "camera");
+	const [camVideo, setCamVideoRaw] = (0, react.useState)(() => store.get("device.video", ""));
+	const [camAudio, setCamAudioRaw] = (0, react.useState)(() => store.get("device.audio", ""));
+	const setCamVideo = (v) => {
+		setCamVideoRaw(v);
+		store.set("device.video", v);
+	};
+	const setCamAudio = (v) => {
+		setCamAudioRaw(v);
+		store.set("device.audio", v);
+	};
 	const ui = t("view.live") === "Video" ? "en" : "zh";
 	const langOptions = (0, react.useMemo)(() => Object.entries(langs).filter(([k]) => k !== "auto").map(([k, v]) => [k, langLabel(k, ui, v)]), [langs, ui]);
 	const langName = (0, react.useCallback)((k) => k === "src" ? t("sub.source") : langLabel(k, ui, langs[k]), [
@@ -35517,7 +35555,7 @@ function LiveView(props) {
 			url: target
 		} : classify(target);
 		if (!c) return;
-		if (props.onNewVideo && job && job.source !== "push" && job.url !== c.url && c.source !== "push" && await props.onNewVideo(target)) return;
+		if (props.onNewVideo && job && job.source !== "push" && job.url !== c.url && c.source !== "push" && c.source !== "device" && await props.onNewVideo(target)) return;
 		try {
 			const j = await post("start", {
 				...options(),
@@ -35836,23 +35874,45 @@ function LiveView(props) {
 	const missing = deps.filter((d) => !d.ok && (d.name === "ffmpeg" || d.name === "yt-dlp" || (engine || "local") === "local" && d.name.startsWith("whisper")));
 	const needsModel = !hasTranslator && shownLines.some((l) => l !== "src");
 	const hasMain = !!job && !(job.status === "error" && !job.files.length);
+	const cams = (devices ?? []).filter((d) => d.kind !== "mic"), mics = (devices ?? []).filter((d) => d.kind === "mic");
+	const camV = camVideo === "none" || cams.some((d) => d.id === camVideo) ? camVideo : cams.find((d) => d.kind === "camera")?.id ?? "none";
+	const camA = mics.some((d) => d.id === camAudio) ? camAudio : mics[0]?.id ?? "";
+	const videoOptions = [...cams.map((d) => ({
+		value: d.id,
+		label: d.kind === "screen" ? t("dev.screen").replace("{n}", String(Number(/\d+/.exec(d.name)?.[0] ?? 0) + 1)) : d.name,
+		group: t(d.kind === "screen" ? "dev.screens" : "dev.cameras")
+	})), {
+		value: "none",
+		label: t("dev.noVideo"),
+		group: t("dev.other")
+	}];
+	const startDevice = async () => {
+		if (!camA) return;
+		const title = camV === "none" ? mics.find((d) => d.id === camA)?.name ?? "" : videoOptions.find((o) => o.value === camV)?.label ?? "";
+		await askDeviceAccess(camV !== "none" && cams.find((d) => d.id === camV)?.kind === "camera");
+		start(JSON.stringify({
+			video: camV === "none" ? void 0 : camV,
+			audio: camA,
+			title
+		}), "device");
+	};
 	const emptyBox = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "dshl-drop",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: t("empty.title") }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("empty.body") }),
-			armed?.rtmp && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: t(srcTab === "file" ? "src.file.title" : srcTab === "camera" ? "src.cam.title" : srcTab === "push" ? "src.push.title" : "empty.title") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: srcTab === "camera" && devices && !mics.length ? t("src.cam.none") : t(srcTab === "file" ? "src.file.body" : srcTab === "camera" ? "src.cam.body" : srcTab === "push" ? "src.push.body" : "empty.body") }),
+			srcTab === "file" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				className: "dshl-btn",
+				onClick: () => fileInput.current?.click(),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.folder, {}),
+					" ",
+					t("src.file.pick")
+				]
+			}),
+			srcTab === "push" && armed?.rtmp && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "dshl-pushinfo",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "title",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.push, {}),
-						" ",
-						t("push.title"),
-						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("push.hint") })
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyRow, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyRow, {
 					label: t("push.server"),
 					value: armed.rtmp,
 					copy: t("push.copy"),
@@ -35861,7 +35921,7 @@ function LiveView(props) {
 					value: armed.key,
 					t,
 					onChanged: () => void post("arm", options()).then((a) => setArmed(a.busy ? null : a)).catch(() => {})
-				})] })]
+				})] })
 			})
 		]
 	});
@@ -36105,46 +36165,89 @@ function LiveView(props) {
 							title: t("page.back"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.arrow, {})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "dshl-field",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.link, {}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									type: "text",
-									value: input,
-									placeholder: t("in.placeholder"),
-									onChange: (e) => setInput(e.target.value),
-									onKeyDown: (e) => {
-										if (e.key === "Enter") start();
-									}
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: "ghost",
-									title: t("in.file.tip"),
-									onClick: () => fileInput.current?.click(),
-									children: uploading !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pct",
-										children: t("in.uploading").replace("{p}", String(uploading))
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.folder, {})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									ref: fileInput,
-									type: "file",
-									accept: "video/*,audio/*,.mkv,.ts,.flv",
-									hidden: true,
-									onChange: (e) => {
-										const f = e.target.files?.[0];
-										if (f) onFile(f);
-										e.target.value = "";
-									}
-								})
-							]
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+							className: "srcpick",
+							value: srcTab,
+							onChange: (v) => setSrcTab(v),
+							title: t("src.tip"),
+							options: [
+								"link",
+								"file",
+								"camera",
+								"push"
+							].map((k) => ({
+								value: k,
+								label: t(`src.${k}`)
+							}))
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: fileInput,
+							type: "file",
+							accept: "video/*,audio/*,.mkv,.ts,.flv",
+							hidden: true,
+							onChange: (e) => {
+								const f = e.target.files?.[0];
+								if (f) onFile(f);
+								e.target.value = "";
+							}
+						}),
+						(srcTab === "link" || srcTab === "file") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "dshl-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "text",
+								value: input,
+								placeholder: t(srcTab === "file" ? "src.file.placeholder" : "in.placeholder"),
+								onChange: (e) => setInput(e.target.value),
+								onKeyDown: (e) => {
+									if (e.key === "Enter") start();
+								}
+							}), srcTab === "file" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "ghost",
+								title: t("in.file.tip"),
+								onClick: () => fileInput.current?.click(),
+								children: uploading !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "pct",
+									children: t("in.uploading").replace("{p}", String(uploading))
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.folder, {})
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dshl-btn primary",
 							onClick: () => start(),
 							disabled: !classify(input),
 							children: t("in.open")
+						})] }),
+						srcTab === "camera" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dshl-devbar",
+							children: devices === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dshl-muted",
+								children: t("src.cam.loading")
+							}) : mics.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+								value: camV,
+								options: videoOptions,
+								onChange: setCamVideo,
+								title: t("dev.video")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+								value: camA,
+								options: mics.map((d) => ({
+									value: d.id,
+									label: d.name
+								})),
+								onChange: setCamAudio,
+								title: t("dev.audio")
+							})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dshl-muted",
+								children: t("src.cam.none")
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "dshl-btn primary",
+							onClick: () => void startDevice(),
+							disabled: !camA,
+							children: t("dev.start")
+						})] }),
+						srcTab === "push" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dshl-field static",
+							title: t("src.push.body"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(armed?.rtmp ? "src.push.bar" : active ? "src.push.busy" : "src.push.wait") })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Settings, {
 							engine: engine || "local",
@@ -36196,7 +36299,7 @@ function LiveView(props) {
 			}),
 			(error || job?.status === "error") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dshl-note warn",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: error || job?.message }), job && !active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: error || (job?.message === "device-blocked" ? t("dev.blocked") : job?.message) }), job && !active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					className: "dshl-link",
 					onClick: () => start(job.url, job.source),
 					children: t("st.retry")
@@ -37065,7 +37168,7 @@ const en = {
 	"in.uploading": "Uploading {p}%",
 	"in.drop": "Drop to start",
 	"empty.title": "Subtitles for any video",
-	"empty.body": "YouTube, Bilibili and more — or drop in a video or audio file.",
+	"empty.body": "Paste a link from YouTube, Bilibili and more — videos and live streams.",
 	"st.resolving": "Opening…",
 	"st.login": "Using your {b} login… if macOS asks, choose “Always Allow”.",
 	"st.live": "Live",
@@ -37078,6 +37181,33 @@ const en = {
 	"note.noModel": "No model set up, so subtitles stay in the original language.",
 	"note.install": "Install first:",
 	"push.title": "Stream here from OBS",
+	"src.tip": "Where the video comes from",
+	"src.link": "Link",
+	"src.file": "Local file",
+	"src.camera": "Camera",
+	"src.push": "OBS stream",
+	"src.file.placeholder": "Path of a video or audio file",
+	"src.file.title": "Open a video on this computer",
+	"src.file.body": "Drop a video or audio file here.",
+	"src.file.pick": "Choose a file",
+	"src.cam.title": "Talk to the camera",
+	"src.cam.body": "Pick the picture and the microphone above and press Start: subtitles appear as you speak.",
+	"src.cam.none": "No camera or microphone found on this computer.",
+	"src.cam.loading": "Looking for cameras…",
+	"src.push.title": "Stream from OBS",
+	"src.push.body": "In OBS choose the Custom service and fill in the server and key below; subtitles start as soon as the picture arrives.",
+	"src.push.bar": "Waiting for OBS: server and key below",
+	"src.push.wait": "Getting the address ready…",
+	"src.push.busy": "Close the current video to receive a stream",
+	"dev.blocked": "No picture or sound from the device. Allow DeepSeek Harness under System Settings → Privacy & Security → Camera and Microphone (Screen Recording for the screen), then start again.",
+	"dev.video": "Picture",
+	"dev.audio": "Microphone",
+	"dev.cameras": "Cameras",
+	"dev.screens": "Screen",
+	"dev.screen": "Screen {n}",
+	"dev.other": "Other",
+	"dev.noVideo": "Sound only",
+	"dev.start": "Start",
 	"push.hint": "Service: Custom",
 	"push.copy": "Copy",
 	"push.copied": "Copied",
@@ -37456,7 +37586,7 @@ const zh = {
 	"in.uploading": "上传中 {p}%",
 	"in.drop": "松手开始",
 	"empty.title": "给任何视频配字幕",
-	"empty.body": "支持 YouTube、B 站等网站，也可以拖入视频或音频文件",
+	"empty.body": "粘贴 YouTube、B 站等网站的视频或直播链接",
 	"st.resolving": "正在打开…",
 	"st.login": "正在用 {b} 的登录状态…如果系统弹窗询问，点「始终允许」",
 	"st.live": "直播中",
@@ -37469,6 +37599,33 @@ const zh = {
 	"note.noModel": "还没配置模型，字幕只显示原文",
 	"note.install": "需要先安装：",
 	"push.title": "用 OBS 推流到这里",
+	"src.tip": "视频从哪里来",
+	"src.link": "链接",
+	"src.file": "本地文件",
+	"src.camera": "摄像头",
+	"src.push": "OBS 推流",
+	"src.file.placeholder": "视频或音频文件的路径",
+	"src.file.title": "打开这台电脑上的视频",
+	"src.file.body": "把视频或音频文件拖到这里。",
+	"src.file.pick": "选择文件",
+	"src.cam.title": "对着摄像头说话",
+	"src.cam.body": "在上面选好画面和麦克风，点开始，字幕边说边出。",
+	"src.cam.none": "这台电脑上没有找到摄像头或麦克风。",
+	"src.cam.loading": "正在找摄像头…",
+	"src.push.title": "用 OBS 推流过来",
+	"src.push.body": "OBS 里服务选「自定义」，填下面的服务器和密钥，画面一到字幕就开始。",
+	"src.push.bar": "等 OBS 推流过来，服务器和密钥在下面",
+	"src.push.wait": "正在准备推流地址…",
+	"src.push.busy": "关掉当前视频后可以接收推流",
+	"dev.blocked": "设备没有传来画面和声音。到 系统设置 → 隐私与安全性 → 摄像头、麦克风（用屏幕时是 屏幕录制）里打开 DeepSeek Harness，再点开始。",
+	"dev.video": "画面",
+	"dev.audio": "麦克风",
+	"dev.cameras": "摄像头",
+	"dev.screens": "屏幕",
+	"dev.screen": "屏幕 {n}",
+	"dev.other": "其他",
+	"dev.noVideo": "只要声音",
+	"dev.start": "开始",
 	"push.hint": "服务选「自定义」",
 	"push.copy": "复制",
 	"push.copied": "已复制",
@@ -37871,6 +38028,12 @@ const CSS = `
 .dshl-pushinfo dd .err { flex-basis: 100%; color: #d1434b; font-size: 12px; }
 .dshl-pushinfo .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; user-select: all; }
 .dshl-pushinfo .dshl-link { flex: none; font-size: 12.5px; }
+.dshl-bar .dshl-select.srcpick { flex: none; width: auto; height: 40px; padding: 0 10px 0 14px; border-radius: 10px; font-weight: 550; }
+.dshl-devbar { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
+.dshl-devbar .dshl-select { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 10px; }
+.dshl-field.static { color: var(--muted); cursor: default; }
+.dshl-field.static .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
+.dshl-drop > .dshl-btn { margin-top: 20px; }
 
 /* ── Layout ── */
 .dshl-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px); align-items: start; gap: 18px; padding: 18px 20px 28px; }

package/lib/index.mjs

@@ -1793,6 +1793,144 @@ var Restream = class extends EventEmitter {
 		this.changed();
 	}
 };
+// src/devices.ts
+function ffmpegList(args) {
+	return new Promise((resolve) => {
+		execFile("ffmpeg", ["-hide_banner", ...args], { timeout: 8e3 }, (_err, _out, err) => resolve(String(err ?? "")));
+	});
+}
+async function listDevices() {
+	if (process.platform === "darwin") {
+		const text = await ffmpegList([
+			"-f",
+			"avfoundation",
+			"-list_devices",
+			"true",
+			"-i",
+			""
+		]);
+		const out = [];
+		let section;
+		for (const line of text.split("\n")) {
+			if (/video devices:/i.test(line)) section = "video";
+			else if (/audio devices:/i.test(line)) section = "audio";
+			const m = /\]\s+\[(\d+)\]\s+(.+?)\s*$/.exec(line);
+			if (!m || !section) continue;
+			const [, index, name] = m;
+			const id = name.includes(":") ? index : name;
+			if (section === "audio") out.push({
+				id,
+				name,
+				kind: "mic"
+			});
+			else out.push({
+				id,
+				name: name.replace(/^Capture screen (\d+)$/, "Screen $1"),
+				kind: /^Capture screen/.test(name) ? "screen" : "camera"
+			});
+		}
+		return out.filter((d) => !(d.kind === "mic" && /speakers|audio device|blackhole|soundflower|loopback/i.test(d.name)));
+	}
+	if (process.platform === "win32") {
+		const text = await ffmpegList([
+			"-list_devices",
+			"true",
+			"-f",
+			"dshow",
+			"-i",
+			"dummy"
+		]);
+		const out = [];
+		let section;
+		for (const line of text.split("\n")) {
+			if (/DirectShow video devices/i.test(line)) section = "video";
+			else if (/DirectShow audio devices/i.test(line)) section = "audio";
+			if (/Alternative name/i.test(line)) continue;
+			const m = /"([^"]+)"\s*(?:\((video|audio)\))?/.exec(line);
+			if (!m) continue;
+			const kind = m[2] ?? section;
+			if (kind) out.push({
+				id: m[1],
+				name: m[1],
+				kind: kind === "audio" ? "mic" : "camera"
+			});
+		}
+		return out;
+	}
+	return [...(existsSync("/dev") ? readdirSync("/dev").filter((f) => /^video\d+$/.test(f)) : []).map((f) => {
+		let name = f;
+		try {
+			name = readFileSync(`/sys/class/video4linux/${f}/name`, "utf8").trim() || f;
+		} catch {}
+		return {
+			id: `/dev/${f}`,
+			name,
+			kind: "camera"
+		};
+	}), {
+		id: "default",
+		name: "Default microphone",
+		kind: "mic"
+	}];
+}
+/** ffmpeg input for the chosen devices: arguments plus which streams carry the picture and the sound. */
+function deviceInput(c, q) {
+	if (!c.audio) throw new Error("choose a microphone");
+	if (process.platform === "darwin") return {
+		args: [
+			...q,
+			"-f",
+			"avfoundation",
+			"-framerate",
+			"30",
+			...c.video ? ["-capture_cursor", "1"] : [],
+			"-i",
+			`${c.video ?? "none"}:${c.audio}`
+		],
+		audio: "0:a:0",
+		video: c.video ? "0:v:0" : void 0
+	};
+	if (process.platform === "win32") return {
+		args: [
+			...q,
+			"-f",
+			"dshow",
+			"-rtbufsize",
+			"256M",
+			"-i",
+			[c.video ? `video=${c.video}` : "", `audio=${c.audio}`].filter(Boolean).join(":")
+		],
+		audio: "0:a:0",
+		video: c.video ? "0:v:0" : void 0
+	};
+	return c.video ? {
+		args: [
+			...q,
+			"-f",
+			"v4l2",
+			"-framerate",
+			"30",
+			"-i",
+			c.video,
+			...q,
+			"-f",
+			"pulse",
+			"-i",
+			c.audio
+		],
+		audio: "1:a:0",
+		video: "0:v:0"
+	} : {
+		args: [
+			...q,
+			"-f",
+			"pulse",
+			"-i",
+			c.audio
+		],
+		audio: "0:a:0"
+	};
+}
 // src/job.ts
 const run$1 = promisify(execFile);
 /** URLs ffmpeg can open directly (no yt-dlp resolution). */
@@ -2055,6 +2193,14 @@ var LiveJob = class LiveJob extends EventEmitter {
 				vcodec: p.vcodec
 			};
 		}
+		if (source === "device") {
+			const c = JSON.parse(url);
+			this.title = c.title || "Camera";
+			return {
+				...deviceInput(c, q),
+				vcodec: "rawvideo"
+			};
+		}
 		if (source === "push") {
 			const key = this.deps.ingest.key ?? this.id.slice(-4);
 			const { host, rtmpPort, srtPort } = this.deps.ingest;
@@ -2201,6 +2347,8 @@ var LiveJob = class LiveJob extends EventEmitter {
 				"23",
 				"-vf",
 				"scale=-2:min(720\\,ih)",
+				"-pix_fmt",
+				"yuv420p",
 				"-g",
 				"50"
 			]
@@ -2278,6 +2426,12 @@ var LiveJob = class LiveJob extends EventEmitter {
 			"pipe"
 		] });
 		this.ffmpeg = ff;
+		if (this.opts.source === "device") setTimeout(() => {
+			if (this.ffmpeg !== ff || this.segments().length) return;
+			this.ffmpeg = void 0;
+			ff.kill("SIGKILL");
+			this.setStatus("error", "device-blocked");
+		}, 12e3);
 		if (this.opts.source === "push") {
 			const wait = setInterval(() => {
 				if (this.ffmpeg !== ff) {
@@ -6122,7 +6276,7 @@ function apply(ctx, config) {
 					provider: typeof b.provider === "string" ? b.provider : "local",
 					mode: modeOf(b.mode)
 				} });
-				const source = b.source === "push" || b.source === "file" ? b.source : "url";
+				const source = b.source === "push" || b.source === "file" || b.source === "device" ? b.source : "url";
 				await disarm();
 				const raw = b.url.trim();
 				return send(res, 200, (await startJob({
@@ -6235,6 +6389,14 @@ function apply(ctx, config) {
 				}
 				return send(res, 200, job.summary());
 			}
+			if (route === "devices") {
+				const devices = await listDevices();
+				log(`devices: ${devices.filter((d) => d.kind !== "mic").length} picture, ${devices.filter((d) => d.kind === "mic").length} microphone`);
+				return send(res, 200, {
+					devices,
+					platform: process.platform
+				});
+			}
 			if (route === "pushkey" && req.method === "POST") {
 				if ([...jobs.values()].some((j) => j.opts.source === "push" && j.status === "running" && !j.message)) return send(res, 409, { error: "a stream is coming in; change the key after it ends" });
 				const b = await readJson(req);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vidi",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "A video tool for DeepSeek Harness: watch live streams, videos and podcasts with real-time subtitles in any language, then clip and download",
   "type": "module",
   "license": "PolyForm-Noncommercial-1.0.0",