特に意味のないスクリプト

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);
})();
Edit

Pub: 11 May 2025 14:59 UTC

Edit: 11 May 2025 15:01 UTC

Views: 7