问可以在javascript中旋转视频块吗？

EN

document.querySelector("button").onclick = (evt) => {
  evt.currentTarget.remove();
  const stream = getCanvasStream();
  const mirrored = mirrorStream(stream);
  document.querySelector("video.default").srcObject = stream;
  document.querySelector("video.mirrored").srcObject = mirrored;
};

function mirrorStream(stream) {
  const canvas = document.createElement("canvas");
  Object.assign(canvas, { width: 0, height: 0 });
  const ctx = canvas.getContext("2d");
  const track = stream.getVideoTracks()[0];
  const drawOnCanvas = (image, width, height) => {
    // MediaStream's video size may change over time
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      ctx.setTransform(-1, 0, 0, 1, width, 0);
    }
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(image, 0, 0);
  };
  // the MediaStreamTrackProcessor API is available, we use it
  if (window.MediaStreamTrackProcessor) {
    const processor = new MediaStreamTrackProcessor(track);
    const reader = processor.readable.getReader();
    reader.read().then(function readChunk({ done, value }) {
      const { displayWidth, displayHeight } = value;
      drawOnCanvas(value, displayWidth, displayHeight);
      value.close(); // close the VideoFrame when we're done with it
      if (!done) {
        reader.read().then(readChunk);
      }
    });
  } else {
    const vid = document.createElement("video");
    vid.srcObject = stream;
    // in case requestVideoFrameCallback is available, we use it
    // otherwise we fallback on rAF
    const scheduler = vid.requestVideoFrameCallback ?
        (cb) => vid.requestVideoFrameCallback(cb) : requestAnimationFrame;
    const draw = () => {
      const { videoWidth, videoHeight } = vid;
      drawOnCanvas(vid, videoWidth, videoHeight);
      scheduler(draw);
    };
    vid.play().then(draw);
  }
  return canvas.captureStream();
}

// StackSnippet only:
// because StackSnippet don't allow the use of gUM
// we return a MediaStream from a simple <canvas> anim
function getCanvasStream() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = "30px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  function anim() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillText(new Date().toTimeString().split(" ")[0], canvas.width / 2, canvas.height / 2);
    requestAnimationFrame(anim);
  }
  anim();
  return canvas.captureStream();
}

video { width: calc(50vw - 10px); border: 1px solid; }

<button>begin</button><br>
<video autoplay controls class="default">
</video><video autoplay controls class="mirrored">
</video>