Building a Scroll Capture and Video Creation App with React and Next.js

Enhancing user experience and adding various functionalities in modern web development is crucial. In this article, we will explore how to capture scroll movements on a web page and convert them into videos using React and Next.js, as well as how to create simple videos from image files. This process can be particularly useful for e-commerce operators who want to turn product description pages into videos. We will provide a detailed step-by-step guide for easy implementation.

1. Requirements and Project Setup

React
Next.js
html2canvas
FFmpeg (ffmpeg.wasm)

First, install Next.js and set up your project. Next.js is a React-based framework that supports Static Site Generation (SSG) to easily create static websites.

npx create-next-app@latest
cd your-next-app
npm install @ffmpeg/ffmpeg html2canvas

2. Implementing Screen Capture Functionality

Create a React component to implement the screen capture functionality. Use html2canvas to convert specific areas of the page into images.

// pages/index.js
import React, { useState, useRef, useEffect } from 'react';
import html2canvas from 'html2canvas';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const ScreenRecorder = () => {
  const [capturing, setCapturing] = useState(false);
  const [videoUrl, setVideoUrl] = useState('');
  const frames = useRef([]);

  useEffect(() => {
    if (capturing) {
      const interval = setInterval(async () => {
        const canvas = await html2canvas(document.body);
        frames.current.push(canvas.toDataURL('image/png'));
      }, 500); // Capture every 0.5 seconds
      return () => clearInterval(interval);
    }
  }, [capturing]);

  const startCapture = () => {
    frames.current = [];
    setCapturing(true);
  };

  const stopCapture = async () => {
    setCapturing(false);
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }
    frames.current.forEach((frame, index) => {
      ffmpeg.FS('writeFile', `frame${index}.png`, fetchFile(frame));
    });
    const inputFiles = frames.current.map((_, index) => `-loop 1 -t 0.5 -i frame${index}.png`).join(' ');
    const filter = `-filter_complex "concat=n=${frames.current.length}:v=1:a=0" output.mp4`;
    await ffmpeg.run(...inputFiles.split(' '), ...filter.split(' '));
    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    setVideoUrl(video);
  };

  return (
    <div>
      <button onClick={startCapture}>Start Capture</button>
      <button onClick={stopCapture}>Stop Capture</button>
      {videoUrl && <video src={videoUrl} controls></video>}
    </div>
  );
};

export default ScreenRecorder;

3. Converting Image Files to Video

Create a functionality in React to upload image files and convert them into a video. Use FFmpeg to handle the conversion.

// pages/create-video.js
import React, { useState } from 'react';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const ImageToVideo = () => {
  const [images, setImages] = useState([]);
  const [videoUrl, setVideoUrl] = useState('');

  const handleFileChange = (event) => {
    setImages(Array.from(event.target.files));
  };

  const createVideo = async () => {
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }

    images.forEach((image, index) => {
      ffmpeg.FS('writeFile', `image${index}.png`, fetchFile(image));
    });

    const inputFiles = images.map((_, index) => `-loop 1 -t 2 -i image${index}.png`).join(' ');
    const filter = `-filter_complex "concat=n=${images.length}:v=1:a=0" output.mp4`;

    await ffmpeg.run(...inputFiles.split(' '), ...filter.split(' '));

    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    setVideoUrl(video);
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={createVideo}>Create Video</button>
      {videoUrl && <video src={videoUrl} controls></video>}
    </div>
  );
};

export default ImageToVideo;

4. Applying SSG in Next.js

To use Static Site Generation in Next.js, use the `getStaticProps` function to fetch data during the build. The example here shows basic settings, but real data can be fetched via API calls.

// pages/index.js
export async function getStaticProps() {
  const productImages = [
    'https://example.com/image1.png',
    'https://example.com/image2.png'
  ];

  return {
    props: {
      productImages,
    },
  };
}

5. Generating and Viewing the Video

Once screen capture is complete, use FFmpeg to convert the captured images into a video. Using `ffmpeg.wasm` allows this process to be handled within the browser.

6. Building and Deploying the Project

Build the project and export it as static files for deployment.

npm run build
npm run export

Running this command will build the Next.js app and export it as static files into the `out` directory, ready for deployment on a web server.

Conclusion

In this article, we explored how to capture scroll movements on a web page and convert them into videos using React and Next.js, as well as how to create simple videos from image files. This functionality is particularly useful for e-commerce operators looking to provide video presentations of product description pages. By utilizing html2canvas and ffmpeg.wasm, all tasks can be handled within the browser, and using Next.js allows for deployment with SSG. Use these techniques to enhance your website’s user experience.