javascript:
var response = `
var sort_array = [
[119,62],[118,81],[117,67],[116,1],[115,34],[114,15],[113,80],[112,30],[111,29],[110,5],[109,72],[108,63],[107,45],[106,65],[105,102],
[104,33],[103,57],[102,104],[101,19],[100,97],[99,11],[98,7],[97,107],[96,115],[95,58],[94,110],[93,47],[92,117],[91,44],[90,8],[89,74],
[88,109],[87,61],[86,39],[85,56],[84,24],[83,43],[82,106],[81,82],[80,118],[79,0],[78,95],[77,76],[76,108],[75,64],[74,83],[73,21],
[72,99],[71,46],[70,100],[69,105],[68,9],[67,101],[66,54],[65,88],[64,92],[63,113],[62,73],[61,111],[60,103],[59,96],[58,77],[57,22],
[56,14],[55,6],[54,52],[53,16],[52,70],[51,86],[50,93],[49,78],[48,53],[47,12],[46,60],[45,98],[44,69],[43,38],[42,55],[41,3],[40,91],
[39,32],[38,84],[37,68],[36,90],[35,25],[34,116],[33,28],[32,42],[31,79],[30,94],[29,18],[28,112],[27,87],[26,4],[25,26],[24,40],
[23,85],[22,37],[21,59],[20,13],[19,27],[18,2],[17,17],[16,119],[15,66],[14,31],[13,71],[12,75],[11,41],[10,49],[9,89],[8,20],[7,50],
[6,35],[5,36],[4,51],[3,10],[2,23],[1,114],[0,48]
];
var offscreen;
var offscreen_context;
self.onmessage = (e) => {
let frame = e.data;
if(offscreen === undefined) {
offscreen = new OffscreenCanvas(frame.width, frame.height);
offscreen_context = offscreen.getContext('2d');
}
offscreen_context.putImageData(frame, 0, 0);
var height_of_a_piece = offscreen.height / 120;
var width_of_a_piece = offscreen.width;
sort_array.forEach(
(elem) => {
img1 = offscreen_context.getImageData(0, elem[0] * height_of_a_piece, width_of_a_piece, height_of_a_piece);
img2 = offscreen_context.getImageData(0, elem[1] * height_of_a_piece, width_of_a_piece, height_of_a_piece);
offscreen_context.putImageData(img1, 0, elem[1] * height_of_a_piece);
offscreen_context.putImageData(img2, 0, elem[0] * height_of_a_piece);
}
);
frame_sorted = offscreen_context.getImageData(0, 0, offscreen.width, offscreen.height);
postMessage(frame_sorted);
}
`;
(()=>{
if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype)) {
alert("Your browser does not support requestVideoFrameCallback().");
return -1;
}
let the_video = document.querySelectorAll("video")[0];
let canvas1 = document.createElement("canvas");
canvas1.height = the_video.videoHeight, canvas1.width = the_video.videoWidth, canvas1.style = "height: 100%; margin: auto;";
let div1 = document.createElement("div");
div1.style = "position: absolute; width: 100%; height: 100%; z-index: 114514; text-align: center;";
the_video.parentElement.appendChild(div1);
div1.appendChild(canvas1);
let canvas2 = new OffscreenCanvas(canvas1.width, canvas1.height);
let canvas1_context = canvas1.getContext('2d');
let canvas2_context = canvas2.getContext('2d');
let worker = new Worker( URL.createObjectURL( new Blob([response], {type: 'application/javascript'}) ) );
worker.onmessage = (e) => {
frame_sorted = e.data;
canvas1_context.putImageData(frame_sorted, 0, 0);
the_video.requestVideoFrameCallback(updateCanvas); /* Temporary work-around (w/ terrible performance) */
};
const updateCanvas = (now, metadata) => {
canvas2_context.drawImage(the_video, 0, 0);
let frame = canvas2_context.getImageData(0, 0, canvas2.width, canvas2.height);
worker.postMessage(frame);
/* the_video.requestVideoFrameCallback(updateCanvas); */ /* Temporary work-around (w/ terrible performance) */
};
/* Initial registration of the callback to run on the first frame */
the_video.requestVideoFrameCallback(updateCanvas);
})();