Recherche avancée

Sur d’autres sites (4621)

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

  


• The ffmpeg output binary stream front-end uses WebSocket to accept and cannot be played [closed]

  17 novembre 2024, par KIMEOOK

  Server push nodejs

  


  Use ws service to pass to the front end

  


        ffmpegs = spawn('ffmpeg', [
        '-f', 'gdigrab',  // 这是 Windows 下用于捕获屏幕的输入格式
        '-framerate', '60',  // 捕获帧率
        '-i', 'desktop',  // 捕获桌面（即屏幕）
        '-c:v', 'vp8',  // 视频编码格式
        '-f', 'webm',  // 设置输出为 mpegts 流
        '-pix_fmt', 'yuv420p',
        'pipe:1',  // 输出到管道
      ]);


  


  


  


  Front-end rendering

  


  
      let videoElement = document.getElementById('screenVideo');

      let mediaSource = new MediaSource();
      videoElement.src = URL.createObjectURL(mediaSource);

      mediaSource.addEventListener('sourceopen', () => {

        let sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"'); 

        let ws = new WebSocket(`ws://${ip}:3000/?device=${encodeURIComponent(selectedDevice)}`);

        ws.onmessage = (event) => {
          const data = new Uint8Array(event.data);
          if (!sourceBuffer.updating) {
            try {
              sourceBuffer.appendBuffer(data);
              console.log('ok')
            } catch (error) {
              console.error('Error appending buffer:', error);
            }
          } else {
            console.log('SourceBuffer is busy');
          }
        };

        ws.onerror = (error) => {
          console.error('WebSocket error:', error);
        };

        ws.onclose = () => {
          console.log('WebSocket connection closed');
        };

        if (mediaSource.readyState === 'open') {
          videoElement.play().catch(err => {
            console.error('Error attempting to play the video:', err);
          });
        }
}


  


  The video keeps spinning in circles and cannot be played normally.

  


  

  


  Unable to play normally. What's the problem ?