console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .main {
            display: flex;
        }

        #videoContainer {
            /* display: none; */
        }

        .bg-miusic {
            width: 400px;
            height: 50px;
            border: 1px solid;
        }

        #output-video {
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="main">
        <canvas class="canvas" style="border: 1px solid black;" width="450" height="600"></canvas>
        <div id="videoContainer" style="margin-left: 50px;">
            <h2>视频</h2>
            <video style="border: 1px solid black;" width="300" height="300" controls="true" autoplay="true"
                id="video"></video>
        </div>
        <!-- <video style="border: 4px solid red;" width="300" height="300" controls="true" autoplay="true"
            id="output-video"></video> -->
        <!-- <div class="bg-miusic">
            <audio id="canvas-music" src="https://material.baobeituan.com/video/admin/1.mp3" loop="loop">
                你的浏览器不支持audio标签。
            </audio>
        </div> -->
    </div>
    <!-- 
    <script src="./canvas2video.js"></script>
    <script src="https://unpkg.com/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script> -->
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
    <script>
        var img = {}
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        const {
            width,
            height
        } = canvas;

        ctx.fillStyle = 'red';

        function draw(rotation = 0) {
            ctx.clearRect(0, 0, 1000, 1000);
            ctx.save();
            ctx.translate(width / 2, height / 2);
            ctx.rotate(rotation);
            ctx.translate(-width / 2, -height / 2);
            ctx.beginPath();
            ctx.rect(200, 200, 200, 200);
            ctx.fill();
            ctx.restore();

            let h1 = img.height
            let w1 = img.width
            ctx.drawImage(img, 0, 0, w1, h1, 0, 0, 200, 200);
        }

        function update(t) {
            draw(t / 500);
            requestAnimationFrame(update);
        }

        var imgLoaded = 0;

        function main() {
            img = new Image(); // 创建一个<img>元素
            img.crossOrigin = "Anonymous";
            img.addEventListener('load', () => {
                onload()
            })
            img.src = "http://material.baobeituan.com/video/admin/test-canvas/pic1.jpg"
            //'./pic1.jpg';
            // "https://img.alicdn.com/bao/uploaded/i4/813529278/O1CN019jRGzx2IPNCqPBmjA_!!0-item_pic.jpg"

            let onload = () => {
                this.imgLoaded++
                if (this.imgLoaded == 1) {
                    console.log(img.width)
                    getVideo()
                    update(0);
                }
            }
        }
        main()

        function getVideo() {
            const stream = canvas.captureStream();
            const recorder = new MediaRecorder(stream, {
                mimeType: 'video/webm',
                videoBitsPerSecond: 250000000,
            });

            const data = [];
            recorder.ondataavailable = function (event) {
                if (event.data && event.data.size) {
                    data.push(event.data);
                }
            };
            recorder.onstop = () => {
                // getMp4(data)
                // sendServer(data)
                const url = URL.createObjectURL(new Blob(data, {
                    type: 'video/mp4'
                }));
                document.querySelector("#videoContainer").style.display = "block";
                document.querySelector("video").src = url;
            };

            recorder.start();

            setTimeout(() => {
                recorder.stop();
            }, 5000);
        }
        sendServer('S');
        function sendServer(data) {
            console.log('data', data)
            // let videoByte = new Blob(data, {
            //     type: 'video/webm'
            // })
            // console.log('videoByte', videoByte)
            let xhr = new XMLHttpRequest()
            xhr.open(
                'post',
                'http://127.0.0.1/template/video/createV2.post',
                true
            )
            // xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.responseType = 'application/json;charset=UTF-8'
            xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8")
            xhr.onload = function () {
                if (xhr.status == 200) {
                    console.log(xhr.response)
                }else{
                    console.log(xhr.response)
                }
            }
            let params = {
                id:555,
                name:"测试"
            }
            xhr.send('id=55&a=66')
        }
    </script>
</body>

</html>