lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-24 23:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix WGC display selection and webcam sync

Browse Source
This commit is contained in:
webadderall
2026-03-26 21:52:35 +11:00
parent ebe333f029
commit e5becc30a3
11 changed files with 82 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/electron-env.d.ts
Vendored
+2 -1
View File
@@ -114,10 +114,11 @@ interface Window {
setCurrentRecordingSession: (session: {
videoPath: string;
webcamPath?: string | null;
timeOffsetMs?: number;
}) => Promise<{ success: boolean }>;
getCurrentRecordingSession: () => Promise<{
success: boolean;
session?: { videoPath: string; webcamPath?: string | null };
session?: { videoPath: string; webcamPath?: string | null; timeOffsetMs?: number };
}>;
getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
clearCurrentVideoPath: () => Promise<{ success: boolean }>;
electron/ipc/handlers.ts
+27 -4
View File
@@ -57,12 +57,14 @@ type WindowBounds = {
type RecordingSessionData = {
videoPath: string
webcamPath?: string | null
timeOffsetMs?: number
}
type RecordingSessionManifest = {
version: 1
version: 1 | 2
videoFileName: string
webcamFileName?: string | null
timeOffsetMs?: number
}
let selectedSource: SelectedSource | null = null
@@ -223,6 +225,12 @@ function normalizeVideoSourcePath(videoPath?: string | null): string | null {
return trimmed
}
function normalizeRecordingTimeOffsetMs(value: unknown): number {
return typeof value === 'number' && Number.isFinite(value)
? Math.round(value)
: 0
}
function getRecordingSessionManifestPath(videoPath: string) {
const extension = path.extname(videoPath)
const baseName = path.basename(videoPath, extension)
@@ -244,9 +252,10 @@ async function persistRecordingSessionManifest(session: RecordingSessionData): P
}
const manifest: RecordingSessionManifest = {
version: 1,
version: 2,
videoFileName: path.basename(normalizedVideoPath),
webcamFileName: path.basename(normalizedWebcamPath),
timeOffsetMs: normalizeRecordingTimeOffsetMs(session.timeOffsetMs),
}
await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2), 'utf-8')
@@ -263,7 +272,7 @@ async function resolveRecordingSessionManifest(videoPath?: string | null): Promi
try {
const content = await fs.readFile(manifestPath, 'utf-8')
const parsed = JSON.parse(content) as Partial<RecordingSessionManifest>
if (parsed.version !== 1) {
if (parsed.version !== 1 && parsed.version !== 2) {
return null
}
@@ -275,6 +284,7 @@ async function resolveRecordingSessionManifest(videoPath?: string | null): Promi
return {
videoPath: normalizedVideoPath,
webcamPath: null,
timeOffsetMs: 0,
}
}
@@ -284,6 +294,7 @@ async function resolveRecordingSessionManifest(videoPath?: string | null): Promi
return {
videoPath: normalizedVideoPath,
webcamPath,
timeOffsetMs: normalizeRecordingTimeOffsetMs(parsed.timeOffsetMs),
}
} catch {
return null
@@ -338,6 +349,7 @@ async function resolveRecordingSession(videoPath?: string | null): Promise<Recor
return {
videoPath: normalizedVideoPath,
webcamPath: linkedWebcamPath,
timeOffsetMs: 0,
}
}
@@ -3031,9 +3043,14 @@ body{background:transparent;overflow:hidden;width:100vw;height:100vh}
? ((project as { editor?: { webcam?: { sourcePath?: string } } }).editor?.webcam
?.sourcePath ?? null)
: null
const timeOffsetMs = normalizeRecordingTimeOffsetMs(
(project as { editor?: { webcam?: { timeOffsetMs?: unknown } } }).editor?.webcam
?.timeOffsetMs,
)
currentRecordingSession = {
videoPath: normalizedVideoPath,
webcamPath,
timeOffsetMs,
}
}
@@ -3069,9 +3086,14 @@ body{background:transparent;overflow:hidden;width:100vw;height:100vh}
? ((project as { editor?: { webcam?: { sourcePath?: string } } }).editor?.webcam
?.sourcePath ?? null)
: null
const timeOffsetMs = normalizeRecordingTimeOffsetMs(
(project as { editor?: { webcam?: { timeOffsetMs?: unknown } } }).editor?.webcam
?.timeOffsetMs,
)
currentRecordingSession = {
videoPath: normalizedVideoPath,
webcamPath,
timeOffsetMs,
}
}
return {
@@ -3106,12 +3128,13 @@ body{background:transparent;overflow:hidden;width:100vw;height:100vh}
return { success: true, webcamPath: resolvedSession.webcamPath ?? null }
})
ipcMain.handle('set-current-recording-session', async (_, session: { videoPath: string; webcamPath?: string | null }) => {
ipcMain.handle('set-current-recording-session', async (_, session: { videoPath: string; webcamPath?: string | null; timeOffsetMs?: number }) => {
const normalizedVideoPath = normalizeVideoSourcePath(session.videoPath) ?? session.videoPath
currentVideoPath = normalizedVideoPath
currentRecordingSession = {
videoPath: normalizedVideoPath,
webcamPath: normalizeVideoSourcePath(session.webcamPath ?? null),
timeOffsetMs: normalizeRecordingTimeOffsetMs(session.timeOffsetMs),
}
currentProjectPath = null
await persistRecordingSessionManifest(currentRecordingSession)
electron/native/wgc-capture/src/main.cpp
+2 -2
View File
@@ -18,7 +18,7 @@ static std::mutex g_stopMutex;
static std::condition_variable g_stopCv;
struct CaptureConfig {
int displayId = 0;
int64_t displayId = 0;
int64_t windowHandle = 0;
std::string outputPath;
std::string audioOutputPath;
@@ -90,7 +90,7 @@ static bool parseSimpleJson(const std::string& json, CaptureConfig& config) {
config.outputPath = findString("outputPath");
if (config.outputPath.empty()) return false;
int displayId = findInt("displayId");
int64_t displayId = findInt64("displayId");
if (displayId >= 0) config.displayId = displayId;
int64_t windowHandle = findInt64("windowHandle");
electron/native/wgc-capture/src/monitor_utils.cpp
+3 -7
View File
@@ -27,20 +27,16 @@ std::vector<MonitorInfo> enumerateMonitors() {
}
// Electron uses the HMONITOR handle value cast to a number as the display ID.
HMONITOR findMonitorByDisplayId(int displayId) {
HMONITOR findMonitorByDisplayId(int64_t displayId) {
auto monitors = enumerateMonitors();
for (const auto& m : monitors) {
if (static_cast<int>(reinterpret_cast<intptr_t>(m.handle)) == displayId) {
if (static_cast<int64_t>(reinterpret_cast<intptr_t>(m.handle)) == displayId) {
return m.handle;
}
}
if (!monitors.empty()) {
return monitors[0].handle;
}
return MonitorFromPoint({0, 0}, MONITOR_DEFAULTTOPRIMARY);
return nullptr;
}
MonitorInfo getMonitorInfo(HMONITOR monitor) {
electron/native/wgc-capture/src/monitor_utils.h
+2 -1
View File
@@ -1,5 +1,6 @@
#pragma once
#include <cstdint>
#include <windows.h>
#include <string>
#include <vector>
@@ -14,5 +15,5 @@ struct MonitorInfo {
};
std::vector<MonitorInfo> enumerateMonitors();
HMONITOR findMonitorByDisplayId(int displayId);
HMONITOR findMonitorByDisplayId(int64_t displayId);
MonitorInfo getMonitorInfo(HMONITOR monitor);
electron/preload.ts
+1 -1
View File
@@ -138,7 +138,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
setCurrentVideoPath: (path: string) => {
return ipcRenderer.invoke("set-current-video-path", path);
},
setCurrentRecordingSession: (session: { videoPath: string; webcamPath?: string | null }) => {
setCurrentRecordingSession: (session: { videoPath: string; webcamPath?: string | null; timeOffsetMs?: number }) => {
return ipcRenderer.invoke("set-current-recording-session", session);
},
getCurrentRecordingSession: () => {
src/components/video-editor/VideoEditor.tsx
+8 -3
View File
@@ -456,7 +456,7 @@ export default function VideoEditor() {
]);
const syncRecordingSessionWebcam = useCallback(
async (webcamPath: string | null) => {
async (webcamPath: string | null, timeOffsetMs = 0) => {
const sourcePath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
if (!sourcePath || !window.electronAPI.setCurrentRecordingSession) {
return;
@@ -465,6 +465,7 @@ export default function VideoEditor() {
await window.electronAPI.setCurrentRecordingSession({
videoPath: sourcePath,
webcamPath,
timeOffsetMs,
});
},
[videoPath, videoSourcePath],
@@ -480,9 +481,10 @@ export default function VideoEditor() {
...prev,
enabled: true,
sourcePath: result.path ?? null,
timeOffsetMs: 0,
}));
await syncRecordingSessionWebcam(result.path);
await syncRecordingSessionWebcam(result.path, 0);
toast.success(t("settings.effects.webcamFootageAdded"));
}, [syncRecordingSessionWebcam, t]);
@@ -491,9 +493,10 @@ export default function VideoEditor() {
...prev,
enabled: false,
sourcePath: null,
timeOffsetMs: 0,
}));
await syncRecordingSessionWebcam(null);
await syncRecordingSessionWebcam(null, 0);
toast.success(t("settings.effects.webcamFootageRemoved"));
}, [syncRecordingSessionWebcam, t]);
@@ -557,6 +560,7 @@ export default function VideoEditor() {
...prev,
enabled: Boolean(sessionResult.session?.webcamPath),
sourcePath: sessionResult.session?.webcamPath ?? null,
timeOffsetMs: sessionResult.session?.timeOffsetMs ?? 0,
}));
return;
}
@@ -572,6 +576,7 @@ export default function VideoEditor() {
...prev,
enabled: false,
sourcePath: null,
timeOffsetMs: 0,
}));
} else {
setError("No video to load. Please record or select a video.");
src/components/video-editor/VideoPlayback.tsx
+6 -3
View File
@@ -706,10 +706,13 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
return;
}
const targetTime = Math.max(0, currentTime);
if (Math.abs(webcamVideo.currentTime - targetTime) > (isPlaying ? 0.1 : 0.01)) {
const targetTime = Math.max(0, currentTime - (webcam.timeOffsetMs ?? 0) / 1000);
const clampedTargetTime = Number.isFinite(webcamVideo.duration)
? Math.min(targetTime, Math.max(0, webcamVideo.duration))
: targetTime;
if (Math.abs(webcamVideo.currentTime - clampedTargetTime) > (isPlaying ? 0.1 : 0.01)) {
try {
webcamVideo.currentTime = targetTime;
webcamVideo.currentTime = clampedTargetTime;
} catch {
// no-op
}
src/components/video-editor/projectPersistence.ts
+4
View File
@@ -20,6 +20,7 @@ import {
DEFAULT_WEBCAM_REACT_TO_ZOOM,
DEFAULT_WEBCAM_SHADOW,
DEFAULT_WEBCAM_SIZE,
DEFAULT_WEBCAM_TIME_OFFSET_MS,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_ZOOM_DEPTH,
@@ -403,6 +404,9 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
enabled:
typeof webcam.enabled === "boolean" ? webcam.enabled : DEFAULT_WEBCAM_OVERLAY.enabled,
sourcePath: webcamSourcePath,
timeOffsetMs: isFiniteNumber(webcam.timeOffsetMs)
? Math.round(clamp(webcam.timeOffsetMs, -30_000, 30_000))
: DEFAULT_WEBCAM_TIME_OFFSET_MS,
mirror: typeof webcam.mirror === "boolean" ? webcam.mirror : DEFAULT_WEBCAM_OVERLAY.mirror,
corner:
webcam.corner === "top-left" ||
src/components/video-editor/types.ts
+3
View File
@@ -49,6 +49,7 @@ export type WebcamCorner = "top-left" | "top-right" | "bottom-left" | "bottom-ri
export interface WebcamOverlaySettings {
enabled: boolean;
sourcePath: string | null;
timeOffsetMs: number;
mirror: boolean;
corner: WebcamCorner;
size: number;
@@ -69,10 +70,12 @@ export const DEFAULT_WEBCAM_REACT_TO_ZOOM = true;
export const DEFAULT_WEBCAM_CORNER_RADIUS = 18;
export const DEFAULT_WEBCAM_SHADOW = 0.35;
export const DEFAULT_WEBCAM_MARGIN = 24;
export const DEFAULT_WEBCAM_TIME_OFFSET_MS = 0;
export const DEFAULT_WEBCAM_OVERLAY: WebcamOverlaySettings = {
enabled: false,
sourcePath: null,
timeOffsetMs: DEFAULT_WEBCAM_TIME_OFFSET_MS,
mirror: true,
corner: "bottom-right",
size: DEFAULT_WEBCAM_SIZE,
src/hooks/useScreenRecorder.ts
+24 -3
View File
@@ -78,6 +78,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const chunks = useRef<Blob[]>([]);
const webcamChunks = useRef<Blob[]>([]);
const startTime = useRef<number>(0);
const webcamStartTime = useRef<number | null>(null);
const webcamTimeOffsetMs = useRef(0);
const recordingSessionTimestamp = useRef<number | null>(null);
const nativeScreenRecording = useRef(false);
const wgcRecording = useRef(false);
@@ -190,6 +192,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
await window.electronAPI.setCurrentRecordingSession({
videoPath,
webcamPath,
timeOffsetMs: webcamTimeOffsetMs.current,
});
} else {
await window.electronAPI.setCurrentVideoPath(videoPath);
@@ -218,6 +221,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const startWebcamRecorder = useCallback(async () => {
if (!webcamEnabled) {
pendingWebcamPathPromise.current = Promise.resolve(null);
webcamStartTime.current = null;
webcamTimeOffsetMs.current = 0;
return;
}
@@ -270,7 +275,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
return;
}
const duration = Date.now() - startTime.current;
const duration = Math.max(0, Date.now() - (webcamStartTime.current ?? Date.now()));
const webcamBlob = new Blob(webcamChunks.current, { type: mimeType });
webcamChunks.current = [];
const fixedBlob = await fixWebmDuration(webcamBlob, duration);
@@ -283,6 +288,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
} finally {
webcamStopResolver.current = null;
webcamRecorder.current = null;
webcamStartTime.current = null;
if (webcamStream.current) {
webcamStream.current.getTracks().forEach((track) => track.stop());
webcamStream.current = null;
@@ -290,12 +296,15 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
};
webcamStartTime.current = Date.now();
recorder.start(RECORDER_TIMESLICE_MS);
} catch (error) {
console.warn("Failed to start webcam recording; continuing without webcam layer:", error);
pendingWebcamPathPromise.current = Promise.resolve(null);
webcamStopPromise.current = Promise.resolve(null);
webcamRecorder.current = null;
webcamStartTime.current = null;
webcamTimeOffsetMs.current = 0;
if (webcamStream.current) {
webcamStream.current.getTracks().forEach((track) => track.stop());
webcamStream.current = null;
@@ -441,6 +450,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
recordingSessionTimestamp.current = Date.now();
startTime.current = recordingSessionTimestamp.current;
webcamStartTime.current = null;
webcamTimeOffsetMs.current = 0;
await startWebcamRecorder();
const platform = await window.electronAPI.getPlatform();
@@ -513,9 +524,13 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
if (nativeResult.success) {
const mainStartedAt = Date.now();
nativeScreenRecording.current = true;
wgcRecording.current = useWgcCapture;
startTime.current = Date.now();
startTime.current = mainStartedAt;
webcamTimeOffsetMs.current = webcamStartTime.current === null
? 0
: webcamStartTime.current - mainStartedAt;
setRecording(true);
window.electronAPI?.setRecordingState(true);
@@ -732,8 +747,12 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
recorder.onerror = () => {
setRecording(false);
};
const mainStartedAt = Date.now();
startTime.current = mainStartedAt;
webcamTimeOffsetMs.current = webcamStartTime.current === null
? 0
: webcamStartTime.current - mainStartedAt;
recorder.start(RECORDER_TIMESLICE_MS);
startTime.current = Date.now();
setRecording(true);
window.electronAPI?.setRecordingState(true);
} catch (error) {
@@ -797,6 +816,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
webcamRecorder.current = null;
webcamStream.current?.getTracks().forEach((t) => t.stop());
webcamStream.current = null;
webcamStartTime.current = null;
webcamTimeOffsetMs.current = 0;
pendingWebcamPathPromise.current = null;
if (nativeScreenRecording.current) {