diff --git a/package-lock.json b/package-lock.json index 7acae877e..ee75b4756 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,8 @@ "@capacitor/storage": "^1.2.5", "@capawesome/capacitor-file-picker": "^5.3.0", "@capawesome/capacitor-screen-orientation": "^5.0.1", + "@ffmpeg/ffmpeg": "^0.12.10", + "@ffmpeg/util": "^0.12.1", "@fortawesome/angular-fontawesome": "^0.9.0", "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", @@ -4329,6 +4331,33 @@ "node": ">=10.0.0" } }, + "node_modules/@ffmpeg/ffmpeg": { + "version": "0.12.10", + "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz", + "integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==", + "dependencies": { + "@ffmpeg/types": "^0.12.2" + }, + "engines": { + "node": ">=18.x" + } + }, + "node_modules/@ffmpeg/types": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz", + "integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==", + "engines": { + "node": ">=16.x" + } + }, + "node_modules/@ffmpeg/util": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz", + "integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ==", + "engines": { + "node": ">=18.x" + } + }, "node_modules/@firebase/analytics": { "version": "0.6.18", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz", @@ -46791,6 +46820,24 @@ "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==", "dev": true }, + "@ffmpeg/ffmpeg": { + "version": "0.12.10", + "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz", + "integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==", + "requires": { + "@ffmpeg/types": "^0.12.2" + } + }, + "@ffmpeg/types": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz", + "integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==" + }, + "@ffmpeg/util": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz", + "integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ==" + }, "@firebase/analytics": { "version": "0.6.18", "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz", diff --git a/package.json b/package.json index 07fa5a961..c06f607aa 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,8 @@ "@capacitor/storage": "^1.2.5", "@capawesome/capacitor-file-picker": "^5.3.0", "@capawesome/capacitor-screen-orientation": "^5.0.1", + "@ffmpeg/ffmpeg": "^0.12.10", + "@ffmpeg/util": "^0.12.1", "@fortawesome/angular-fontawesome": "^0.9.0", "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d21866bf4..4699fdb51 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,6 +29,7 @@ import { Network } from '@ionic-native/network/ngx'; import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx'; import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx'; import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx'; +import { FFmpeg } from '@ffmpeg/ffmpeg'; @@ -218,6 +219,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */ FileOpener, DocumentViewer, FFMpeg, + FFmpeg, { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptorService, multi: true }, chatTokenInterceptor, tokenInterceptor, diff --git a/src/app/pages/publications/view-publications/view-publications.page.scss b/src/app/pages/publications/view-publications/view-publications.page.scss index b16e2ea08..5db86279e 100644 --- a/src/app/pages/publications/view-publications/view-publications.page.scss +++ b/src/app/pages/publications/view-publications/view-publications.page.scss @@ -164,6 +164,7 @@ video { } .post-content { margin: 0 auto; + margin-top: 20px; margin-bottom: 35px; } .post-title-time { diff --git a/src/app/services/videoconvert.service.ts b/src/app/services/videoconvert.service.ts index 0dce197b0..51ffdaadc 100644 --- a/src/app/services/videoconvert.service.ts +++ b/src/app/services/videoconvert.service.ts @@ -1,5 +1,7 @@ import { Injectable } from '@angular/core'; import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx'; +import { FFmpeg } from '@ffmpeg/ffmpeg'; +import { fetchFile, toBlobURL } from '@ffmpeg/util'; @Injectable({ providedIn: 'root' @@ -7,15 +9,59 @@ import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx'; export class VideoconvertService { constructor( - private ffmpeg: FFMpeg + private ffmpeg: FFMpeg, + private ffmpegWeb: FFmpeg ) { } - async convertVideo(inputPath, outputPath,filename, formart) { - const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`; + async convertVideo(inputPath, outputPath, filename, formart) { + try { + const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`; - const result = await this.ffmpeg.exec(ffmpegCommand) + const result = await this.ffmpeg.exec(ffmpegCommand) - console.log('Convert returns ', `${outputPath}${filename}.${formart}`); + console.log('Convert returns ', `${outputPath}${filename}.${formart}`); + } catch (error) { + console.error('Error during conversion:', error); + throw error; // Re-throwing the error for handling in the component + } + } + + async convertVideoWeb(inputPath, outputPath, filename, format) { + try { + console.log('Conversion started...'); + + const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd'; + const coreURL = await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'); + const wasmURL = await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'); + + await this.ffmpegWeb.load(); + + const inputType = inputPath.type.split('/').pop(); + console.log(inputType) + await this.ffmpegWeb.writeFile(`input.${inputType}`, await fetchFile(inputPath)); + + await this.ffmpegWeb.exec(['-i', `input.${inputType}`, 'output.mp4']); + + const outputData: any = await this.ffmpegWeb.readFile('output.mp4'); + const outputBlob = new Blob([outputData.buffer], { type: 'video/mp4' }); + const outputFile = new File([outputBlob], `${filename}.mp4`, { type: 'video/mp4' }); + + console.log('Conversion completed.'); + return outputFile; + } catch (error) { + console.error('Error during conversion:', error); + throw error; + } +} + + + removeTextBeforeSlash(inputString, mark) { + if (inputString.includes(mark)) { + const parts = inputString.split(mark); + return parts.length > 1 ? parts[1] : inputString; + } else { + return inputString; + } } } diff --git a/src/app/shared/publication/new-publication/new-publication.page.ts b/src/app/shared/publication/new-publication/new-publication.page.ts index 6ad510cdf..59b4df286 100644 --- a/src/app/shared/publication/new-publication/new-publication.page.ts +++ b/src/app/shared/publication/new-publication/new-publication.page.ts @@ -248,6 +248,9 @@ export class NewPublicationPage implements OnInit { console.log(erro) }) } else if (this.checkFileType.checkFileType(blobFile.mimeType) == 'video'){ + + let convertedVideo = await this.videoconvertService.convertVideoWeb(blobFile.blob,"src/assets/videos/","output",'mp4') + this.convertBlobToBase64(blobFile.blob).then((value: string) => { this.filesSizeSum = this.filesSizeSum + blobFile.size @@ -259,7 +262,7 @@ export class NewPublicationPage implements OnInit { const newAttachment = new PublicationAttachmentEntity( { base64: this.removeTextBeforeSlash(value, ','), - extension: FileExtension, + extension: 'mp4', blobFile: file, FileType: this.checkFileType.checkFileType(FileExtension) as any, OriginalFileName: 'load video' diff --git a/src/app/shared/swiper/swiper.page.html b/src/app/shared/swiper/swiper.page.html index 2ccecd08b..da5c04fd2 100644 --- a/src/app/shared/swiper/swiper.page.html +++ b/src/app/shared/swiper/swiper.page.html @@ -5,7 +5,7 @@ --> - +