Sasedev/tauri-video01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.2

Browse Source
This commit is contained in:
SinuS von SifriduS
2026-03-30 10:23:29 +02:00
parent 1272f2c44e
commit 966162a934
12 changed files with 295 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/index.html
View File

@@ -9,7 +9,7 @@
<body>
<main class="container">
<h1>POC 1A - Audio Recording</h1>
<h1>POC 1 - Recording</h1>
<section class="card">
<h2>Audio</h2>
@@ -22,6 +22,18 @@
<pre id="audio-status">Ready.</pre>
</section>
<section class="card">
<h2>Video</h2>
<div class="actions">
<button id="start-video-btn" type="button">Start video</button>
<button id="stop-video-btn" type="button" disabled>Stop
video</button>
</div>
<pre id="video-status">Ready.</pre>
</section>
</main>
<script type="module" src="main.ts" defer></script>
</body>

61
frontend/main.ts
View File

@@ -4,23 +4,44 @@ const startAudioBtn = document.querySelector<HTMLButtonElement>("#start-audio-bt
const stopAudioBtn = document.querySelector<HTMLButtonElement>("#stop-audio-btn");
const audioStatus = document.querySelector<HTMLElement>("#audio-status");
if (startAudioBtn === null || stopAudioBtn === null || audioStatus === null) {
const startVideoBtn = document.querySelector<HTMLButtonElement>("#start-video-btn");
const stopVideoBtn = document.querySelector<HTMLButtonElement>("#stop-video-btn");
const videoStatus = document.querySelector<HTMLElement>("#video-status");
if (
startAudioBtn === null ||
stopAudioBtn === null ||
audioStatus === null ||
startVideoBtn === null ||
stopVideoBtn === null ||
videoStatus === null
) {
throw new Error("missing UI elements");
}
function setAudioStatus(message: string): void {
if (audioStatus) {
if (audioStatus)
audioStatus.textContent = message;
}
}
function setAudioButtons(isRecording: boolean): void {
if (startAudioBtn) {
if (startAudioBtn)
startAudioBtn.disabled = isRecording;
}
if (stopAudioBtn) {
if (stopAudioBtn)
stopAudioBtn.disabled = !isRecording;
}
}
function setVideoStatus(message: string): void {
if (videoStatus)
videoStatus.textContent = message;
}
function setVideoButtons(isRecording: boolean): void {
if (startVideoBtn)
startVideoBtn.disabled = isRecording;
if (stopVideoBtn)
stopVideoBtn.disabled = !isRecording;
}
startAudioBtn.addEventListener("click", async () => {
@@ -48,3 +69,29 @@ stopAudioBtn.addEventListener("click", async () => {
setAudioButtons(true);
}
});
startVideoBtn.addEventListener("click", async () => {
startVideoBtn.disabled = true;
try {
const path = await invoke<string>("start_video_recording");
setVideoStatus(`Video recording started.\nOutput: ${path}`);
setVideoButtons(true);
} catch (error) {
setVideoStatus(`Start video failed.\n${String(error)}`);
setVideoButtons(false);
}
});
stopVideoBtn.addEventListener("click", async () => {
stopVideoBtn.disabled = true;
try {
const path = await invoke<string>("stop_video_recording");
setVideoStatus(`Video recording stopped.\nSaved file: ${path}`);
setVideoButtons(false);
} catch (error) {
setVideoStatus(`Stop video failed.\n${String(error)}`);
setVideoButtons(true);
}
});

2
frontend/styles.css
View File

@@ -47,4 +47,4 @@ pre {
border-radius: 8px;
padding: 12px;
white-space: pre-wrap;
}
}