cordova-plugin-video-editor icon indicating copy to clipboard operation
cordova-plugin-video-editor copied to clipboard

.jpg files as frames to generate a .mp4 video file with FFMPEG

Open Quentinnod opened this issue 8 years ago • 11 comments

Hi, I am creating an app which would allows the user to generate a video with the images that compose the video. I succeeded in doing this on my computer with FFMPEG cmd and three pictures :

ffmpeg -framerate 1/5 -i img%03d.jpg -c:v libx264 -r 30 -pix_fmt -yuv420p out.mp4

But when I execute the following command I get no result:

cmd = ['-framerate', '1/5', '-i', '/storage/extSdCard/DCIM/Camera/img001.jpg /storage/extSdCard/DCIM/Camera/img002.jpg /storage/extSdCard/DCIM/Camera/img003.jpg', '-c:v', 'libx264', '-r', '30', '-pix_fmt', '-yuv420p', '/storage/extSdCard/DCIM/Camera/out.mp4'];

VideoEditor.execFFMPEG(ffmpegSuccess, ffmpegError; {cmd: cmd});

Is it possible to execute this command with the plugin ?

Thanks a lot !! This plugin would be an awesome solution I i can do what I want to do.

Quentin

Quentinnod avatar May 16 '16 13:05 Quentinnod

Is the ffmpegSuccess or ffmpegError called? If the error callback is ran what is the error? Anything helpful in logcat?

rossmartin avatar May 16 '16 16:05 rossmartin

Thank you for your fast answer !!

Here is my logcat:

shellOut: /data/data/com.quentin.myAppTest/app_bin/ffmpeg -framerate 1/5 -i /storage/extSdCard/DCIM/Camera/img001.png /storage/extSdCard/DCIM/Camera/img002.png /storage/extSdCard/DCIM/Camera/img003.png -c:v libx264 -r 30 -pix_fmt yuv420p /storage/emulated/0/Android/data/com.quentin.myAppTest/files/outouf.mp4

shellOut: ffmpeg version N-78332-g14bf59c Copyright (c) 2000-2016 the FFmpeg developers shellOut: built with gcc 4.8 (GCC)

shellOut: configuration: --target-os=linux --cross-prefix=/var/www/html/ffmpeg-android/toolchain-android/bin/arm-linux-androideabi- --arch=arm --cpu=cortex-a8 --enable-runtime-cpudetect --sysroot=/var/www/html/ffmpeg-android/toolchain-android/sysroot --enable-pic --enable-libx264 --enable-libass --enable-libfreetype --enable-libfribidi --enable-fontconfig --enable-libmp3lame --enable-libfdk-aac --enable-libopus --enable-libvorbis --enable-gpl --enable-nonfree --enable-pthreads --disable-debug --disable-ffserver --enable-version3 --enable-hardcoded-tables --disable-ffplay --enable-ffprobe --enable-gpl --enable-yasm --disable-doc --disable-shared --enable-static --pkg-config=/var/www/html/ffmpeg-android/ffmpeg-pkg-config --prefix=/var/www/html/ffmpeg-android/build/armeabi-v7a --extra-cflags='-I/var/www/html/ffmpeg-android/toolchain-android/include -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2 -fno-strict-overflow -fstack-protector-all' --extra-ldflags='-L/var/www/html/ffmpeg-android/toolchain-android/lib -Wl,-z,relro -Wl,-z,now -pie' --extra-libs='-lpng -lexpat -lm' --extra-cxxflags=

shellOut: libavutil 55. 17.100 / 55. 17.100 shellOut: libavcodec 57. 24.101 / 57. 24.101 shellOut: libavformat 57. 24.101 / 57. 24.101 shellOut: libavdevice 57. 0.101 / 57. 0.101 shellOut: libavfilter 6. 28.100 / 6. 28.100 shellOut: libswscale 4. 0.100 / 4. 0.100 shellOut: libswresample 2. 0.101 / 2. 0.101 shellOut: libpostproc 54. 0.100 / 54. 0.100 shellOut: Input #0, png_pipe, from '/storage/extSdCard/DCIM/Camera/img001.png': shellOut: Duration: N/A, bitrate: N/A shellOut: Stream #0:0: Video: png, rgb24(pc), 1080x1920, 0.20 tbr, 0.20 tbn, 0.20 tbc

I cut this part of logcat to get more readability before the "shellOut": 05-17 13:24:44.765 31433-31728/com.quentin.myAppTest D/VideoEditor: + shellOut...

The logcat stops at the last line and nothing happens...

It works with one image as input (with success callback)but when I want multiple input image files it stops.

Thanks a lot Ross

Quentinnod avatar May 17 '16 12:05 Quentinnod

Do you have an example using multiple input files as image frames to generate a video ?

Quentinnod avatar May 17 '16 13:05 Quentinnod

There is an example in the android-ffmpeg-java library I'll dig it up later.

Can you try adding -y before your -i in your ffmpeg command?

'-framerate', '1/5', '-y', '-i', '/storage/extSdCard/DCIM/Camera/img001.jpg /storage/extSdCard/DCIM/Camera/img002.jpg /storage/extSdCard/DCIM/Camera/img003.jpg', '-c:v', 'libx264', '-r', '30', '-pix_fmt', '-yuv420p', '/storage/extSdCard/DCIM/Camera/out.mp4'

rossmartin avatar May 17 '16 21:05 rossmartin

Thank you for your answer. Adding -y to my cmd was very helpful !! I succeeded in generating a .mp4 file but only with .png images.

Helpful link : https://trac.ffmpeg.org/wiki/Create%20a%20video%20slideshow%20from%20images

Do you know how to use .jpg files ?

Moreover I had to change the file path name by /storage/extSdCard/DCIM/Camera/img%03d.png to add all the images with a imgxxx.png file format name. I took 5 png pictures named img001.png img002.png img003.png img004.png img005.png. And it works by executing the following command:

'-framerate', '1/5', '-y', '-i', '/storage/extSdCard/DCIM/Camera/img%03d.png', '-c:v', 'libx264', '-vf', 'fps=30', '-pix_fmt', 'yuv420p', '/storage/extSdCard/DCIM/Camera/out.mp4'

Thank you again !

Quentinnod avatar May 18 '16 14:05 Quentinnod

Did you manage to get this to work with Jpg files?

I am looking into creating an MP4 file from images taken with the camera - which are JPEG. Is this a viable option? Did it work for you?

ashleycoker avatar Jan 17 '17 12:01 ashleycoker

Yes it's possible. You can do it with ffmpeg with a command line. You put in parameters the pictures jpg and the parameters like the frame rate. I don't have the code with me but you would find it on the web

Le 17 janv. 2017 ? 13:55, ashleycoker <[email protected]mailto:[email protected]> a ?crit :

Did you manage to get this to work with Jpg files?

I am looking into creating an MP4 file from images taken with the camera - which are JPEG. Is this a viable option? Did it work for you?

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jbavari/cordova-plugin-video-editor/issues/78#issuecomment-273141977, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASfbY70IZqwnMiGd8uGjO-VCVXO76RbDks5rTLo9gaJpZM4IfUCQ.

Quentinnod avatar Jan 17 '17 13:01 Quentinnod

wow thanks for reply.

Did you do this from within a cordova android app? Thats what I am trying to do and at the moment failing (with another project that converts to webm format first).

I can get the images together, but need to be able to play them as a movie on the device, full screen.

ashleycoker avatar Jan 17 '17 14:01 ashleycoker

I used it within a Cordova app but it works only with android because the plugin which allow ffmpeg command line is only available with this OS

Le 17 janv. 2017 ? 15:15, ashleycoker <[email protected]mailto:[email protected]> a ?crit :

wow thanks for reply.

Did you do this from within a cordova android app? Thats what I am trying to do and at the moment failing (with another project that converts to webm format first).

I can get the images together, but need to be able to play them as a movie on the device, full screen.

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jbavari/cordova-plugin-video-editor/issues/78#issuecomment-273174311, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASfbY6vqgsDRfN2i6gZeWi8G3OIYo02Dks5rTMz0gaJpZM4IfUCQ.

Quentinnod avatar Jan 18 '17 16:01 Quentinnod

If you want to make a movie with the images used like video frames you would get bad quality and the time to produce such a video is very long and it consumes a lot of CPU.

But if you want just a slideshow it would be good

Le 17 janv. 2017 ? 15:15, ashleycoker <[email protected]mailto:[email protected]> a ?crit :

wow thanks for reply.

Did you do this from within a cordova android app? Thats what I am trying to do and at the moment failing (with another project that converts to webm format first).

I can get the images together, but need to be able to play them as a movie on the device, full screen.

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/jbavari/cordova-plugin-video-editor/issues/78#issuecomment-273174311, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASfbY6vqgsDRfN2i6gZeWi8G3OIYo02Dks5rTMz0gaJpZM4IfUCQ.

Quentinnod avatar Jan 18 '17 16:01 Quentinnod

what is the difference between movie and slideshow? I have just got it running, but yes it is slow. I need to stitch 30 camera images together to make an MP4 file - 3 seconds each.

ashleycoker avatar Jan 18 '17 16:01 ashleycoker