youtube-video-inversion.js

/** 
  resources referred when writing this script:
  - https://gitlab.com/MPuschi/lotr-skip/-/blob/main/skip.js
  - https://codepen.io/wellingguzman/pen/XqYqmG
  - https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
*/


// Create Video and Canvas-Element
var canvas = document.createElement("canvas");
document.querySelector("body").appendChild(canvas);
var video = document.querySelector('video:first-child');
var videoWidth = video.offsetWidth;
var videoHeight = video.offsetHeight;
canvas.width = videoWidth;
canvas.height = videoHeight;

const mp = document.querySelector('#movie_player')

const v = mp.querySelector('.html5-main-video');

const canvas2 = document.createElement("canvas");
canvas2.width = videoWidth;
canvas2.height = videoHeight;
const ctx2 = canvas2.getContext('2d');


v.parentElement.insertBefore(canvas2, v);

function invertColors(data) {
  for (var i = 0; i < data.length; i+= 4) {
    data[i] = data[i] ^ 255; // Invert Red
    data[i+1] = data[i+1] ^ 255; // Invert Green
    data[i+2] = data[i+2] ^ 255; // Invert Blue
  }
}

// Draw Video in Canvas
var canvasContext = canvas.getContext('2d');
function redrawImage(){
    const vid = document.querySelector('video');
    ctx2.drawImage(vid, 0, 0, videoWidth, videoHeight);
    const frame = ctx2.getImageData(0, 0, videoWidth, videoHeight);
    invertColors(frame.data);
    vid.style.display = 'none';
    // ctx2.drawImage(vid, 0, 0, videoWidth, videoHeight);
    // ctx2.putImageData(frame, 0, 0, videoWidth, videoHeight);
    ctx2.putImageData(frame, 0, 0);
}
const interval = setInterval(redrawImage, 41);