Trying to apply a watermark in real time with Node.js + FFMPEG
Asked Answered
N

0

9

I'm trying to write a streaming video server using Node.js express. the main task of the video server is to apply a watermark on the video. Here is my code

const express = require("express");
const fs = require("fs");
const path = require("path");
const ffmpeg = require("fluent-ffmpeg");
const ffmpegInstaller = require("@ffmpeg-installer/ffmpeg");
ffmpeg.setFfmpegPath(ffmpegInstaller.path);
const app = express();

app.get("/", function (req, res) {
  const path = req.query.video;
  const WATERMARK_PATH = req.query.id + `.png`;

  const stat = fs.statSync(path);
  const fileSize = stat.size;
  const range = req.headers.range;

  if (range) {
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;

    const chunksize = end - start + 1;
    const head = {
      "Content-Range": `bytes ${start}-${end}/${fileSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": chunksize,
      "Content-Type": "video/mp4",
    };

    res.writeHead(206, head);
    new ffmpeg(fs.createReadStream(path, { start, end }))
      .input(WATERMARK_PATH)

      .complexFilter(
        "overlay='x=if(eq(mod(n\\,18)\\,0)\\,sin(random(1))*w\\,x):y=if(eq(mod(n\\,18)\\,0)\\,sin(random(1))*h\\,y)'",
      )
      .outputOptions("-movflags frag_keyframe+empty_moov")
      .toFormat("mp4")
      .pipe(res, { end: true });
  } else {
    const head = {
      "Content-Length": fileSize,
      "Content-Type": "video/mp4",
    };
    res.writeHead(200, head);
    new ffmpeg(fs.createReadStream(path))
      .input(WATERMARK_PATH)
      .complexFilter(
        "overlay='x=if(eq(mod(n\\,18)\\,0)\\,sin(random(1))*w\\,x):y=if(eq(mod(n\\,18)\\,0)\\,sin(random(1))*h\\,y)'",
      )
      .outputOptions("-movflags frag_keyframe+empty_moov")
      .toFormat("mp4")
      .pipe(res, { end: true });
    // fs.createReadStream(path).pipe(res)
  }
});

app.listen(3020, function () {
  console.log("App is running on port 3020");
});

As a result, the video doesn't play, and the following error appears in the console.

enter image description here

Error:

c:\myapp>node server.js
App is running on port 3000
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: Output stream closed
    at Timeout._onTimeout (c:\myapp\node_modules\fluent-ffmpeg\lib\processor.js:491:25)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)
Emitted 'error' event on FfmpegCommand instance at:
    at emitEnd (c:\myapp\node_modules\fluent-ffmpeg\lib\processor.js:424:16)
    at Timeout._onTimeout (c:\myapp\node_modules\fluent-ffmpeg\lib\processor.js:491:17)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)

If you remove the assignment of headers and contact the server, we will download the video, that is, FFMPEG works, a watermark is added. Q: How do I set up video playback?

Novak answered 9/9, 2020 at 14:57 Comment(4)
Please copy the error as text, and as an image.Favourable
Thank you for your attention to the question, the error text is displayedManyplies
In one call to ffmpeg you're passing a start and end, the other you're not. I suspect that this is the issue.Castaneda
Sorry, but no(((Manyplies

© 2022 - 2024 — McMap. All rights reserved.