javascript - HTML5 Canvas drawImage 正在降低原始视频的质量

Question

我想在应用程序的两个区域显示相同的视频。因此，使用 Canvas 可以正常工作，但原始视频的质量正在下降，但 Canvas 视频质量很好。

var canvas = document.getElementById('shrinkVideo');
var context = canvas.getContext('2d');
var video = document.getElementById('mainVideo');

video.addEventListener('play', () => {
            // canvas.width = 270;
            // canvas.height = 480;
           this.draw(video, context, canvas.width,canvas.height);
        }, false);

   draw(v, c, w, h) {
        if (v.paused || v.ended) return false;
        c.drawImage(v, 0, 0, w, h);
        setTimeout(this.draw, 20, v, c, w, h);
    }

这是我同步两个视频的代码，它工作正常，但“mainVideo”质量下降。

但是，如果我删除所有 Canvas 代码并仅播放“mainVideo”，则质量会保持不变，但使用 Canvas 其质量会下降。

Expected Result这是未添加 Canvas 代码时的视频输出

Actual Result这是我在添加 Canvas 代码后得到的输出

提前致谢

Answer 1

我来这个答案是因为我认为我遇到了同样的问题。

我在一个元素上有 1080p 源(来自 HDMI 捕获设备的高清内容，在浏览器中注册为网络摄像头)

我有一个 1920x1080 的 Canvas ，我正在使用 ctx.drawImage(video, 0, 0, 1920, 1080) - 正如上面的评论者所提到的，我认为我发现仅以原始高度/宽度值的倍数绘制至关重要。

我尝试了有无 imageSmoothingEnabled和各种imageSmoothingQuality Chrome/Brave 中的设置；最终，我发现这些设置没有太大区别。

我的网络应用程序上的 Canvas 仍然非常模糊 - 甚至无法阅读
~24pt 字体在屏幕上，基本上根本无法使用视频

我对模糊的视频感到沮丧，所以我在这里的“干净套件”中重新创建了一个完整的测试，现在我不再遇到缩放问题——我不知道我的主要应用程序在做什么不同，但在这个例子中，你可以连接任何 1080p/720p 设备并看到它很好地缩放到 1080p(如果您想缩放到 720p，请更改 JS 文件中的分辨率)

https://playcode.io/543520

  const WIDTH = 1920;
  const HEIGHT = 1080;
  const video = document.getElementById('video1'); // Video element
  const broadcast = document.getElementById('broadcast'); // Canvas element
  broadcast.width = video.width = WIDTH;
  broadcast.height = video.height = HEIGHT;

  let ctx = broadcast.getContext('2d')

  onFrame = function() {
    ctx.drawImage(video, 0, 0, broadcast.width, broadcast.height)
    window.requestAnimationFrame(onFrame);
  }

  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then(stream => {
      window.stream = stream
      console.log('got UM')
      video.srcObject = stream;
      window.onFrame();
    })

下面你可以看到我的视口(viewport)，带有视频和 Canvas 元素(都是 1080p，缩放到 ~45% 以便它们适合)，使用 requestAnimationFrame绘制我的内容。内容被缩小了，所以你可以看到抗锯齿，但是如果你加载示例并单击 Canvas ，它会进入全屏，质量非常好——我在源机器上播放了一个 1080p Youtube 视频，并且在我的全屏 1080p Canvas 元素上看不到任何区别。