Добавить динамический водяной знак, который случайным образом меняет положение над видео React/Node

Question

Я создаю веб-сайт онлайн-курса. Чтобы не рекомендовать запись платных курсов, я хотел бы добавить к видео динамический водяной знак, который случайным образом меняет местоположение на экране. Водяной знак будет отображать адрес электронной почты пользователя, вошедшего в систему. Есть ли способ сделать это с помощью React / Node JS?

Заранее спасибо.

Answer 1

Для манипулирования мультимедиа вы можете использовать библиотеку ffmpeg. В следующей демонстрации я использовал обертку узла ffmpeg.

const ffmpeg = require('fluent-ffmpeg');
const fs = require('fs');
const http = require('http');

const PORT = 3000;
const VIDEO_PATH = 'big_buck_bunny.mp4';
const WATERMARK_PATH = `${__dirname}/watermark-128.png`;

const videoHandler = (req, res) => {
  new ffmpeg(fs.createReadStream(VIDEO_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});
};

const server = http.createServer(videoHandler);

server.listen(PORT, () => {
  console.log(`Listening at http://localhost:${PORT}`);
})