I am building an online course website. To discourage video recording of paid courses, I would like to add a dynamic watermark over the video which randomly changes location over the screen. The watermark will display the email id of the user logged in. Is there a way to do this using React / Node JS?
Thanks in advance.
For media manipulation you can use use ffmpeg library. In the following demo i used ffmpeg node wrapper.
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}`);
})