Recherche avancée

Sur d’autres sites (7233)

• NodeJS : Fail to write byte array input from webcam to ffmpeg spawn process

  23 mai 2024, par Thanesh Prabaghan

  I'm using NodeJS server to display an HTML page which has webcam option. Once user visited to my NodeJS server, it will serve html page. User can allow webcam option and see webcam view on the page.

  


  In the backend, I send webcam stream (byte array) using socket.io. I receive byte array successfully in backend with the help of socket.io. BUT MY PROBLEM IS, I can't pipe this byte array to the ffmpeg spawn process. I don't know how to properly pipe this data to the ffmpeg. Once it done, all my problem will be solved.

  


  On the other side, I have node-media-server as RTMP server to publish this stream to VLC player and other devices. Kindly help me to complete this task. I will attach all my code to this question. Kindly run this in your environment and answer the question.

  


  MY HTML PAGE

  


  &#xA;&#xA;  &#xA;    &#xA;      &#xA;&#xA;      &#xA;&#xA;      <code class="echappe-js">&lt;script src=&quot;https://cdn.socket.io/4.7.5/socket.io.min.js&quot; &amp;#xA;        integrity=&quot;integrity_code&quot; &amp;#xA;        crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;&#xA;    &#xA;    &#xA;      
  &#xA;        &#xA;&#xA;        &lt;script&gt;&amp;#xA;          const socket = io(&amp;#x27;http://localhost:8080/&amp;#x27;);&amp;#xA;          var video = document.getElementById(&quot;video&quot;);&amp;#xA;&amp;#xA;          if (navigator.mediaDevices.getUserMedia) {&amp;#xA;            navigator.mediaDevices.getUserMedia({ video: true, audio:true })&amp;#xA;            .then(function (stream) {&amp;#xA;              const recorder = new MediaRecorder(stream);&amp;#xA;&amp;#xA;              recorder.ondataavailable = event =&gt; {&amp;#xA;                socket.emit(&amp;#x27;VideoStream&amp;#x27;, event.data);&amp;#xA;              };&amp;#xA;              recorder.start(1000);      &amp;#xA;              video.srcObject = stream;&amp;#xA;            }).catch(function (error) {&amp;#xA;              console.log(&quot;Something went wrong!&quot;);&amp;#xA;            });&amp;#xA;         }  &amp;#xA;       &lt;/script&gt;&#xA;    &#xA;&#xA;&#xA;
  

  


  FFMPEG IMPLEMENTATION

  


  const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
const path = require('node:path'); 
const { spawn } = require('node:child_process');

let cmd = spawn('ffmpeg.exe', [
    '-c:v', 'copy', '-preset', 'ultrafast', '-tune', 'zerolatency',
    '-c:a', 'aac', '-strict', '-2', '-ar', '44100', '-b:a', '64k',
    '-y',
    '-use_wallclock_as_timestamps', '1',
    '-async', '1',
    '-flush_packets', '1',
    '-rtbufsize', '1000',
    '-bufsize', '1000',
    '-f', 'flv',
     '-i','-',
    'rtmp://localhost:1935',
  ]);

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + 'index.html'));
});

io.on('connection', (socket) => {
  socket.on("VideoStream", (data) => {
    cmd.stdin.write(data);
  });
});

server.listen(8080, () => {
  console.log('listening on *:8080');
});

```
**NODE MEDIA SERVER IMPLEMENTATION**

```
const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config)
nms.run();
```




  


• How to convert jquery animation to movie or gif format ?

  19 avril 2019, par Barış Demirdelen

  How to convert jquery animation to movie or gif format ?
  Animation and screenshot functions call or too slow.
  Help me please

  Animation Function

  function resim1(){
  
      $("#resim-1").animate({ left: leftx}, startEffectTime1);
  
      ......
  
  }

  ScreenShot Function but too slow

  function shot(){
  
            html2canvas($("#main"), {
  
                onrendered: function(canvas) {
  
                    theCanvas = canvas;
  
                    document.body.appendChild(canvas);
  
                    Canvas2Image.saveAsPNG(canvas); 
  
                    $("#img-out").append(canvas);
  
                }
  
            });
  
  }

  Call animation and screenshot functions

  $(document).ready(function() {
  
       resim1(); // Animate start
  
       setInterval(function(){ // Screenshot start
  
            shot();
  
       },500);
  
  
  
  });

  Bottom function call animation breaking :/

  $(document).ready(function() {
  
       resim1(); // Animate start
  
       setInterval(function(){ // Screenshot start
  
            shot();
  
       },500);
  
  
  
  });

• Cannot find a matching stream for unlabeled input pad 0 on filter Parsed_split_0

  26 mars 2023, par VenoM

  So I'm using ytdl-core & ffmpeg to convert some videos from YouTube to MP4 and then manipulate them in a way or take screenshots. But the issue I'm facing is - some videos are downloaded and are completely playable, but others are corrupt.

  


  This is the error I get when I try to take screenshot of the corrupted video :

  


  


  Error : ffmpeg exited with code 1 : Cannot find a matching stream for unlabeled input pad 0 on filter Parsed_split_0

  


  


  And obviously, error is there because the video is corrupted, but WHY is that the case ?

  


  Here's my code (read TL ;DR below) :

  


    router.post("/screenshot", async (req, res) => {
  const urlToScreenshot = req.body.url;
  const timestamp = parseInt(req.body.t, 10);
  const YouTubeURL = `https://youtube.com/watch?v=${urlToScreenshot}`;
  const filename = uuidv4();

  const videoPath = `${filePath}/${filename}.mp4`;

  const downloadStartTime = timestamp - 3;
  const downloadEndTime = timestamp + 3;

  const videoStream = ytdl(YouTubeURL, {
    quality: "highest",
  });

  const ffmpegCommand = ffmpeg(videoStream)
    .setStartTime(downloadStartTime)
    .duration(downloadEndTime - downloadStartTime)
    .outputOptions("-c:v", "libx264")
    .outputOptions("-c:a", "copy")
    .outputOptions("-b:v", "10M")
    .outputOptions("-filter:v", "scale=1920:1080")
    .outputOptions("-q:v", "1")
    .outputOptions("-reconnect", "1") // enable reconnection attempts
    .outputOptions("-ignore_io_errors", "1") // ignore input/output errors
    .on("end", async () => {
      console.log("Video downloaded successfully: " + videoPath);

      const screenshotPath = `${filePath}/${filename}.png`;
      ffmpeg(videoPath)
        .screenshots({
          count: 1,
          timemarks: ["1"],
          folder: filePath,
          filename: `${filename}.png`,
        })
        .on("end", async () => {
          console.log(`Screenshot saved successfully: ${screenshotPath}`);
          try {
            const cloudinaryResult = await cloudinary.uploader.upload(
              screenshotPath
            );
            const screenshotUrl = cloudinaryResult.secure_url;
            console.log(`Screenshot uploaded to Cloudinary: ${screenshotUrl}`);
            // await unlink(videoPath);
            console.log(`Video file deleted: ${videoPath}`);
            // await unlink(screenshotPath);
            console.log(`Screenshot file deleted: ${screenshotPath}`);
            res.status(200).json({ screenshotUrl });
          } catch (err) {
            console.error(
              "An error occurred while uploading the screenshot to Cloudinary:",
              err
            );
            // await unlink(videoPath);
            // await unlink(screenshotPath);
            res.status(500).send("Internal Server Error");
          }
        })
        .on("error", async (err) => {
          console.error("An error occurred while taking the screenshot:", err);
          // await unlink(videoPath);
          // await unlink(screenshotPath);
          res.status(500).send("Internal Server Error");
        });
    })
    .on("error", async (err) => {
      console.error("An error occurred while downloading the video:", err);
      await unlink(videoPath); // delete the file on error
      res.status(500).send("Internal Server Error");
    })
    .save(videoPath);

  // console.log(ffmpegCommand);
});


  


  Code Summary : Basically I'm passing the videoID and timestamp (because I want to download a certain section of the video, not the whole video), it downloads the video, then takes a screenshot of the video at a certain timestamp (i.e 1st second) and sends the screenshot to Cloudinary (a cloud file storage).

  


  This works fine for 50% of the videos I've tried, but doesn't for other videos.

  


  Here's a picture of a corrupt video and a working video.

  


  

  


  

  


  

  


  Some help would be greatly appreciated !