Image/Video Manipulation

Images or or frames of video that are drawn onto a Canvas can be manipulated, pixel by pixel.

Assuming you have a canvas with video or an image drawn to it, here is an example:

// Get at pixel data			
var imageData = thecontext.getImageData(0, 0, 640, 480);

// iterate over all pixels
for(var i = 0, n = imageData.data.length; i < n; i += 4) {
	
	// Get existing pixel data
	var red = imageData.data[i];
	var green = imageData.data[i + 1];
	var blue = imageData.data[i + 2];
	var alpha = imageData.data[i + 3];

	// Set new pixel data
	imageData.data[i + 1] = red;
	imageData.data[i + 2] = red;
	imageData.data[i + 3] = red;
}
thecontext.putImageData(imageData, 0, 0);			
			

Canvas Streaming

Of course, manipuating pixels on the canvas is all well and good but how about sharing that with others? Fortunately, WebRTC allows us to stream the canvas as if it were a video source

Canvas Stream Example

p5LiveMedia Canvas Streaming

p5LiveMedia supports streaming the canvas as well. Using this method allows us the ability to use all of p5's nice pixel by pixel manipulation.

let otherCanvas;

function setup() {
	let myCanvas = createCanvas(400, 400);
	let p5lm = new p5LiveMedia(this, "CANVAS", myCanvas, "stream-the-canvas");
	p5lm.on('stream', gotStream);
}

function draw() {
	background(220);
	fill(255,0,0);
	ellipse(mouseX,mouseY,100,100); 
}

function gotStream(stream) {
	otherCanvas = stream;
}