) => {
+ const drag = dragRef.current;
+ const container = containerRef.current;
+ if (!drag || !container || drag.pointerId !== event.pointerId) return;
+ const dx = event.clientX - drag.startX;
+ const dy = event.clientY - drag.startY;
+ if (Math.abs(dx) + Math.abs(dy) > 4) drag.moved = true;
+ const rect = container.getBoundingClientRect();
+ setPosition({
+ x: Math.min(Math.max(16, drag.originX + dx), Math.max(16, rect.width - 192)),
+ y: Math.min(Math.max(16, drag.originY + dy), Math.max(16, rect.height - 116)),
+ });
+ }, []);
+
+ if (view === "video") {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+}
+
function DebugVideoPanel({
camera,
streamOverride,
+ compact = false,
}: {
camera: CameraPreview;
streamOverride?: MediaStream | null;
+ compact?: boolean;
}) {
const { stream, error, starting, active } = camera;
const effectiveStream = streamOverride ?? stream;
@@ -2961,6 +3078,7 @@ function DebugVideoPanel({
@@ -2970,19 +3088,12 @@ function DebugVideoPanel({
playsInline
muted
className={[
- "h-full w-full -scale-x-100 object-contain",
+ "h-full w-full -scale-x-100",
+ compact ? "object-cover" : "object-contain",
effectiveActive ? "" : "hidden",
].join(" ")}
/>
- {effectiveActive ? (
-
-
- 预览中
-
- ) : (
+ {!effectiveActive ? (
@@ -2992,7 +3103,7 @@ function DebugVideoPanel({
{error}
)}
- )}
+ ) : null}
);
}