emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/combination-of-all-the-things' into 'develop'

Browse Source 
Fixed an error in checkBoxes function and uploadContainer "drop" listener...

See merge request proj-wise2526-video2document/video2document!15
This commit is contained in:
Spanier, Pit
2025-11-12 20:56:11 +01:00
parent af794e0245 94f390f28b
commit 80392874bb
16 changed files with 1670 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+4
View File
@@ -965,3 +965,7 @@ app.*.symbols
#Storage files #Storage files
storage/ storage/
*.mp4
*.wav
*.flac
electron/main/flags/germany-flag-png-large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

electron/main/flags/india-flag-png-large.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

electron/main/flags/united-kingdom-flag-png-large.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

electron/main/index.html
+16 -9
View File
@@ -3,15 +3,22 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Upload Drag and Drop + Button</title> <title id="title">Video to document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="mitte" id="mitte"> <div class="mitte" id="mitte">
<h1>Video to document</h1> <div class="flagsBtns" id="flagsBtns">
<button class="de_Btn" id="de_Btn" onclick="changeLanguage('de')"><img src="flags/germany-flag-png-large.jpg" width="25px" height="20px"/></button>
<button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
<button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
</div>
<h1 id="h1">Video to document</h1>
<div class="upload-container" id="uploadContainer"> <div class="upload-container" id="uploadContainer">
<p>Drag and drop video file</p> <p id="p1">Drag and drop video file</p>
<div class="file-name" id="fileName">No video chosen</div> <div class="file-name" id="fileName">No video chosen</div>
</div> </div>
@@ -19,19 +26,19 @@
<input type="file" id="videoUpload" accept="video/*"> <input type="file" id="videoUpload" accept="video/*">
<div class="checkbox-group"> <div class="checkbox-group">
<label for="checkbox-group">Choose prefered document style:</label> <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" id="docFormat"> <input type="checkbox" name ="docFormat" id="docFormat">
<label for "docFormat">Meeting report</label> <label id="label_format" for="docFormat">Meeting report</label>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" id="docFormatCustom"> <input type="checkbox" name="docFormat" id="docFormatSummary">
<label for "docFormatCustom">Summary with timestamps</label> <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
</div> </div>
</div> </div>
<button class="submit-btn" id="submitButton">Submit Video</button> <button class="submit-btn" id="submitButton" onclick="checkBoxes()">Submit</button>
<div class="progressbar"> <div class="progressbar">
<div class="progress_fill"></div> <div class="progress_fill"></div>
electron/main/preload.js
+13 -2
View File
@@ -2,6 +2,17 @@
const { contextBridge, ipcRenderer, webUtils } = require('electron') const { contextBridge, ipcRenderer, webUtils } = require('electron')
contextBridge.exposeInMainWorld("explorer", { try {
contextBridge.exposeInMainWorld("explorer", {
onFileDrop: (file) => webUtils.getPathForFile(file) onFileDrop: (file) => webUtils.getPathForFile(file)
}) })
contextBridge.exposeInMainWorld("extractor", {
extract: (file) => ipcRenderer.send("extract", file)
})
contextBridge.exposeInMainWorld("electronAPI", {
getFilePath: (file) => {return webUtils.getPathForFile(file)}
})
} catch (error) {
console.log("Error in preload.js");
}
electron/main/renderer.js
+14 -5
View File
@@ -1,22 +1,31 @@
const dropzone = document.getElementById("uploadContainer"); uploadContainer.addEventListener("dragover", (e) =>{
try {
dropzone.addEventListener("dragover", (e) =>{
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} catch (error) {
console.log("Error in renderer.js dragover listener function")
}
}); });
dropzone.addEventListener("drop", (e) => { //listener for when a file get dropped on the drag&drop field
uploadContainer.addEventListener("drop", (e) => {
try {
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
const files = e.dataTransfer.files const files = e.dataTransfer.files
const filePath = window.explorer.onFileDrop(files[0]) const filePath = window.explorer.onFileDrop(files[0])
var holdy = filePath + ""; var holdy = filePath + "";
if(holdy.endsWith(".mp4")){ if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
console.log(filePath) console.log(filePath)
const files1 = e.dataTransfer.files; const files1 = e.dataTransfer.files;
handleFiles(files1); handleFiles(files1);
} }
} catch (error) {
console.log("Error in renderer.js with the listerner for the drop function");
}
}) })
electron/main/script.js
+93 -15
View File
@@ -1,37 +1,115 @@
const uploadContainer = document.getElementById('uploadContainer');
const fileInput = document.getElementById('videoUpload');
const fileName = document.getElementById('fileName');
const manualBtn = document.getElementById('manualUploadBtn');
const videoPreview = document.getElementById('videoPreview');
//listener for the file explorer search
manualUploadBtn.addEventListener('click', () => {
try {
videoUpload.click();
} catch (error) {
console.log("Error in manualBtn EventListener click");
}
manualBtn.addEventListener('click', () => {
fileInput.click();
}); });
//function to check if one checkbox is at least klicked
function checkBoxes() {
try {
const checkboxes = document.querySelectorAll('input[name="docFormat"]');
let isChecked = false;
checkboxes.forEach(function(checkbox){
if(checkbox.checked){
isChecked = true;
}
});
if(isChecked){
//Code to submit the video
var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"})
}
} else {
//language only english at the moment
alert('Please select at least one document type.');
}
} catch (error) {
console.log(error)
}
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
}
//language changing feature
function changeLanguage(language) {
if (language === 'en') {
document.getElementById('title').textContent = 'Video to document';
document.getElementById('h1').textContent = 'Video to document';
document.getElementById('p1').textContent = 'Drag and drop video file';
document.getElementById('fileName').textContent = 'No video chosen';
document.getElementById('manualUploadBtn').textContent = 'Search video';
document.getElementById('checkbox_group').textContent = 'Choose prefered document style:';
document.getElementById('label_format').textContent = 'Meeting report';
document.getElementById('label_summary').textContent = 'Summary with timestamps';
document.getElementById('submitButton').textContent = 'Submit';
} else if (language === 'de') {
document.getElementById('title').textContent = 'Video zu Dokument';
document.getElementById('h1').textContent = 'Video zu Dokument';
document.getElementById('p1').textContent = 'Video per Drag & Drop ablegen';
document.getElementById('fileName').textContent = 'Kein Video ausgewaehlt';
document.getElementById('manualUploadBtn').textContent = 'Video suchen';
document.getElementById('checkbox_group').textContent = 'Bevorzugte Dokumentvarianten:';
document.getElementById('label_format').textContent = 'Meeting Bericht';
document.getElementById('label_summary').textContent = 'Zusammenfassung mit Zeitstempeln';
document.getElementById('submitButton').textContent = 'Absenden';
} else if(language == "in") {
document.getElementById('title').textContent = 'दस्तावेज़ के लिए वीडियो';
document.getElementById('h1').textContent = 'दस्तावेज़ के लिए वीडियो';
document.getElementById('p1').textContent = 'वीडियो फ़ाइल खींचें और छोड़ें';
document.getElementById('fileName').textContent = 'कोई वीडियो नहीं चुना गया';
document.getElementById('manualUploadBtn').textContent = 'वीडियो खोजें';
document.getElementById('checkbox_group').textContent = 'पसंदीदा दस्तावेज़ शैली चुनें:';
document.getElementById('label_format').textContent = 'बैठक रिपोर्ट';
document.getElementById('label_summary').textContent = 'टाइमस्टैम्प के साथ सारांश';
document.getElementById('submitButton').textContent = 'जमा करना';
}
}
//listener for the file explorer search when something got selected
videoUpload.addEventListener('change', () => {
try {
handleFiles(videoUpload.files);
} catch (error) {
console.log("Error in manualBtn EventListener change");
}
fileInput.addEventListener('change', () => {
handleFiles(fileInput.files);
}); });
//function to display the file path in the drop down box
function handleFiles(files) { function handleFiles(files) {
try {
if (files.length > 0) { if (files.length > 0) {
const file = files[0]; const file = files[0];
if (file.type.startsWith('video/')) { if (file.type.startsWith('video/')) {
fileInput.files = files; videoUpload.files = files;
fileName.textContent = `Chosen video: ${file.name}`; fileName.textContent = `Chosen video: ${file.name}`;
} }
} }
} catch (error) {
console.log("Error in script.js handleFiles function");
}
} }
//function to regulate the progress on the progressbar
function updateProgressBar(bar, value){ function updateProgressBar(bar, value){
try {
value = Math.round(value); value = Math.round(value);
bar.querySelector(".progress_fill").style.width = `${value}%`; bar.querySelector(".progress_fill").style.width = `${value}%`;
bar.querySelector(".progress_text").textContent = `${value}%`; bar.querySelector(".progress_text").textContent = `${value}%`;
} catch (error) {
console.log("Error in scripts.js updateProgressBar function");
}
} }
electron/main/style.css
+19 -4
View File
@@ -5,7 +5,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #444; background-color: #555;
gap: 15px; gap: 15px;
margin: 0; margin: 0;
} }
@@ -75,6 +75,7 @@ gap: 5px;
.checkbox-group { .checkbox-group {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -92,14 +93,14 @@ gap: 5px;
} }
.mitte { .mitte {
background-color: #eaf0ff; background-color: #f2f3f4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 5% 50px; padding: 5% 50px;
margin-top: 20px; margin-top: 20px;
gap: 10px; gap: 10px;
border: 2px; border: 1px;
border-color: black; border-color: black;
border-style: solid; border-style: solid;
} }
@@ -112,7 +113,7 @@ h1 {
position: relative; position: relative;
width: 210px; width: 210px;
height: 30px; height: 30px;
background: darkslategray; background: rgb(42, 46, 78);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
@@ -129,4 +130,18 @@ h1 {
top: 50%; top: 50%;
right: 5px; right: 5px;
transform: translateY(-50%); transform: translateY(-50%);
color: white;
}
.flagsBtns {
display: flex;
justify-content: flex-end;
}
.de_Btn, .eng_Btn, .in_Btn {
padding: 8px 16px;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
} }
main.js
+22 -1
View File
@@ -55,4 +55,25 @@ rl.on("line", data =>{
// ----------------------------------------------------------- ELECTRON ----------------------------------------------------------- // // ----------------------------------------------------------- ELECTRON ----------------------------------------------------------- //
// TODO - Add Electron support to the project let mainWindow;
function createWindow() {
mainWindow = new electron.BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: `${mainDir}/electron/main/preload.js`
}
});
mainWindow.loadFile('./electron/main/index.html');
}
electron.app.whenReady().then(createWindow);
electron.ipcMain.on("extract", (event, args) => {
mapFunctions.get("extraction-video-to-audio").function(args)
})
package-lock.json
Generated
+1355 -5
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -5
View File
@@ -1,10 +1,10 @@
{ {
"type": "module",
"dependencies": { "dependencies": {
"cli-progress": "^3.12.0", "cli-progress": "^3.12.0",
"electron": "^39.1.1",
"express": "^5.1.0",
"ffmpeg-static": "^5.2.0", "ffmpeg-static": "^5.2.0",
"fluent-ffmpeg": "^2.1.3", "fluent-ffmpeg": "^2.1.3"
"express": "^5.1.0"
}, },
"devDependencies": { "devDependencies": {
"@types/cli-progress": "^3.11.6", "@types/cli-progress": "^3.11.6",
@@ -22,6 +22,7 @@
"test": "tests" "test": "tests"
}, },
"scripts": { "scripts": {
"start": "electron main.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
@@ -31,5 +32,3 @@
"author": "", "author": "",
"license": "ISC" "license": "ISC"
} }
requires.js
+8
View File
@@ -8,3 +8,11 @@ fs = require("fs")
readline = require("readline") readline = require("readline")
config = require("./config/config") config = require("./config/config")
ffmpegPath = require('ffmpeg-static');
ffmpeg = require('fluent-ffmpeg');
path = require('path');
cliProgress = require('cli-progress');
// { app, BrowserWindow, ipcMain, dialog } = require('electron');
electron = require('electron');
services/modules/extraction/ffmpegExtractor.js
+93
View File
@@ -0,0 +1,93 @@
// Ensure ffmpeg binary is available
if (!ffmpegPath) {
throw new Error('FFmpeg binary not found!');
}
ffmpeg.setFfmpegPath(ffmpegPath);
// Prepare output directory (always storage/audio under project root)
const outputDir = `${__dirname}/../../../storage/audio`;
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
module.exports = {
name:"extraction-video-to-audio", // Unique name for our function that will later be used to get the function from the map via "mapFunctions.get("example").function()"
type:"extractor", // value used to differentiate each module to order them in the UI
displayname:"Default extractor", // The displayname used within the UI
async function(parameter){
/*
parameter structure:
{
inputVideoPath: String, // Path to the file
outputType: String // Audio file output format
}
*/
let progressBar = new cliProgress.SingleBar({
format: 'Processing |{bar}| {percentage}% | {timemark}',
barCompleteChar: '\u2588',
barIncompleteChar: '\u2591',
hideCursor: true
});
try {
// if (meta.url === `file://${process.argv[1]}`) {
this.extractAudioFromVideo(parameter.inputVideoPath, progressBar, parameter.outputType)
.then(() => console.log('Audio extraction successful.'))
.catch((err) => console.error(err));
// }
} catch (error) {
console.log(parameter.outputType);
}
},
// Derive input and output paths
// const inputVideoPath = process.argv[2];
// console.log(process.argv);
/**
* Extracts audio from a video using ffmpeg.
* - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
* - Shows CLI progress bar
* - Handles errors gracefully (without errors)
*/
extractAudioFromVideo: async function (videoFilePath, progressBar, outputType){
let inputVideoName = path.basename(videoFilePath, path.extname(videoFilePath));
let outputAudioPath = path.join(outputDir, `${inputVideoName}.${outputType}`);
return new Promise((resolve, reject) => {
try {
ffmpeg(videoFilePath)
.outputFormat(outputType)
// .audioCodec('pcm_s16le')
.audioChannels(1)
.audioFrequency(16000)
// .setFfmpegPath("./ffmpeg.exe")
.on('progress', (progress) => {
if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
if (progress.percent) {
progressBar.update(progress.percent, { timemark: progress.timemark });
}
})
.on('end', () => {
progressBar.update(100, { timemark: 'done' });
progressBar.stop();
console.log(`Extraction completed: ${outputAudioPath}`);
resolve();
})
.on('error', (err) => {
progressBar.stop();
console.error(`failed_audio_extraction on type ${outputType}: ${err.message}`);
reject(err);
})
.save(outputAudioPath);
} catch (error) {
console.log();
}
});
}
}
services/modules/extraction/ffmpegExtractor.ts
-90
View File
@@ -1,90 +0,0 @@
import ffmpegPath from 'ffmpeg-static';
import ffmpeg from 'fluent-ffmpeg';
import path from 'path';
import fs from 'fs';
import cliProgress from 'cli-progress';
import { fileURLToPath } from 'url';
// Base code reference: https://docs.yemreak.com/arsiv/programming/extract-audio-from-video-with-typescript-and-ffmpeg
// Test command: npx ts-node ./extract.ts /path/to/video.mp4
/**
* Extracts audio from a video file and saves it as WAV.
* @param videoFilePath Path to the input video file.
*/
// Ensure ffmpeg binary is available
if (!ffmpegPath) {
throw new Error('FFmpeg binary not found!');
}
ffmpeg.setFfmpegPath(ffmpegPath);
// Ensure an input video path is provided via CLI
if (process.argv.length < 3) {
console.error('Usage: ts-node ./extract.ts <input-video-path>');
process.exit(1);
}
// Resolve __dirname equivalent in ESM
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Prepare output directory (always storage/audio under project root)
const outputDir = path.join(__dirname, '..', '..', '..', 'storage', 'audio');
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
// Derive input and output paths
const inputVideoPath = process.argv[2];
const inputVideoName = path.basename(inputVideoPath, path.extname(inputVideoPath));
const outputAudioPath = path.join(outputDir, `${inputVideoName}.wav`);
// Initialize CLI progress bar
const progressBar = new cliProgress.SingleBar({
format: 'Processing |{bar}| {percentage}% | {timemark}',
barCompleteChar: '\u2588',
barIncompleteChar: '\u2591',
hideCursor: true
});
/**
* Extracts audio from a video using ffmpeg.
* - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
* - Shows CLI progress bar
* - Handles errors gracefully (without errors)
*/
export function extractAudioFromVideo(videoFilePath: string): Promise<void> {
return new Promise((resolve, reject) => {
ffmpeg(videoFilePath)
.outputFormat('wav')
.audioCodec('pcm_s16le')
.audioChannels(1)
.audioFrequency(16000)
.on('progress', (progress) => {
if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
if (progress.percent) {
progressBar.update(progress.percent, { timemark: progress.timemark });
}
})
.on('end', () => {
progressBar.update(100, { timemark: 'done' });
progressBar.stop();
console.log(`Extraction completed: ${outputAudioPath}`);
resolve();
})
.on('error', (err) => {
progressBar.stop();
console.error(`failed_audio_extraction: ${err.message}`);
reject(err);
})
.save(outputAudioPath);
});
}
// Run extraction if executed directly from CLI
if (import.meta.url === `file://${process.argv[1]}`) {
extractAudioFromVideo(inputVideoPath)
.then(() => console.log('Audio extraction successful.'))
.catch((err) => console.error(err));
}
services/modules/utility/@startup.js
+4
View File
@@ -5,5 +5,9 @@ module.exports = {
// We are now calling the example function from the example folder // We are now calling the example function from the example folder
mapFunctions.get("example").function("Startup") mapFunctions.get("example").function("Startup")
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"wav"})
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"flac"})
} }
} }