Can we convert images to video like ffmpeg library in ffmpeg wasm? about ffmpeg.wasm HOT 7 OPEN

Lets say I've like 500 images in an array that I want to convert in a video, so do I run this in a loop and writeFile 500 times?

Yes, exactly. Just be aware of memory limits, especially on mobile devices.

from ffmpeg.wasm.

Yes, we can 🦾
With help of ffmpeg command: --pattern_type glob
Pass array of images with num pattern like: -i frame_*.jpg. Remember that your frames should have correct number relative to video that you want to get. Ex:

const num = `00${index}`.slice(-3);
await this.ffmpeg.writeFile(`frame_${num}.jpg`, new Uint8Array(buffer));

from ffmpeg.wasm.

check ffmpeg docs: https://ffmpeg.org/

from ffmpeg.wasm.

Yes, we can 🦾 With help of ffmpeg command: --pattern_type glob Pass array of images with num pattern like: -i frame_*.jpg. Remember that your frames should have correct number relative to video that you want to get. Ex:

const num = `00${index}`.slice(-3);
await this.ffmpeg.writeFile(`frame_${num}.jpg`, new Uint8Array(buffer));

Hi @tini2n,
Thanks for your response. I am trying to record the stream getting from navigator.mediaDevices.getUserMedia by painting the video into a canvas and then storing the imageData using ffmpeg.writeFile method and then trying to convert the images into video using ffmpeg.exe method but it is not working for me. I am sharing the code I used here. Kindly please assist me if I did anything wrong.

const ffmpegRef = useRef(new FFmpeg());
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const videoRef = useRef<HTMLVideoElement | null>(null);
const fps = 30;
let uuid = crypto.randomUUID();
let images: Record<string, string[]> = {
[uuid]: [],
};

useEffect(() => {
initFFmpeg();
}, []);

const initFFmpeg = async () => {
const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
const ffmpeg = ffmpegRef.current;

ffmpeg.on("log", ({ message }) => {
  console.log(message);
});

ffmpeg.on("progress", ({ progress, time }) => {
  console.log(time, progress);
});
// toBlobURL is used to bypass CORS issue, urls with the same
// domain can be used directly.
await ffmpeg.load({
  coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
  wasmURL: await toBlobURL(
    `${baseURL}/ffmpeg-core.wasm`,
    "application/wasm"
  ),
  workerURL: await toBlobURL(
    `${baseURL}/ffmpeg-core.worker.js`,
    "text/javascript"
  ),
});

getVideoStream();

};

const getVideoStream = async () => {
if (!videoRef.current) return;

try {
  let stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  videoRef.current.srcObject = stream;
  await videoRef.current.play();
  console.log(ffmpegRef.current);
  setInterval(renderCanvas, 1000 / fps);
} catch (error) {
  console.log(error);
}

};

const renderCanvas = async () => {
if (!videoRef.current || !canvasRef.current || !ffmpegRef.current) return;

let ctx = canvasRef.current.getContext("2d");

if (!ctx) return;

let canvasWidth = canvasRef.current.width;
let canvasHeight = canvasRef.current.height;

ctx.clearRect(0, 0, canvasWidth, canvasHeight);

ctx.drawImage(
  videoRef.current,
  0,
  0,
  canvasRef.current.width,
  canvasRef.current.height
);

let fileName = `image-${uuid}-${images[uuid].length + 1}.png`;
let base64 = canvasRef.current.toDataURL("image/png");
let unit8Array = await fetchFile(base64);
await ffmpegRef.current.writeFile(fileName, unit8Array);
images[uuid].push(fileName);
if (images[uuid].length === 125) convertImagesToVideo(uuid);

};

const convertImagesToVideo = async (id: string) => {
try {
uuid = crypto.randomUUID();
images[uuid] = [];
let ffmpeg = ffmpegRef.current;
const input = image-${id}-%d.png;
const output = "output.mp4";
const args = -start_number 1 -i ${input} -c:v libx264 ${output};
await ffmpeg.exec(args.split(" "));
let data = await ffmpeg.readFile(output);
console.log(data);
} catch (error) {
console.log(error);
}
};

Thanks

from ffmpeg.wasm.

Hi @vkaswin, you can have a look here, this stop motion app seems to be doing the same thing you'd like to do:
https://github.com/kitsteam/stop-motion-app/blob/main/src/app/services/video/video.service.ts
https://github.com/kitsteam/stop-motion-app/blob/main/src/app/models/animator.ts#L148

from ffmpeg.wasm.

Hi @nwittstruck ,
Thanks for your response will check the stop motion github repository.

from ffmpeg.wasm.

Yes, we can 🦾 With help of ffmpeg command: --pattern_type glob Pass array of images with num pattern like: -i frame_*.jpg. Remember that your frames should have correct number relative to video that you want to get. Ex:

const num = `00${index}`.slice(-3);
await this.ffmpeg.writeFile(`frame_${num}.jpg`, new Uint8Array(buffer));

Lets say I've like 500 images in an array that I want to convert in a video, so do I run this in a loop and writeFile 500 times?

from ffmpeg.wasm.