Recherche avancée

Sur d’autres sites (7992)

• react vite ffmpeg how to resolve worker module returning 404

  27 août, par pmkob

  I have imported the js, wasm, and worker modules into my project
https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.js

  


  https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.wasm
https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.worker.js

  


  and upon calling the function that the load is in, i get the error in the worker module
Request URL :
http://localhost:3000/node_modules/.vite/deps/worker.js?worker_file&type=module Status Code :
404 Not Found
Referrer Policy :
strict-origin-when-cross-origin

  


  In order to resolve this issue i have added these to my config and looked at similar issues with different threads https://github.com/ffmpegwasm/ffmpeg.wasm/issues/532
but with no luck. The load also never completes.

  


  CONFIG:
export default defineConfig(({ mode }) => ({
//other config stuff
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"]
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  }
}));

FILE:
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";
 const ffmpeg = new FFmpeg();
    await ffmpeg.load({
      coreURL: await toBlobURL(
        `${importedURL}/ffmpeg/ffmpeg-core.js`,
        "text/javascript"
      ),
      wasmURL: await toBlobURL(
        `${importedURL}/ffmpeg/ffmpeg-core.wasm`,
        "application/wasm"
      ),
      workerURL: await toBlobURL(
        `${importedURL}/ffmpeg/ffmpeg-core.worker.js`,
        "text/javascript"
      )
    });


  


• Audio to Video Conversion using FFmpeg in React

  6 octobre 2024, par Yuri

  Upon running my code, the audio successfully gets converted into a video and saved in the bucket, however, the video size is just 9 bytes.

  


  Here's my utility.

  


  import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { storage } from '../firebase'; 

export async function generateAndStoreVideo(audioPath, imagePath, userId) {
  try {
    const ffmpeg = new FFmpeg({ log: true });
    await ffmpeg.load();

    console.log('Fetching audio and image...');
    ffmpeg.writeFile( 'input.mp3', await fetchFile(audioPath));
    ffmpeg.writeFile('input.jpg', await fetchFile(imagePath));
    
    console.log('Running FFmpeg...');
    await ffmpeg.exec(['-i', 'sound.mp3', '-i', 'image.png', 'output.mp4']
    );

    console.log('FFmpeg completed!');
    
    const data = ffmpeg.readFile( 'output.mp4');
    const videoBlob = new Blob([data.buffer], { type: 'video/mp4' });

    console.log('Uploading video to Firebase...');
    const videoRef = ref(storage, `videos/${userId}/${Date.now()}_generated_video.mp4`);
    const uploadSnapshot = await uploadBytes(videoRef, videoBlob);

    const videoURL = await getDownloadURL(uploadSnapshot.ref);

    console.log('Video uploaded successfully! URL:', videoURL);

    return videoURL;
  } catch (error) {
    console.error('Error generating or uploading video:', error);
    throw new Error('Video generation or upload failed.');
  }
}



  


  After uploading, I also got this error :

  


  ErrnoError: FS error
    at handleError (http://localhost:3000/static/js/bundle.js:98427:58)
    at http://localhost:3000/static/js/bundle.js:98450:7


  


  I've made sure I'm using the new FFMPEG version and syntax, but the issues persist.

  


• How to make media recorder api individual chunks playable by it self

  10 août 2024, par tedGuy

  I'm trying to send individual chunks to the server instead of sending the whole chunks at once. This way, I have Ffmpeg on my Rails server to convert these chunks to HLS and upload them to S3 to stream the video instantly. However, I've encountered an issue the Media Recorder only provides playable chunks for the first segment after that, they are not playable and need to be concatenated to play.

  


  To avoid this, I've taken a different approach where I start a new Media Recorder every 3 seconds so that I get a playable chunk every time. However, this approach has its issues the video glitches a bit due to the delay when I stop and start a new Media Recorder. Is there a way to achieve this with ease ? This is my current status. please help !

  


  const startVideoRecording = async (
    screenStream: MediaStream,
    audioStream: MediaStream
  ) => {
    setStartingRecording(true);

    try {
      const res = await getVideoId();
      videoId.current = res;
    } catch (error) {
      console.log(error);
      return;
    }

    const outputStream = new MediaStream();
    outputStream.addTrack(screenStream.getVideoTracks()[0]);
    outputStream.addTrack(audioStream.getAudioTracks()[0]); // Add audio track

    const mimeTypes = [
      "video/webm;codecs=h264",
      "video/webm;codecs=vp9",
      "video/webm;codecs=vp8",
      "video/webm",
      "video/mp4",
    ];

    let selectedMimeType = "";
    for (const mimeType of mimeTypes) {
      if (MediaRecorder.isTypeSupported(mimeType)) {
        selectedMimeType = mimeType;
        break;
      }
    }

    if (!selectedMimeType) {
      console.error("No supported mime type found");
      return;
    }

    const videoRecorderOptions = {
      mimeType: selectedMimeType,
    };

    let chunkIndex = 0;

    const startNewRecording = () => {
      // Stop the current recorder if it's running
      if (
        videoRecorderRef.current &&
        videoRecorderRef.current.state === "recording"
      ) {
        videoRecorderRef.current.stop();
      }

      // Create a new MediaRecorder instance
      const newVideoRecorder = new MediaRecorder(
        outputStream,
        videoRecorderOptions
      );
      videoRecorderRef.current = newVideoRecorder;

      newVideoRecorder.ondataavailable = async (event) => {
        if (event.data.size > 0) {
          chunkIndex++;
          totalSegments.current++;
          const segmentIndex = totalSegments.current;
          console.log(event.data);
          handleUpload({ segmentIndex, chunk: event.data });
        }
      };

      // Start recording with a 3-second interval
      newVideoRecorder.start();
    };

    // Start the first recording
    startNewRecording();

    // Set up an interval to restart the recording every 3 seconds
    recordingIntervalIdRef.current = setInterval(() => {
      startNewRecording();
    }, 3000);

    setIsRecording(true);
    setStartingRecording(false);
  };