【无标题】

最新推荐文章于 2024-07-25 11:52:08 发布

ice_cola_yyds

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量62

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/xiaokeleaihekele/article/details/127722597

版权

<div class="main">
  <canvas width="600" height="600"></canvas>
  <div id="videoContainer">
    <h2>视频</h2>
    <video width="300" height="300" controls="true" autoplay="true" id="video"></video>
  </div>

  <button onclick="fn()">click</button>
</div>

<style>
  html,
  body {
    width: 100%;
    height: 100%;
  }

  .main {
    display: flex;
  }

  #videoContainer {
    display: none;
  }
</style>

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

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

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

  const data = [];
  recorder.ondataavailable = function (event) {
    if (event.data && event.data.size) {
      data.push(event.data);
    }
  };

  recorder.onstop = () => {
    const url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
    document.querySelector("#videoContainer").style.display = "block";
    document.querySelector("video").src = url;
  };

  recorder.start();

  setTimeout(() => {
    recorder.stop();
  }, 6000);
</script>