From a08eff4abbcdb1ae78b4b27f0171c4046486219c Mon Sep 17 00:00:00 2001 From: Michael Date: Fri, 3 Jun 2022 12:25:31 -0400 Subject: ffmpeg testing --- src/server/DashUploadUtils.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 552ab57a5..0c4f87905 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -17,9 +17,11 @@ import { resolvedServerUrl } from "./server_Initialization"; import { AcceptableMedia, Upload } from './SharedMediaTypes'; import request = require('request-promise'); import formidable = require('formidable'); +import { output } from '../../webpack.config'; const { exec } = require("child_process"); const parse = require('pdf-parse'); const ffmpeg = require("fluent-ffmpeg"); +const fs = require("fs"); const requestImageSize = require("../client/util/request-image-size"); export enum SizeSuffix { @@ -60,6 +62,21 @@ export namespace DashUploadUtils { const type = "content-type"; const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; //TODO:glr + + export async function combineSegments(filePtr: File[], inputPaths: string[]): Promise { + const inputListName = 'order.txt'; + + return new Promise((resolve, reject) => { + fs.writeFileSync(inputListName, inputPaths.join('\n')); + ffmpeg(inputListName).inputOptions(['-f concat', '-safe 0']).outputOptions('-c copy').save('output.mp4') + .on("error", reject) + .on("end", () => { + fs.unlinkSync(inputListName); + filePtr[0].path = 'output.mp4'; + resolve(filePtr[0]); + }); + }); + } export function uploadYoutube(videoId: string): Promise { console.log("UPLOAD " + videoId); -- cgit v1.2.3-70-g09d2 From c656abad84ac56c3067a48ca6d34d567e3fcdd88 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 8 Jun 2022 00:05:34 -0400 Subject: Took stab at ffmpeg in server. did some reworking of recordingview css. fix smoothness bug for the moving segment that follow cursor. --- src/client/Network.ts | 15 +++++++- .../views/nodes/RecordingBox/ProgressBar.scss | 33 +++++++++++++++--- .../views/nodes/RecordingBox/ProgressBar.tsx | 9 ++--- .../views/nodes/RecordingBox/RecordingBox.tsx | 4 +-- .../views/nodes/RecordingBox/RecordingView.scss | 29 ++++++++++------ .../views/nodes/RecordingBox/RecordingView.tsx | 23 +++++++++---- src/server/ApiManagers/UploadManager.ts | 28 +++++++++++++-- src/server/DashUploadUtils.ts | 40 ++++++++++++++-------- 8 files changed, 136 insertions(+), 45 deletions(-) (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/client/Network.ts b/src/client/Network.ts index 1255e5ce0..2c6d9d711 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -19,7 +19,6 @@ export namespace Networking { } export async function UploadFilesToServer(files: File | File[]): Promise[]> { - console.log(files) const formData = new FormData(); if (Array.isArray(files)) { if (!files.length) { @@ -36,6 +35,19 @@ export namespace Networking { const response = await fetch("/uploadFormData", parameters); return response.json(); } + + export async function UploadSegmentsAndConcatenate(files: File | File[]): Promise[]> { + console.log(files) + const formData = new FormData(); + if (!Array.isArray(files) || !files.length) return []; + files.forEach(file => formData.append(Utils.GenerateGuid(), file)); + const parameters = { + method: 'POST', + body: formData + }; + const response = await fetch("/uploadVideosandConcatenate", parameters); + return response.json(); + } export async function UploadYoutubeToServer(videoId: string): Promise[]> { const parameters = { @@ -46,5 +58,6 @@ export namespace Networking { const response = await fetch("/uploadYoutubeVideo", parameters); return response.json(); } + } \ No newline at end of file diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss index 67f96033a..d387468c6 100644 --- a/src/client/views/nodes/RecordingBox/ProgressBar.scss +++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss @@ -1,13 +1,17 @@ .progressbar { touch-action: none; + vertical-align: middle; + text-align: center; + + align-items: center; position: absolute; display: flex; justify-content: flex-start; - bottom: 10px; - width: 80%; + bottom: 2px; + width: 99%; height: 30px; background-color: gray; @@ -34,11 +38,24 @@ margin: 1px; padding: 0; cursor: pointer; - transition-duration: .25s; + transition-duration: .5s; + user-select: none; + vertical-align: middle; text-align: center; } +.segment-hide { + background-color: inherit; + text-align: center; + vertical-align: middle; + user-select: none; + // /* Hide the text. */ + // text-indent: 100%; + // white-space: nowrap; + // overflow: hidden; +} + .segment:first-child { margin-left: 2px; } @@ -47,9 +64,17 @@ } .segment:hover { + background-color: white; +} + +.segment:hover, .segment-selected { margin: 0px; border: 4px solid red; - background-color: black; min-width: 10px; border-radius: 2px; } + +.segment-selected { + border: 4px solid grey; + background-color: red; +} diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx index b17d27d2e..34a771367 100644 --- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx +++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx @@ -27,7 +27,7 @@ export function ProgressBar(props: ProgressBarProps) { useEffect(() => { const segmentsJSX = ordered.map((vid, i) => -
{vid.order}
); +
{vid.order}
); setSegments(segmentsJSX) }, [clicked, ordered]) @@ -98,7 +98,8 @@ export function ProgressBar(props: ProgressBarProps) { // clickedSegment.style.backgroundColor = `inherit`; const dot = document.createElement("div") - dot.classList.add("segment") + dot.classList.add("segment-selected") + dot.style.transitionDuration = '0s'; dot.style.position = 'absolute'; dot.style.zIndex = '999'; dot.style.width = `${rect.width}px`; @@ -106,8 +107,8 @@ export function ProgressBar(props: ProgressBarProps) { document.body.append(dot) const dragSegment = (event: PointerEvent): void => { // event.stopPropagation() - dot.style.left = `${event.clientX - rect.width/2}px`; - dot.style.top = `${event.clientY - rect.height/2}px`; + dot.style.left = `${event.clientX - rect.width/2}px`; + dot.style.top = `${event.clientY - rect.height/2}px`; } const updateSegmentOrder = (event: PointerEvent): void => { diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 159271223..68f3b3ad4 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -54,9 +54,9 @@ export class RecordingBox extends ViewBoxBaseComponent() { } render() { - // console.log("Proto[Is]: ", this.rootDoc.proto?.[Id]) + console.log("Proto[Is]: ", this.rootDoc.proto?.[Id]) return
- {!this.result && } + {!this.result && }
; } } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss index 9b2f6d070..0b7b1918f 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.scss +++ b/src/client/views/nodes/RecordingBox/RecordingView.scss @@ -33,7 +33,7 @@ button { } .video-wrapper:hover .controls { - bottom: 30px; + bottom: 34.5px; transform: translateY(0%); opacity: 100%; } @@ -43,8 +43,8 @@ button { align-items: center; justify-content: space-evenly; position: absolute; - padding: 14px; - width: 100%; + // padding: 14px; + //width: 100%; max-width: 500px; // max-height: 20%; flex-wrap: wrap; @@ -56,7 +56,14 @@ button { // transform: translateY(150%); transition: all 0.3s ease-in-out; // opacity: 0%; - bottom: 30px; + bottom: 34.5px; + height: 60px; + right: 2px; + // bottom: -150px; +} + +.controls:active { + bottom: 40px; // bottom: -150px; } @@ -127,9 +134,8 @@ button { .controls-inner-container { display: flex; flex-direction: row; - justify-content: center; - width: 100%; - + align-content: center; + position: relative; } .record-button-wrapper { @@ -180,14 +186,14 @@ button { height: 100%; display: flex; flex-direction: row; - align-items: center; - position: absolute; + align-content: center; + position: relative; top: 0; bottom: 0; &.video-edit-wrapper { - right: 50% - 15; + // right: 50% - 15; .track-screen { font-weight: 200; @@ -197,10 +203,11 @@ button { &.track-screen-wrapper { - right: 50% - 30; + // right: 50% - 30; .track-screen { font-weight: 200; + color: aqua; } } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 640e4f5f2..1e9ce22f1 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -71,13 +71,21 @@ export function RecordingView(props: IRecordingViewProps) { inputPaths.push(name) }); - console.log(videoFiles) + console.log(videoFiles) + + const data = await Networking.UploadSegmentsAndConcatenate(videoFiles) + console.log('data', data) + const result = data[0].result + if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox + props.setResult(result, trackScreen) + } else { + alert("video conversion failed"); + } // const inputListName = 'order.txt'; // fs.writeFileSync(inputListName, inputPaths.join('\n')); - // var merge = ffmpeg(); // merge.input(inputListName) // .inputOptions(['-f concat', '-safe 0']) @@ -345,16 +353,17 @@ export function RecordingView(props: IRecordingViewProps) { Track Screen - )} - - + )} - + + + + - ) } \ No newline at end of file diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 634548154..faf36c6e5 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -40,7 +40,31 @@ export function clientPathToFile(directory: Directory, filename: string) { export default class UploadManager extends ApiManager { - protected initialize(register: Registration): void { + protected initialize(register: Registration): void { + + register({ + method: Method.POST, + subscription: "/uploadVideosAndConcatenate", + secureHandler: async ({ req, res }) => { + const form = new formidable.IncomingForm(); + form.keepExtensions = true; + form.uploadDir = pathToDirectory(Directory.parsed_files); + return new Promise(resolve => { + form.parse(req, async (_err, _fields, files) => { + const result: Upload.FileResponse[] = []; + for (const key in files) { + const f = files[key]; + if (Array.isArray(f)) { + const result = await DashUploadUtils.concatenateVideos(f); + console.log('concatenated', result); + result && !(result.result instanceof Error) && _success(res, result); + } + } + resolve(); + }); + }); + } + }); register({ method: Method.POST, @@ -50,7 +74,7 @@ export default class UploadManager extends ApiManager { form.keepExtensions = true; form.uploadDir = pathToDirectory(Directory.parsed_files); return new Promise(resolve => { - form.parse(req, async (_err, _fields, files) => { + form.parse(req, async (_err, _fields, files) => { const results: Upload.FileResponse[] = []; for (const key in files) { const f = files[key]; diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 0c4f87905..6a7c8543d 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -1,9 +1,9 @@ import { green, red } from 'colors'; import { ExifImage } from 'exif'; +import * as exifr from 'exifr'; import { File } from 'formidable'; import { createWriteStream, existsSync, readFileSync, rename, unlinkSync, writeFile } from 'fs'; import * as path from 'path'; -import * as exifr from 'exifr'; import { basename } from "path"; import * as sharp from 'sharp'; import { Stream } from 'stream'; @@ -17,7 +17,6 @@ import { resolvedServerUrl } from "./server_Initialization"; import { AcceptableMedia, Upload } from './SharedMediaTypes'; import request = require('request-promise'); import formidable = require('formidable'); -import { output } from '../../webpack.config'; const { exec } = require("child_process"); const parse = require('pdf-parse'); const ffmpeg = require("fluent-ffmpeg"); @@ -63,19 +62,31 @@ export namespace DashUploadUtils { const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; //TODO:glr - export async function combineSegments(filePtr: File[], inputPaths: string[]): Promise { - const inputListName = 'order.txt'; - - return new Promise((resolve, reject) => { - fs.writeFileSync(inputListName, inputPaths.join('\n')); - ffmpeg(inputListName).inputOptions(['-f concat', '-safe 0']).outputOptions('-c copy').save('output.mp4') + export async function concatenateVideos(videoFiles: File[]): Promise { + // make a list of paths to create the ordered text file for ffmpeg + const filePaths = videoFiles.map(file => file.path); + // write the text file to the file system + const inputListName = 'concat.txt'; + const textFilePath = path.join(filesDirectory, "concat.txt"); + writeFile(textFilePath, filePaths.join("\n"), (err) => console.log(err)); + + + // make output file name based on timestamp + const outputFileName = `output-${Utils.GenerateGuid()}.mp4`; + await new Promise((resolve, reject) => { + ffmpeg(inputListName).inputOptions(['-f concat', '-safe 0']).outputOptions('-c copy').save(outputFileName) .on("error", reject) - .on("end", () => { - fs.unlinkSync(inputListName); - filePtr[0].path = 'output.mp4'; - resolve(filePtr[0]); - }); - }); + .on("end", resolve); + }) + + // delete concat.txt from the file system + unlinkSync(textFilePath); + + // read the output file from the file system + const outputFile = fs.readFileSync(outputFileName); + console.log('outputFile', outputFile); + // move only the output file to the videos directory + return MoveParsedFile(outputFile, Directory.videos) } export function uploadYoutube(videoId: string): Promise { @@ -237,6 +248,7 @@ export namespace DashUploadUtils { } let resolvedUrl: string; /** + * * At this point, we want to take whatever url we have and make sure it's requestable. * Anything that's hosted by some other website already is, but if the url is a local file url * (locates the file on this server machine), we have to resolve the client side url by cutting out the -- cgit v1.2.3-70-g09d2 From d570ab0d8ea08363c651caf8ee67c43c5a5823a3 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 8 Jun 2022 02:49:39 -0400 Subject: got it to run, but not concatenating - only first video --- src/client/Network.ts | 4 +- .../views/nodes/RecordingBox/ProgressBar.scss | 1 - .../views/nodes/RecordingBox/RecordingView.tsx | 2 +- src/server/ApiManagers/UploadManager.ts | 20 +++---- src/server/DashUploadUtils.ts | 67 ++++++++++++++++++---- 5 files changed, 69 insertions(+), 25 deletions(-) (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/client/Network.ts b/src/client/Network.ts index 2c6d9d711..8c1f31488 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -36,8 +36,8 @@ export namespace Networking { return response.json(); } - export async function UploadSegmentsAndConcatenate(files: File | File[]): Promise[]> { - console.log(files) + export async function UploadSegmentsAndConcatenate(files: File[]): Promise[]> { + console.log("network.ts : uploading segments and concatenating", files); const formData = new FormData(); if (!Array.isArray(files) || !files.length) return []; files.forEach(file => formData.append(Utils.GenerateGuid(), file)); diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss index d387468c6..c7a190566 100644 --- a/src/client/views/nodes/RecordingBox/ProgressBar.scss +++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss @@ -70,7 +70,6 @@ .segment:hover, .segment-selected { margin: 0px; border: 4px solid red; - min-width: 10px; border-radius: 2px; } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 1e9ce22f1..aea7f56b5 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -69,7 +69,7 @@ export function RecordingView(props: IRecordingViewProps) { const { name } = videoFile; inputPaths.push(name) - }); + }) console.log(videoFiles) diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index faf36c6e5..398b007b5 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -44,22 +44,22 @@ export default class UploadManager extends ApiManager { register({ method: Method.POST, - subscription: "/uploadVideosAndConcatenate", + subscription: "/uploadVideosandConcatenate", secureHandler: async ({ req, res }) => { const form = new formidable.IncomingForm(); form.keepExtensions = true; form.uploadDir = pathToDirectory(Directory.parsed_files); return new Promise(resolve => { form.parse(req, async (_err, _fields, files) => { - const result: Upload.FileResponse[] = []; - for (const key in files) { - const f = files[key]; - if (Array.isArray(f)) { - const result = await DashUploadUtils.concatenateVideos(f); - console.log('concatenated', result); - result && !(result.result instanceof Error) && _success(res, result); - } - } + const results: Upload.FileResponse[] = []; + + // create an array of all the file paths + const filePaths: string[] = Object.keys(files).map(key => files[key].path); + console.log("uploading files", Array.isArray(filePaths)); + const result = await DashUploadUtils.concatenateVideos(filePaths); + console.log('concatenated', result); + result && !(result.result instanceof Error) && results.push(result); + _success(res, results) resolve(); }); }); diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 6a7c8543d..148b0df65 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -17,6 +17,7 @@ import { resolvedServerUrl } from "./server_Initialization"; import { AcceptableMedia, Upload } from './SharedMediaTypes'; import request = require('request-promise'); import formidable = require('formidable'); +import { file } from 'jszip'; const { exec } = require("child_process"); const parse = require('pdf-parse'); const ffmpeg = require("fluent-ffmpeg"); @@ -62,19 +63,31 @@ export namespace DashUploadUtils { const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; //TODO:glr - export async function concatenateVideos(videoFiles: File[]): Promise { + export async function concatenateVideos(filePaths: string[]): Promise { // make a list of paths to create the ordered text file for ffmpeg - const filePaths = videoFiles.map(file => file.path); + //const filePaths = videoFiles.map(file => file.path); // write the text file to the file system const inputListName = 'concat.txt'; - const textFilePath = path.join(filesDirectory, "concat.txt"); - writeFile(textFilePath, filePaths.join("\n"), (err) => console.log(err)); - + const textFilePath = path.join(filesDirectory, inputListName); + // make a list of paths to create the ordered text file for ffmpeg + const filePathsText = filePaths.map(filePath => `file '${filePath}'`).join('\n'); + writeFile(textFilePath, filePathsText, (err) => console.log(err)); + console.log(filePathsText) // make output file name based on timestamp - const outputFileName = `output-${Utils.GenerateGuid()}.mp4`; + const outputFileName = `output-${Utils.GenerateGuid()}.mkv`; + // create the output file path in the parsed_file directory + const outputFilePath = path.join(filesDirectory, outputFileName); + + // concatenate the videos await new Promise((resolve, reject) => { - ffmpeg(inputListName).inputOptions(['-f concat', '-safe 0']).outputOptions('-c copy').save(outputFileName) + console.log('concatenating videos'); + var merge = ffmpeg(); + merge.input(textFilePath) + .inputOptions(['-f concat', '-safe 0']) + .outputOptions('-c copy') + //.videoCodec("copy") + .save(outputFilePath) .on("error", reject) .on("end", resolve); }) @@ -83,10 +96,41 @@ export namespace DashUploadUtils { unlinkSync(textFilePath); // read the output file from the file system - const outputFile = fs.readFileSync(outputFileName); - console.log('outputFile', outputFile); - // move only the output file to the videos directory - return MoveParsedFile(outputFile, Directory.videos) + // const outputFile = fs.readFileSync(outputFilePath); + + // make a new blob object with the output file buffer + // const outputFileBlob = new Blob([outputFile.buffer], { type: 'x-matroska/mkv' }); + + // TODO: make with toJSON() + + // make a data object + const outputFileObject: formidable.File = { + size: 0, + name: outputFileName, + path: outputFilePath, + // size: outputFileBlob.size, + type: 'video/x-matroska;codecs=avc1,opus', + lastModifiedDate: new Date(), + + toJSON: () => ({ ...outputFileObject, filename: outputFilePath.replace(/.*\//, ""), mtime: null, length: 0, mime: "", toJson: () => undefined as any }) + } + + // const file = { ...outputFileObject, toJSON: () => ({ ...outputFileObject, filename: outputFilePath.replace(/.*\//, ""), mtime: null, length: 0, mime: "", toJson: () => undefined as any }) }; + + // this will convert it to mp4 and save it to the server + //return await MoveParsedFile(outputFileObject, Directory.videos); + + return await upload(outputFileObject); + + // // return only the output (first) file to the videos directory + // return { + // source: file, result: { + // accessPaths: { + // agnostic: getAccessPaths(Directory.videos, outputFileName) + // }, + // rawText: undefined + // } + // } } export function uploadYoutube(videoId: string): Promise { @@ -122,6 +166,7 @@ export namespace DashUploadUtils { } case "video": if (format.includes("x-matroska")) { + console.log("case video"); await new Promise(res => ffmpeg(file.path) .videoCodec("copy") // this will copy the data instead of reencode it .save(file.path.replace(".mkv", ".mp4")) -- cgit v1.2.3-70-g09d2 From 48c60bd982734676f972514f7074be6121e7c5df Mon Sep 17 00:00:00 2001 From: Michael Date: Wed, 8 Jun 2022 18:24:53 -0400 Subject: big commit. FINALLY got the combining segments to work using ffmpeg using a different workflow. small ui changes as well. --- src/client/Network.ts | 15 +-- .../views/nodes/RecordingBox/ProgressBar.tsx | 20 +++- .../views/nodes/RecordingBox/RecordingBox.tsx | 7 +- .../views/nodes/RecordingBox/RecordingView.tsx | 126 ++++----------------- src/server/ApiManagers/UploadManager.ts | 23 +--- src/server/DashUploadUtils.ts | 59 +++------- 6 files changed, 60 insertions(+), 190 deletions(-) (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/client/Network.ts b/src/client/Network.ts index 8c1f31488..b26f2458d 100644 --- a/src/client/Network.ts +++ b/src/client/Network.ts @@ -35,20 +35,7 @@ export namespace Networking { const response = await fetch("/uploadFormData", parameters); return response.json(); } - - export async function UploadSegmentsAndConcatenate(files: File[]): Promise[]> { - console.log("network.ts : uploading segments and concatenating", files); - const formData = new FormData(); - if (!Array.isArray(files) || !files.length) return []; - files.forEach(file => formData.append(Utils.GenerateGuid(), file)); - const parameters = { - method: 'POST', - body: formData - }; - const response = await fetch("/uploadVideosandConcatenate", parameters); - return response.json(); - } - + export async function UploadYoutubeToServer(videoId: string): Promise[]> { const parameters = { method: 'POST', diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx index a91656cbc..effc3d8a8 100644 --- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx +++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx @@ -53,11 +53,6 @@ export function ProgressBar(props: ProgressBarProps) { return [...prevOrdered, { endTime, startTime , order }]; }); } - // }props.videos.map((vid, order) => { - // //const { endTime, startTime } = vid - // // TODO: not tranfer the blobs around - // return { ...vid, order }; - // })) }, [props.videos]); useEffect(() => { @@ -96,7 +91,6 @@ export function ProgressBar(props: ProgressBarProps) { } const onPointerDown = (e: React.PointerEvent) => { - console.log('pointer down') // don't move the videobox element e.stopPropagation() @@ -107,6 +101,20 @@ export function ProgressBar(props: ProgressBarProps) { // don't do anything if null const progressBar = progressBarRef.current if (progressBar == null || clickedSegment.id === progressBar.id) return + + console.log('pointer down') + // if holding shift key, let's remove that segment + if (e.shiftKey) { + // TODO: fix this + const segId = parseInt(clickedSegment.id.split('-')[1]) + const o = ordered[segId].order + setOrdered(prevOrdered => { + return prevOrdered.filter((seg, i) => i !== segId) + }) + + return + } + const ptrId = e.pointerId; progressBar.setPointerCapture(ptrId) diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 68f3b3ad4..bd4af0a75 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -30,7 +30,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { Doc.SetNativeHeight(this.dataDoc, 720); } - @observable result: Upload.FileInformation | undefined = undefined + @observable result: Upload.AccessPathInfo | undefined = undefined @observable videoDuration: number | undefined = undefined @action @@ -39,13 +39,14 @@ export class RecordingBox extends ViewBoxBaseComponent() { } @action - setResult = (info: Upload.FileInformation, trackScreen: boolean) => { + setResult = (info: Upload.AccessPathInfo, trackScreen: boolean) => { + if (info == null) return this.result = info this.dataDoc.type = DocumentType.VID; this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration; this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey); - this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client); + this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client); this.dataDoc[this.fieldKey + "-recorded"] = true; // stringify the presenation and store it if (trackScreen) { diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index a5c2dc85c..8c8728fc3 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -18,7 +18,7 @@ export interface MediaSegment { } interface IRecordingViewProps { - setResult: (info: Upload.FileInformation, trackScreen: boolean) => void + setResult: (info: Upload.AccessPathInfo, trackScreen: boolean) => void setDuration: (seconds: number) => void id: string } @@ -57,7 +57,7 @@ export function RecordingView(props: IRecordingViewProps) { useEffect(() => { - console.log('in videos useEffect') + // console.log('in videos useEffect', finished) if (finished) { (async () => { @@ -71,89 +71,18 @@ export function RecordingView(props: IRecordingViewProps) { const { name } = videoFile; inputPaths.push(name) }) - - console.log(inputPaths) - const data = await Networking.UploadSegmentsAndConcatenate(videoFiles) - console.log('data', data) - const result = data[0].result - if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox - props.setResult(result, trackScreen) - } else { - alert("video conversion failed"); - } - - + const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles)) + .map(res => (res.result instanceof Error) ? '' : res.result.accessPaths.agnostic.server) - // const inputListName = 'order.txt'; - // fs.writeFileSync(inputListName, inputPaths.join('\n')); - // var merge = ffmpeg(); - // merge.input(inputListName) - // .inputOptions(['-f concat', '-safe 0']) - // .outputOptions('-c copy') - // .save('output.mp4') - - // fs.unlinkSync(inputListName); - - // const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths) - // console.log('combined', combined) - - // const outputFile = new File(['output.mp4'], 'output.mp4', { type: 'video/mp4', lastModified: Date.now() }); - - // const data = await Networking.UploadFilesToServer(combined) - // const result = data[0].result - // if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox - // props.setResult(result, trackScreen) - // } else { - // alert("video conversion failed"); - // } - - - // if (format.includes("x-matroska")) { - // await new Promise(res => ffmpeg(file.path) - // .videoCodec("copy") // this will copy the data instead of reencode it - // .save(file.path.replace(".mkv", ".mp4")) - // .on('end', res)); - // file.path = file.path.replace(".mkv", ".mp4"); - // format = ".mp4"; - // } - // console.log('crossOriginIsolated', crossOriginIsolated) - // props.setDuration(recordingTimer * 100) - - // console.log('Loading ffmpeg-core.js'); - // const ffmpeg = createFFmpeg({ log: true }); - // await ffmpeg.load(); - // console.log('ffmpeg-core.js loaded'); - - // let allVideoChunks: any = []; - // const inputPaths: string[] = []; - // // write each segment into it's indexed file - // videos.forEach(async (vid, i) => { - // const vidName = `segvideo${i}.mkv` - // inputPaths.push(vidName) - // const videoFile = new File(vid.videoChunks, vidName, { type: allVideoChunks[0].type, lastModified: Date.now() }); - // ffmpeg.FS('writeFile', vidName, await fetchFile(videoFile)); - // // }) - // ffmpeg.FS('writeFile', 'order.txt', inputPaths.join('\n')); - - // console.log('concat') - // await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'order.txt', 'ouput.mp4'); - - // const { buffer } = ffmpeg.FS('readFile', 'output.mp4'); - // const concatVideo = new File([buffer], 'concat.mp4', { type: "video/mp4" }); - - // const data = await Networking.UploadFilesToServer(concatVideo) - // const result = data[0].result - // if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox - // props.setResult(result, trackScreen) - // } else { - // alert("video conversion failed"); - // } - - // // delete all files in MEMFS - // inputPaths.forEach(path => ffmpeg.FS('unlink', path)); - // ffmpeg.FS('unlink', 'order.txt'); - // ffmpeg.FS('unlink', 'output.mp4'); + const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths) + console.log(result) + if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox + props.setResult(result, trackScreen) + } else { + alert("video conversion failed"); + } + })(); } @@ -162,8 +91,6 @@ export function RecordingView(props: IRecordingViewProps) { }, [videos]) useEffect(() => { - - console.log('in finish useEffect') if (finished) { setOrderVideos(true); @@ -177,7 +104,7 @@ export function RecordingView(props: IRecordingViewProps) { if (!navigator.mediaDevices) { console.log('This browser does not support getUserMedia.') } - console.log('This device has the correct media devices.') + // console.log('This device has the correct media devices.') }, []) useEffect(() => { @@ -244,7 +171,6 @@ export function RecordingView(props: IRecordingViewProps) { // reset the temporary chunks videoChunks = [] setRecording(false); - setFinished(true); trackScreen && RecordingApi.Instance.pause(); } @@ -269,8 +195,10 @@ export function RecordingView(props: IRecordingViewProps) { } - const stop = () => { - if (videoRecorder.current) { + const stop = (e: React.MouseEvent) => { + e.stopPropagation() + if (videoRecorder.current) { + setFinished(true); if (videoRecorder.current.state !== "inactive") { videoRecorder.current.stop(); // recorder.current.stream.getTracks().forEach((track: any) => track.stop()) @@ -278,19 +206,21 @@ export function RecordingView(props: IRecordingViewProps) { } } - const pause = () => { + const pause = (e: React.MouseEvent) => { + e.stopPropagation() if (videoRecorder.current) { if (videoRecorder.current.state === "recording") { - videoRecorder.current.pause(); + videoRecorder.current.stop(); } } } - const startOrResume = () => { + const startOrResume = (e: React.MouseEvent) => { + e.stopPropagation() if (!videoRecorder.current || videoRecorder.current.state === "inactive") { record(); } else if (videoRecorder.current.state === "paused") { - videoRecorder.current.resume(); + videoRecorder.current.start(); } } @@ -315,16 +245,6 @@ export function RecordingView(props: IRecordingViewProps) { const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000); return toTwoDigit(minutes) + " : " + toTwoDigit(seconds); } - - const doTranscode = async () => { - - // console.log('Start transcoding'); - // ffmpeg.FS('writeFile', 'test.avi', await fetchFile('/flame.avi')); - // await ffmpeg.run('-i', 'test.avi', 'test.mp4'); - // console.log('Complete transcoding'); - // const data = ffmpeg.FS('readFile', 'test.mp4'); - // console.log(URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))); - }; return (
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index 398b007b5..0ee0a34df 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -44,25 +44,10 @@ export default class UploadManager extends ApiManager { register({ method: Method.POST, - subscription: "/uploadVideosandConcatenate", - secureHandler: async ({ req, res }) => { - const form = new formidable.IncomingForm(); - form.keepExtensions = true; - form.uploadDir = pathToDirectory(Directory.parsed_files); - return new Promise(resolve => { - form.parse(req, async (_err, _fields, files) => { - const results: Upload.FileResponse[] = []; - - // create an array of all the file paths - const filePaths: string[] = Object.keys(files).map(key => files[key].path); - console.log("uploading files", Array.isArray(filePaths)); - const result = await DashUploadUtils.concatenateVideos(filePaths); - console.log('concatenated', result); - result && !(result.result instanceof Error) && results.push(result); - _success(res, results) - resolve(); - }); - }); + subscription: "/concatVideos", + secureHandler: async ({ req, res }) => { + // req.body contains the array of server paths to the videos + _success(res, await DashUploadUtils.concatVideos(req.body)); } }); diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 148b0df65..be30c115d 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -63,21 +63,20 @@ export namespace DashUploadUtils { const { imageFormats, videoFormats, applicationFormats, audioFormats } = AcceptableMedia; //TODO:glr - export async function concatenateVideos(filePaths: string[]): Promise { + export async function concatVideos(filePaths: string[]): Promise { // make a list of paths to create the ordered text file for ffmpeg - //const filePaths = videoFiles.map(file => file.path); - // write the text file to the file system const inputListName = 'concat.txt'; const textFilePath = path.join(filesDirectory, inputListName); // make a list of paths to create the ordered text file for ffmpeg - const filePathsText = filePaths.map(filePath => `file '${filePath}'`).join('\n'); + const filePathsText = filePaths.map(filePath => `file '${filePath}'`).join('\n'); + // write the text file to the file system writeFile(textFilePath, filePathsText, (err) => console.log(err)); - console.log(filePathsText) + console.log('fileTextPaths', filePathsText) // make output file name based on timestamp - const outputFileName = `output-${Utils.GenerateGuid()}.mkv`; - // create the output file path in the parsed_file directory - const outputFilePath = path.join(filesDirectory, outputFileName); + const outputFileName = `output-${Utils.GenerateGuid()}.mp4`; + // create the output file path in the videos directory + const outputFilePath = path.join(pathToDirectory(Directory.videos), outputFileName); // concatenate the videos await new Promise((resolve, reject) => { @@ -92,45 +91,15 @@ export namespace DashUploadUtils { .on("end", resolve); }) - // delete concat.txt from the file system - unlinkSync(textFilePath); - - // read the output file from the file system - // const outputFile = fs.readFileSync(outputFilePath); - - // make a new blob object with the output file buffer - // const outputFileBlob = new Blob([outputFile.buffer], { type: 'x-matroska/mkv' }); - - // TODO: make with toJSON() + // delete concat.txt from the file system + unlinkSync(textFilePath); + // delete the old segment videos from the server + filePaths.forEach(filePath => unlinkSync(filePath)); - // make a data object - const outputFileObject: formidable.File = { - size: 0, - name: outputFileName, - path: outputFilePath, - // size: outputFileBlob.size, - type: 'video/x-matroska;codecs=avc1,opus', - lastModifiedDate: new Date(), - - toJSON: () => ({ ...outputFileObject, filename: outputFilePath.replace(/.*\//, ""), mtime: null, length: 0, mime: "", toJson: () => undefined as any }) + // return the path(s) to the output file + return { + accessPaths: getAccessPaths(Directory.videos, outputFileName) } - - // const file = { ...outputFileObject, toJSON: () => ({ ...outputFileObject, filename: outputFilePath.replace(/.*\//, ""), mtime: null, length: 0, mime: "", toJson: () => undefined as any }) }; - - // this will convert it to mp4 and save it to the server - //return await MoveParsedFile(outputFileObject, Directory.videos); - - return await upload(outputFileObject); - - // // return only the output (first) file to the videos directory - // return { - // source: file, result: { - // accessPaths: { - // agnostic: getAccessPaths(Directory.videos, outputFileName) - // }, - // rawText: undefined - // } - // } } export function uploadYoutube(videoId: string): Promise { -- cgit v1.2.3-70-g09d2 From 3627d2597ffb52f00c3b82456b1b6693006c93fa Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 10 Jun 2022 12:44:48 -0400 Subject: remove console.logs --- src/server/DashUploadUtils.ts | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index be30c115d..df5888c5a 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -71,7 +71,6 @@ export namespace DashUploadUtils { const filePathsText = filePaths.map(filePath => `file '${filePath}'`).join('\n'); // write the text file to the file system writeFile(textFilePath, filePathsText, (err) => console.log(err)); - console.log('fileTextPaths', filePathsText) // make output file name based on timestamp const outputFileName = `output-${Utils.GenerateGuid()}.mp4`; @@ -80,7 +79,6 @@ export namespace DashUploadUtils { // concatenate the videos await new Promise((resolve, reject) => { - console.log('concatenating videos'); var merge = ffmpeg(); merge.input(textFilePath) .inputOptions(['-f concat', '-safe 0']) -- cgit v1.2.3-70-g09d2 From aa979bcd302e48982707fb6f12403a48a721f147 Mon Sep 17 00:00:00 2001 From: Naafiyan Ahmed Date: Wed, 29 Jun 2022 19:17:00 -0400 Subject: got basic file upload to work --- src/client/documents/Documents.ts | 12 +++++++++--- src/client/util/CurrentUserUtils.ts | 2 +- src/fields/URLField.ts | 1 + src/server/ApiManagers/UploadManager.ts | 1 + src/server/DashUploadUtils.ts | 18 +++++++++++++++++- src/server/DataVizUtils.ts | 13 +++++++++++++ 6 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 src/server/DataVizUtils.ts (limited to 'src/server/DashUploadUtils.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 59a1d41a8..b9d879c55 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -12,7 +12,7 @@ import { RichTextField } from "../../fields/RichTextField"; import { SchemaHeaderField } from "../../fields/SchemaHeaderField"; import { ComputedField, ScriptField } from "../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../fields/Types"; -import { AudioField, ImageField, MapField, PdfField, RecordingField, VideoField, WebField, YoutubeField } from "../../fields/URLField"; +import { AudioField, CsvField, ImageField, MapField, PdfField, RecordingField, VideoField, WebField, YoutubeField } from "../../fields/URLField"; import { SharingPermissions } from "../../fields/util"; import { Upload } from "../../server/SharedMediaTypes"; import { aggregateBounds, OmitKeys, Utils } from "../../Utils"; @@ -940,8 +940,8 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } - export function DataVizDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), undefined, { title: "Data Viz", ...options }); + export function DataVizDocument(url: string, options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: "Data Viz", ...options }); } export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { @@ -1253,6 +1253,11 @@ export namespace DocUtils { if (!options._width) options._width = 400; if (!options._height) options._height = (options._width as number) * 1200 / 927; } + if (type.indexOf("csv") !== -1) { + ctor = Docs.Create.DataVizDocument; + if (!options._width) options._width = 400; + if (!options._height) options._height = (options._width as number) * 1200 / 927; + } //TODO:al+glr // if (type.indexOf("map") !== -1) { // ctor = Docs.Create.MapDocument; @@ -1278,6 +1283,7 @@ export namespace DocUtils { ctor = Docs.Create.WebDocument; options = { ...options, _width: 400, _height: 512, title: path, }; } + return ctor ? ctor(path, options) : undefined; } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 52fbda9a9..40268693e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -294,7 +294,7 @@ export class CurrentUserUtils { {key: "WebCam", creator: opts => Docs.Create.WebCamDocument("", opts), opts: { _width: 400, _height: 200, title: "recording", recording:true, system: true, cloneFieldFilter: new List(["system"]) }}, {key: "Button", creator: Docs.Create.ButtonDocument, opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, }}, {key: "Script", creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }}, - {key: "DataViz", creator: opts => Docs.Create.DataVizDocument(opts), opts: { _width: 300, _height: 300 }}, + // {key: "DataViz", creator: opts => Docs.Create.DataVizDocument(opts), opts: { _width: 300, _height: 300 }}, {key: "Header", creator: headerTemplate, opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true,}}, {key: "Presentation",creator: Docs.Create.PresDocument, opts: { _width: 400, _height: 500, _viewType: CollectionViewType.Stacking, targetDropAction: "alias" as any, _chromeHidden: true, boxShadow: "0 0" }}, {key: "Tab", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 500, _height: 800, _backgroundGridShow: true, }}, diff --git a/src/fields/URLField.ts b/src/fields/URLField.ts index 3e7542e46..36dd56a1a 100644 --- a/src/fields/URLField.ts +++ b/src/fields/URLField.ts @@ -59,6 +59,7 @@ export const nullAudio = "https://actions.google.com/sounds/v1/alarms/beep_short @scriptingGlobal @Deserializable("pdf") export class PdfField extends URLField { } @scriptingGlobal @Deserializable("web") export class WebField extends URLField { } @scriptingGlobal @Deserializable("map") export class MapField extends URLField { } +@scriptingGlobal @Deserializable("csv") export class CsvField extends URLField { } @scriptingGlobal @Deserializable("youtube") export class YoutubeField extends URLField { } @scriptingGlobal @Deserializable("webcam") export class WebCamField extends URLField { } diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index e7b7056a1..04a11f410 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -24,6 +24,7 @@ export enum Directory { text = "text", pdf_thumbnails = "pdf_thumbnails", audio = "audio", + csv = "csv", } export function serverPathToFile(directory: Directory, filename: string) { diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts index 552ab57a5..5f46bcc88 100644 --- a/src/server/DashUploadUtils.ts +++ b/src/server/DashUploadUtils.ts @@ -17,6 +17,7 @@ import { resolvedServerUrl } from "./server_Initialization"; import { AcceptableMedia, Upload } from './SharedMediaTypes'; import request = require('request-promise'); import formidable = require('formidable'); +import { csvParser } from './DataVizUtils'; const { exec } = require("child_process"); const parse = require('pdf-parse'); const ffmpeg = require("fluent-ffmpeg"); @@ -85,7 +86,7 @@ export namespace DashUploadUtils { const category = types[0]; let format = `.${types[1]}`; console.log(green(`Processing upload of file (${name}) and format (${format}) with upload type (${type}) in category (${category}).`)); - + switch (category) { case "image": if (imageFormats.includes(format)) { @@ -116,6 +117,11 @@ export namespace DashUploadUtils { if (audioFormats.includes(format)) { return UploadAudio(file, format); } + case "text": + if (types[1] == "csv") { + return UploadCsv(file); + } + } console.log(red(`Ignoring unsupported file (${name}) with upload type (${type}).`)); @@ -135,6 +141,16 @@ export namespace DashUploadUtils { return MoveParsedFile(file, Directory.pdfs, undefined, result.text); } + async function UploadCsv(file: File) { + const { path: sourcePath } = file; + // read the file as a string + const data = readFileSync(sourcePath, 'utf8'); + // split the string into an array of lines + return MoveParsedFile(file, Directory.csv, undefined, data); + // console.log(csvParser(data)); + + } + const manualSuffixes = [".webm"]; async function UploadAudio(file: File, format: string) { diff --git a/src/server/DataVizUtils.ts b/src/server/DataVizUtils.ts new file mode 100644 index 000000000..4fd0ca6ff --- /dev/null +++ b/src/server/DataVizUtils.ts @@ -0,0 +1,13 @@ +export function csvParser(csv: string) { + const lines = csv.split("\n"); + const headers = lines[0].split(","); + const data = lines.slice(1).map(line => { + const values = line.split(","); + const obj: any = {}; + for (let i = 0; i < headers.length; i++) { + obj[headers[i]] = values[i]; + } + return obj; + }); + return data; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2