NodeJS with Fastify but want to make an canvas (p5js server-side)

Hey so I am kinda new to this,
But I am making an API using Fastify & NodeJS and want to add an overlay to a video, I have looked at multiple things and found that p5js would be the best for me, but I am failing to set it up. Could someone tell me how to set it up since there is no browser for me to do things on since its just an API, you request data and get data in return.

Thank you in advance!

FYI: I tried https://www.npmjs.com/package/node-p5 too and its just super outdated…

Really interesting, I never heard of p5 on the server side, as it was originally meant for client side graphics.

Judging by the NPM page, it sounds like you could, say, generate custom pngs in response to a quart but I don’t know how applicable that might be to a video overlay, in that the video itself would be streamed from the server.

The way most people make an overlay with p5 is to pipe it in as a stream, then, client side, draw over it, within the canvas

What exactly are you trying to do?

Thank you for your reply!
Maybe I should’ve explained it a bit better xD
But yea I want p5 on server side, I am creating an API that changes video to gif and more, but I would like the users to be able to add an “overlay” to their video, some pre-made and some custom. It will also include like animations if you have multiple vids etc. Thats why I found p5js to be the best for this case.

For the video stuff itself I found:


And for exporting it I would just basically get a picture of every frame.

So in the end I would need to get pictures of each frame of the video with animations/overlay.

I hope this explains it a bit better! :slight_smile:

Ah okay interesting. That old library seems like the place to start. Im not super familiar with Nodejs, especially what goes on under the hood, so I can’t give you great advice.

My initial thought was, create it client side, get the exporting working, then port over to node and cross your fingers haha.

So if I made my own node-p5 now, but with saving the canvas I get this error:

TypeError: get_URL(...).createObjectURL is not a function
    at new FileSaver (https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js:19390:44)
    at Object.saveAs (https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js:19406:26)
    at Object._main.default.downloadFile (https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js:70088:34)
    at https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js:65134:39
    at D:\CodeEnSHiz\project\API\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:80:9

Is this a p5 issue? Or is this an issue I can fix?

createObjecrURL() is a client-side method, part of the web-api.

In the past, I’ve used it to immediately display a users new profile pic. Instead of waiting for the upload, processing, and download, I used createObjectURL() to create a local ref that an href could understand.

That seems to be what your code is trying to do. Maybe see if you can tweak a line somewhere to instead use the node-servers local filesystem?

If you can contact me on discord (Bas950#0950) I can show you what I am doing,
right now all I have is setting up JSDOM

const dom = new JSDOM(
			`
			<head>
				<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
				<script>${readFileSync("sketch.js")}</script>
			</head>
			<body>
				<div>foo</div>
			</body>`,
			{
				runScripts: "dangerously",
				resources: "usable",
				pretendToBeVisual: true
			}
		);

and then sketch.js:

console.log("abc");

function setup() {
	let c = createCanvas(100, 100);
	console.log("canvas created");
	console.log(c);
	background(255, 0, 0);
	console.log("background set");
	saveCanvas(c, "myCanvas", "png");
	console.log("saved");
}

everything is working correctly only saving is just not working…

Hm, one last thought; maybe you can try writing your own save() function?

If the canvas holds a canvas object, perhaps you can save it directly, like in this tutorial:

Well I would need to import fs into the sketch file then…
but yea that doesnt work I keep getting errors on that and get linked to: