Recherche avancée

Sur d’autres sites (8030)

• How to get the correct result file data if I use Web Worker on ffmpeg.js ?

  23 avril 2019, par SuperBerry

  I have tried to use FFMPEG.js (https://github.com/Kagami/ffmpeg.js) to convert mp3 files on the browser/client side, and I followed the usage of the page of Web Worker. However, the worker works well on the converting and it seems the file has been converted, but I cannot get the correct result file data back.

  Here my code is :

  <code class="echappe-js">&lt;script&gt;<br />
  
  <br />
  
  var stdout = &quot;&quot;;<br />
  
  var outputhtml=&quot;&quot;;<br />
  
  var stderr = &quot;&quot;;<br />
  
  var outputfile;<br />
  
  <br />
  
  var sampleVideoData;<br />
  
  <br />
  
  function retrieveSampleVideo() {<br />
  
    var oReq = new XMLHttpRequest();<br />
  
    oReq.open(&quot;GET&quot;, &quot;short.mp3&quot;, true);<br />
  
    oReq.responseType = &quot;arraybuffer&quot;;<br />
  
  <br />
  
    oReq.onload = function (oEvent) {<br />
  
      var arrayBuffer = oReq.response;<br />
  
      if (arrayBuffer) {<br />
  
        sampleVideoData = new Uint8Array(arrayBuffer);<br />
  
      }<br />
  
    };<br />
  
  <br />
  
    oReq.send(null);<br />
  
  }<br />
  
  <br />
  
  function getDownloadLink(fileData, fileName) {<br />
  
    var a = document.createElement('a');<br />
  
    a.download = fileName;<br />
  
    var blob = new Blob([fileData]);<br />
  
    var src = window.URL.createObjectURL(blob);<br />
  
    a.href = src;<br />
  
    a.textContent = 'Click here to download ' + fileName + &quot;!&quot;;<br />
  
    document.body.appendChild(a);<br />
  
  }<br />
  
  <br />
  
  var worker = new Worker(&quot;ffmpeg-worker-mp4.js&quot;);<br />
  
  <br />
  
  retrieveSampleVideo();<br />
  
  <br />
  
  var memfs =[];  <br />
  
  <br />
  
  //[, {name: &quot;input.mp3&quot;, data: output}];<br />
  
  <br />
  
  worker.onmessage = function(e) {<br />
  
    var msg = e.data;<br />
  
  <br />
  
    switch (msg.type) {<br />
  
    case &quot;ready&quot;:<br />
  
      console.log(&quot;ready: &quot; + msg.data);<br />
  
      alert(sampleVideoData.length);<br />
  
      memfs.push({name: &quot;input.mp3&quot;, data: sampleVideoData});<br />
  
      memfs.push({name: &quot;output.mp3&quot;, data: outputfile});<br />
  
  <br />
  
      worker.postMessage({type: &quot;run&quot;, MEMFS: memfs, arguments: [&quot;-i&quot;, &quot;input.mp3&quot;, &quot;-y&quot;, &quot;output.mp3&quot;]});<br />
  
  <br />
  
  <br />
  
      break;<br />
  
    case &quot;stdout&quot;:<br />
  
      console.log(&quot;stdout: &quot; + msg.data);<br />
  
      stdout += msg.data + &quot;\n&quot;;<br />
  
      outputhtml+=msg.data + &quot;&lt;br&gt;&quot;;<br />
  
  <br />
  
      break;<br />
  
    case &quot;stderr&quot;:<br />
  
      console.log(&quot;stderr: &quot; + msg.data);<br />
  
      stderr += msg.data + &quot;\n&quot;;<br />
  
      outputhtml+=msg.data + &quot;&lt;br&gt;&quot;;<br />
  
  <br />
  
      break;<br />
  
  <br />
  
    case &quot;exit&quot;:<br />
  
  <br />
  
      console.log(&quot;Process exited with code &quot; + msg.data);<br />
  
      console.log(stdout);<br />
  
      document.write(outputhtml);<br />
  
  <br />
  
      getDownloadLink(outputfile, &quot;output.mp3&quot;);<br />
  
      worker.terminate();<br />
  
  <br />
  
  <br />
  
      break;<br />
  
    }<br />
  
  };<br />
  
  <br />
  
      &lt;/script&gt;
  

  And the console output looks good :

  stderr: ffmpeg version n3.1.2 Copyright (c) 2000-2016 the FFmpeg developers index.html:66:4
  
  stderr:   built with emcc (Emscripten gcc/clang-like replacement) 1.36.7 () index.html:66:4
  
  stderr:   configuration: --cc=emcc --enable-cross-compile --target-os=none --arch=x86 --disable-runtime-cpudetect --disable-asm --disable-fast-unaligned --disable-pthreads --disable-w32threads --disable-os2threads --disable-debug --disable-stripping --disable-all --enable-ffmpeg --enable-avcodec --enable-avformat --enable-avutil --enable-swresample --enable-swscale --enable-avfilter --disable-network --disable-d3d11va --disable-dxva2 --disable-vaapi --disable-vda --disable-vdpau --enable-decoder=vp8 --enable-decoder=vp9 --enable-decoder=theora --enable-decoder=mpeg2video --enable-decoder=mpeg4 --enable-decoder=h264 --enable-decoder=hevc --enable-decoder=png --enable-decoder=mjpeg --enable-decoder=vorbis --enable-decoder=opus --enable-decoder=mp3 --enable-decoder=ac3 --enable-decoder=aac --enable-decoder=ass --enable-decoder=ssa --enable-decoder=srt --enable-decoder=webvtt --enable-demuxer=matroska --enable-demuxer=ogg --enable-demuxer=avi --enable-demuxer=mov --enable-demuxer=flv --enable-demuxer=mpegps --enable-demuxer=image2 --enable-demuxer=mp3 --enable-demuxer=concat --enable-protocol=file --enable-filter=aresample --enable-filter=scale --enable-filter=crop --enable-filter=overlay --disable-bzlib --disable-iconv --disable-libxcb --disable-lzma --disable-sdl --disable-securetransport --disable-xlib --disable-zlib --enable-encoder=libx264 --enable-encoder=libmp3lame --enable-encoder=aac --enable-muxer=mp4 --enable-muxer=mp3 --enable-muxer=null --enable-gpl --enable-libmp3lame --enable-libx264 --extra-cflags=-I../lame/dist/include --extra-ldflags=-L../lame/dist/lib index.html:66:4
  
  stderr:   libavutil      55. 28.100 / 55. 28.100 index.html:66:4
  
  stderr:   libavcodec     57. 48.101 / 57. 48.101 index.html:66:4
  
  stderr:   libavformat    57. 41.100 / 57. 41.100 index.html:66:4
  
  stderr:   libavfilter     6. 47.100 /  6. 47.100 index.html:66:4
  
  stderr:   libswscale      4.  1.100 /  4.  1.100 index.html:66:4
  
  stderr:   libswresample   2.  1.100 /  2.  1.100 index.html:66:4
  
  stderr: [mp3 @ 0x812380] Warning: not compiled with thread support, using thread emulation index.html:66:4
  
  stderr: Input #0, mp3, from 'input.mp3': index.html:66:4
  
  stderr:   Metadata: index.html:66:4
  
  stderr:     encoder         : Lavf57.66.101 index.html:66:4
  
  stderr:   Duration: 00:00:03.02, start: 0.023021, bitrate: 128 kb/s index.html:66:4
  
  stderr:     Stream #0:0: Audio: mp3, 48000 Hz, stereo, s16p, 128 kb/s index.html:66:4
  
  stderr:     Metadata: index.html:66:4
  
  stderr:       encoder         : Lavc57.75 index.html:66:4
  
  stderr: [mp3 @ 0x8240f0] Warning: not compiled with thread support, using thread emulation index.html:66:4
  
  stderr: [libmp3lame @ 0x81b8a0] Warning: not compiled with thread support, using thread emulation index.html:66:4
  
  stderr: [mp3 @ 0x80b0f0] Using AVStream.codec to pass codec parameters to muxers is deprecated, use AVStream.codecpar instead. index.html:66:4
  
  stderr: Output #0, mp3, to 'output.mp3': index.html:66:4
  
  stderr:   Metadata: index.html:66:4
  
  stderr:     TSSE            : Lavf57.41.100 index.html:66:4
  
  stderr:     Stream #0:0: Audio: mp3 (libmp3lame), 48000 Hz, stereo, s16p index.html:66:4
  
  stderr:     Metadata: index.html:66:4
  
  stderr:       encoder         : Lavc57.48.101 libmp3lame index.html:66:4
  
  stderr: Stream mapping: index.html:66:4
  
  stderr:   Stream #0:0 -> #0:0 (mp3 (native) -> mp3 (libmp3lame)) index.html:66:4
  
  stderr: Press [q] to stop, [?] for help index.html:66:4
  
  stderr: size=      47kB time=00:00:03.00 bitrate= 129.6kbits/s speed=10.9x    index.html:66:4
  
  stderr: video:0kB audio:47kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.489831% index.html:66:4
  
  Process exited with code 0

  I have set the output into the memfs in the code :

  memfs.push(name : "output.mp3", data : outputfile) ;

  But I cannot get the result file data in outputfile to create the blob downloadd link.

• Convert video into mp3 using ffmpeg in angular and nodejs and saving audio into the database

  2 septembre 2021, par Amir Shahzad

  This is nodejs server side code

  


  const express = require('express');
const ffmpeg  = require('fluent-ffmpeg');
const fileUpload = require('express-fileupload');
const mongoose = require('mongoose');
const cors   = require('cors')
const app = express();
const Video = require('./models/video');
mongoose.connect('mongodb://localhost:27017/YoutubeApp', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error'));
db.once('open', () => {
   console.log('Data Base Connected Successfully!');
});

app.use(fileUpload({
   useTempFiles: true,
   tempFileDir: 'temp/'
}));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors({ origin: 'http://localhost:4200' }));


ffmpeg.setFfmpegPath('/usr/bin/ffmpeg');

app.post('/mp4tomp3', (req, res) => {
const data = new Video({
     mp4: req.body.mp4
});
res.contentType('video/avi');
res.attachment('output.mp3');
req.files.mp4val.mv("temp/" + req.body, function(err) {
    if(err){
        res.sendStatus(500).send(err)
    }else{
        console.log("Fiel Uploaded Successfully.!");
    }
});
// Convertin Mp4 To Avi
ffmpeg('temp/' + req.files.mp4val.mp4)
.toFormat('mp3')
.on('end', function() {
    console.log('Done');
})
.on('error', function(err){
    console.log('An Error Occured' + err.message)
})
 .pipe(res, {end: true})
 })

 app.listen(3000, () => {
    console.log('Server Start On Port 3000')
 })


  


  Here i want to get input from the user with input tag and then want to convert video into audio and save into the database but i not know how i can do this

  


  This is video model file

  


  const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const videoSchema = new Schema({
    mp4: String,
});
module.exports = mongoose.model("Videos", videoSchema);


  


  This is Typescript code in angular client side where i want to create logic to convert video into audio from the server side code

  


  import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { VideoConversionService } from 'src/services/video-conversion.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

   submitted =false;
   form! : FormGroup
   data:any

   constructor(private formBuilder: FormBuilder,
       private videoService: VideoConversionService){}

   creatForm(){
    this.form = this.formBuilder.group({
    mp4: ['', Validators.required],
  });
  }
   ngOnInit(): void {
   this.creatForm();

  }


  convertVideo(){
    this.submitted = true
    this.videoService.conversion(this.form.value).subscribe(res => {
    this.data = res;
 })
 }

 }


  


  I do not know how to create logic to do that (convert video into audio using angular framework)

  


  This is app.component.html file where i want to get video from the user using input field

  


  <div class="container">&#xA;   <h1>Video Proccessing App</h1>&#xA;   <form>&#xA;     <input type="file" formcontrolname="mp4" />&#xA;     <input type="submit" value="Convert" />&#xA;  </form>&#xA;</div>&#xA;

  


  


  But my code is not working and video is not converting into audio

  


  This is my video service file where i calling nodejs api to perform the task

  


  import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class VideoConversionService {

constructor(private httpClient: HttpClient) { }

conversion(data: any){
   return this.httpClient.post('http://localhost:3000/mp4tomp3', data)
}
}


  


  Please anyone can solve my problem Thanks in advance

  


• Convert video into mp3 format using ffmpeg in nodejs and angular and then save converted audio into the database(mongodb)

  6 septembre 2021, par Amir Shahzad

  This is nodejs server side file

  


  const express = require('express');
const ffmpeg  = require('fluent-ffmpeg');
const fileUpload = require('express-fileupload');
const mongoose = require('mongoose');
const cors   = require('cors')
const app = express();
const Video = require('./models/video');
mongoose.connect('mongodb://localhost:27017/YoutubeApp', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error'));
db.once('open', () => {
   console.log('Data Base Connected Successfully!');
});

app.use(fileUpload({
   useTempFiles: true,
   tempFileDir: 'temp/'
}));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors({ origin: 'http://localhost:4200' }));


ffmpeg.setFfmpegPath('/usr/bin/ffmpeg');

app.post('/mp4tomp3', (req, res) => {
  convertdata = req.body;
  console.log('path of innput is', req.body);
  function convert(input, output, callback) {
     ffmpeg(input)
         .output(output)
         .on('end', function() {                    
             console.log('conversion ended');
             callback(null);
           }).on('error', function(err){
              console.log('error: ', err.code, err.msg);
              callback(err);
           }).run();
      }
     convert(convertdata, './temp/output.mp3', function(err){
        if(!err) {
          console.log('conversion complete');

 
     }
 })

 app.listen(3000, () => {
    console.log('Server Start On Port 3000')
 })


  


  In Convert function i not know how i can get input by the user i'm new in angular Please anyone can solve this out thanks in advance

  


  This is video model file

  


  const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const videoSchema = new Schema({
    mp4: String,
});
module.exports = mongoose.model("Videos", videoSchema);


  


  **This is Typescript code in angular client side that handle user input and select video **

  


  import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { VideoConversionService } from 'src/services/video-conversion.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

   submitted =false;
   form! : FormGroup
   data:any

   constructor(private formBuilder: FormBuilder,
       private videoService: VideoConversionService){}

   creatForm(){
    this.form = this.formBuilder.group({
    mp4: ['', Validators.required],
  });
  }
   ngOnInit(): void {
   this.creatForm();

  }


  convertVideo(){
    this.submitted = true
    this.videoService.conversion(this.form.value).subscribe(res => {
    this.data = res;
 })
 }

 }


  


  I do not know how to create logic to do that (convert video into audio using angular framework)

  


  This is app.component.html file where i want to get video from the user using input field

  


  <div class="container">&#xA;   <h1>Video Proccessing App</h1>&#xA;   <form>&#xA;     <input type="file" formcontrolname="mp4" />&#xA;     <input type="submit" value="Convert" />&#xA;  </form>&#xA;</div>&#xA;

  


  


  But my code is not working and video is not converting into audio

  


  This is my video service file where i calling nodejs api to perform the task

  


  import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class VideoConversionService {

constructor(private httpClient: HttpClient) { }

conversion(data: any){
   return this.httpClient.post('http://localhost:3000/mp4tomp3', data)
}
}


  


  Please anyone can solve my problem Thanks in advance