【vue 实现代码舞】

项目演示
github地址
gitee地址

代码
直接替换视频资源就行了

<!--
 * @name: name
 * @description: Description * @lastEditors: Francis
 * @date: Do not edit
 * @lastEditTime: Do not edit
 * @filePath: Do not edit
-->

<template>
    <div class="content container">
        <div class="flex ">
            <div>
                <video ref="videoRef" style="width:324px;height:570;" :muted="true" :autoPlay="true" :preload="true"
                    loop :x5-video-player-fullscreen="true" :x5-playsinline="true" playsInline
                    :webkit-playsinline="true" crossOrigin="anonymous">
                    <source src="../../assets/video/video.mp4">

                </video>
            </div>
            <canvas ref="canvasRef" crossOrigin="anonymous" width="324" height="570"></canvas>
        </div>
    </div>
</template>
<script setup>
    import {
        ref,
    } from 'vue'

    const canvasWidth = 324;
    const canvasHeight = 570;
    const videoRef = ref(null)
    const canvasRef = ref(null)
    const ctxRef = ref(null)
    const frameId = ref(null)

    const init = () => {
        ctxRef.value = canvasRef.value.getContext("2d", {
            willReadFrequently: true,
        })
    }
    const play = () => {
        if (videoRef.value && ctxRef.value) {
            ctxRef.value.drawImage(
                videoRef.value,
                0,
                0,
                canvasWidth,
                canvasHeight
            );
            const imageData = ctxRef.value.getImageData(
                0,
                0,
                canvasWidth,
                canvasHeight
            );
            ctxRef.value.clearRect(0, 0, canvasWidth, canvasHeight);
            const {
                data,
                height,
                width,
            } = imageData;
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const startIndex = (y * width + x) * 4;
                    if (x % 5 === 0 && y % 5 === 0) {
                        const avgColor =
                            (data[startIndex] + data[startIndex + 1] + data[startIndex + 2]) / 3
                        ctxRef.value.fillStyle = `rgb(${avgColor}, ${avgColor}, ${avgColor})`;
                        ctxRef.value.font = "10px Arial";
                        ctxRef.value.fillText("8", x, y);
                    }
                }
            }

            setTimeout(() => {
                play()
            }, 60)
            // frameId.value= window.requestAnimationFrame(play());
            // window.cancelAnimationFrame(frameId.value)
        }
    };

    setTimeout(() => {
            init()
            play()
            //  cancelAnimationFrame(frameId.value);
        }, 2000

    )
</script>
<style scoped lang="less">
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        .tip {
            margin-top: 20px;
            color: #666;
        }
    }
</style>