huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Siddharth
2025-10-17 17:06:03 -07:00
parent d43becbf81
commit ec37cd7f11
12 changed files with 530 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useScreenRecorder.ts
+38 -76
View File
@@ -8,19 +8,19 @@ type UseScreenRecorderReturn = {
export function useScreenRecorder(): UseScreenRecorderReturn {
const [recording, setRecording] = useState(false);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const streamRef = useRef<MediaStream | null>(null);
const chunksRef = useRef<Blob[]>([]);
const startTimeRef = useRef<number>(0);
const mediaRecorder = useRef<MediaRecorder | null>(null);
const stream = useRef<MediaStream | null>(null);
const chunks = useRef<Blob[]>([]);
const startTime = useRef<number>(0);
useEffect(() => {
return () => {
if (mediaRecorderRef.current?.state === "recording") {
mediaRecorderRef.current.stop();
if (mediaRecorder.current?.state === "recording") {
mediaRecorder.current.stop();
}
if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop());
streamRef.current = null;
if (stream.current) {
stream.current.getTracks().forEach(track => track.stop());
stream.current = null;
}
};
}, []);
@@ -28,15 +28,12 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const startRecording = async () => {
try {
const selectedSource = await window.electronAPI.getSelectedSource();
if (!selectedSource) {
alert("Please select a source to record");
return;
}
await window.electronAPI.startMouseTracking();
const stream = await (navigator.mediaDevices as any).getUserMedia({
const mediaStream = await (navigator.mediaDevices as any).getUserMedia({
audio: false,
video: {
mandatory: {
@@ -45,113 +42,78 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
},
},
});
streamRef.current = stream;
if (!streamRef.current) {
throw new Error("Failed to get media stream");
stream.current = mediaStream;
if (!stream.current) {
throw new Error("Media stream is not available.");
}
const videoTrack = streamRef.current.getVideoTracks()[0];
const settings = videoTrack.getSettings();
const width = settings.width || 1920;
const height = settings.height || 1080;
const videoTrack = stream.current.getVideoTracks()[0];
const { width = 1920, height = 1080 } = videoTrack.getSettings();
const totalPixels = width * height;
let bitrate: number;
if (totalPixels <= 1920 * 1080) {
bitrate = 150_000_000;
} else if (totalPixels <= 2560 * 1440) {
let bitrate = 150_000_000;
if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
bitrate = 250_000_000;
} else {
} else if (totalPixels > 2560 * 1440) {
bitrate = 400_000_000;
}
chunksRef.current = [];
chunks.current = [];
const mimeType = "video/webm;codecs=vp9";
const recorder = new MediaRecorder(streamRef.current, {
mimeType,
videoBitsPerSecond: bitrate,
});
mediaRecorderRef.current = recorder;
recorder.ondataavailable = (e) => {
if (e.data && e.data.size > 0) {
chunksRef.current.push(e.data);
}
const recorder = new MediaRecorder(stream.current, { mimeType, videoBitsPerSecond: bitrate });
mediaRecorder.current = recorder;
recorder.ondataavailable = e => {
if (e.data && e.data.size > 0) chunks.current.push(e.data);
};
recorder.onstop = async () => {
streamRef.current = null;
if (chunksRef.current.length === 0) return;
const duration = Date.now() - startTimeRef.current;
const buggyBlob = new Blob(chunksRef.current, { type: mimeType });
stream.current = null;
if (chunks.current.length === 0) return;
const duration = Date.now() - startTime.current;
const buggyBlob = new Blob(chunks.current, { type: mimeType });
const timestamp = Date.now();
const videoFileName = `recording-${timestamp}.webm`;
const trackingFileName = `recording-${timestamp}_tracking.json`;
try {
const videoBlob = await fixWebmDuration(buggyBlob, duration);
const arrayBuffer = await videoBlob.arrayBuffer();
const videoResult = await window.electronAPI.storeRecordedVideo(
arrayBuffer,
videoFileName
);
const videoResult = await window.electronAPI.storeRecordedVideo(arrayBuffer, videoFileName);
if (!videoResult.success) {
console.error('Failed to store video:', videoResult.message);
return;
}
const trackingResult = await window.electronAPI.storeMouseTrackingData(trackingFileName);
if (!trackingResult.success) {
console.warn('Failed to store mouse tracking:', trackingResult.message);
}
await window.electronAPI.switchToEditor();
} catch (error) {
console.error('Error saving recording:', error);
}
};
recorder.onerror = () => {
setRecording(false);
};
recorder.onerror = () => setRecording(false);
recorder.start(1000);
startTimeRef.current = Date.now();
startTime.current = Date.now();
setRecording(true);
} catch (error) {
console.error('Failed to start recording:', error);
setRecording(false);
if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop());
streamRef.current = null;
if (stream.current) {
stream.current.getTracks().forEach(track => track.stop());
stream.current = null;
}
}
};
const stopRecording = () => {
if (mediaRecorderRef.current?.state === "recording") {
if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop());
if (mediaRecorder.current?.state === "recording") {
if (stream.current) {
stream.current.getTracks().forEach(track => track.stop());
}
mediaRecorderRef.current.stop();
mediaRecorder.current.stop();
setRecording(false);
window.electronAPI.stopMouseTracking();
}
};
const toggleRecording = () => {
if (!recording) {
startRecording();
} else {
stopRecording();
}
recording ? stopRecording() : startRecording();
};
return { recording, toggleRecording };