Recherche avancée

Sur d’autres sites (4165)

• 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.

  


• 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"
      )
    });


  


• How to broadcast a video stream without reloading the page ?

  16 novembre 2024, par promo 69

  I created a Node.js server to :

  


  

  1. Receive images in udp and transform them into video and

  


  2. Display it on a website

  


  3. I tried but I don't understand how to broadcast the video live without having to reload the page

  


  


  Node.js server code :

  


  const express = require('express');
const dgram = require('dgram');
const fs = require('fs');
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const WebSocket = require('ws');

const app = express();
const httpPort = 3000;

const imageDir = path.join(__dirname, 'images');
if (!fs.existsSync(imageDir)) {
    fs.mkdirSync(imageDir);
}

let imageCount = 0;

const udpPort = 15002;
const udpHost = '127.0.0.1';
const server = dgram.createSocket('udp4');

const wss = new WebSocket.Server({ noServer: true });


const createVideo = () => {
    const outputVideo = path.join(__dirname, 'output_video.mp4');

    ffmpeg()
        .input(path.join(imageDir, '%d.jpg'))
        .inputOptions('-framerate 30')
        .output(outputVideo)
        .outputOptions('-c:v libx264')
        .on('end', () => {
            console.log('Vidéo créée avec succès !');

            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send('new-video');
                }
            });
        })
        .on('error', (err) => {
            console.log('Erreur lors de la création de la vidéo:', err);
        })
        .run();
};


app.get('/feed-video', (req, res) => {
    const videoPath = path.join(__dirname, 'output_video.mp4');
    res.sendFile(videoPath);
});

server.on('message', (msg, rinfo) => {
    console.log(`Reçu message de ${rinfo.address}:${rinfo.port}`);

    const imageFilePath = path.join(imageDir, `${imageCount}.jpg`);
    fs.writeFileSync(imageFilePath, msg);

    console.log(`Image ${imageCount}.jpg reçue et sauvegardée`);


    imageCount++;


    if (imageCount > 100) {
        createVideo();
        imageCount = 0;
    }
});


server.on('listening', () => {
    const address = server.address();
    console.log(`Serveur UDP en écoute sur ${address.address}:${address.port}`);
});


app.server = app.listen(httpPort, () => {
    console.log(`Serveur HTTP et WebSocket démarré sur http://localhost:${httpPort}`);
});

app.server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, (ws) => {
        wss.emit('connection', ws, request);
    });
});


server.bind(udpPort, udpHost);



  


  The html page :

  


  &#xA;&#xA;&#xA;    &#xA;    &#xA;    &#xA;    &#xA;&#xA;&#xA;<h1>Drone Video Feed</h1>&#xA;<video controls="controls" autoplay="autoplay"></video>&#xA;&#xA;<code class="echappe-js">&lt;script&gt;&amp;#xA;    const video = document.getElementById(&amp;#x27;video&amp;#x27;);&amp;#xA;    const ws = new WebSocket(&amp;#x27;ws://localhost:3000&amp;#x27;);&amp;#xA;&amp;#xA;    ws.onmessage = (event) =&gt; {&amp;#xA;        const blob = new Blob([event.data], { type: &amp;#x27;video/mp4&amp;#x27; });&amp;#xA;        video.src = URL.createObjectURL(blob);&amp;#xA;        video.play();&amp;#xA;    };&amp;#xA;&lt;/script&gt;&#xA;&#xA;&#xA;&#xA;

  


  I tried with websocket but I didn't succeed.
The video is correctly created and when I reload the page the new video is played by the player.

  


  However I would have been able to see the live stream without having to reload my page all the time.