diff options
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 88 |
1 files changed, 53 insertions, 35 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 5cfb03414..994111bd4 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -7,7 +7,7 @@ import { FaCheckCircle } from 'react-icons/fa'; import { IconContext } from "react-icons"; import { Networking } from '../../../Network'; import { Upload } from '../../../../server/SharedMediaTypes'; -import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; +const ffmpeg = require("fluent-ffmpeg"); import { RecordingApi } from '../../../util/RecordingApi'; @@ -59,45 +59,63 @@ export function RecordingView(props: IRecordingViewProps) { console.log('in finish useEffect') if (finished) { - // load ffmpe (async () => { - console.log('crossOriginIsolated', crossOriginIsolated) - props.setDuration(recordingTimer * 100) + const inputPaths: string[] = []; + videos.forEach(async (vid, i) => { + const videoFile = new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() }); + const { name } = videoFile; + ffmpeg(name) + inputPaths.push(name) + }); - 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"); - } + + 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'); + // // delete all files in MEMFS + // inputPaths.forEach(path => ffmpeg.FS('unlink', path)); + // ffmpeg.FS('unlink', 'order.txt'); + // ffmpeg.FS('unlink', 'output.mp4'); })(); } |