Javascript HTML5CanvasDrawImage正在降低原始视频的质量

我想在应用程序的两个区域显示相同的视频。因此，使用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);
    }

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

但是，如果我删除所有的canvas代码，只播放“mainVideo”，质量会得到保持，但使用canvas时，质量会下降

这是未添加画布代码时的视频输出

这是我在添加画布代码后得到的输出

---

提前感谢

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

• 我在一个元素上有1080p源代码（来自HDMI捕获设备的高清内容，该设备在浏览器中注册为网络摄像头）
• 我有一张1920x1080的画布，我使用的是

  ctx.drawImage（视频，0，0，1920，1080）

  ——正如上面的一位评论者所提到的，我认为我发现，仅以原始高度/宽度值的好倍数进行绘制是至关重要的
• 我尝试了在Chrome/Brave中使用和不使用

  imageSmoothingEnabled

  和各种

  imageSmoothingQuality

  设置；最终，我发现这些设置没有太大的区别
• 我的网络应用程序上的画布仍然非常模糊——甚至无法阅读 屏幕上的字体为24pt，基本上根本无法使用视频

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

在下面，您可以看到我的视口，带有视频和画布元素（都是1080p，缩放到约45%，以适合它们），使用

requestAnimationFrame

绘制我的内容。内容被缩小，因此可以看到抗锯齿，但如果加载示例并单击画布，它将进入全屏，质量非常好-我在源计算机上播放了一段1080p Youtube视频，在我的全屏1080p Canvas elem上看不到任何差异耳鼻喉科。

---

质量下降是什么意思。分辨率较低吗？（如果是，请确保画布分辨率与视频匹配）是下降帧、显示空白帧还是抖动？（如果是，请使用

requestAnimationFrame

渲染视频，而不是

setTimeout

）。可能还有其他质量损失来源，但您将向我们提供有关视频质量下降的更多信息。@Blindman67我已添加了预期的图像和实际结果。视频的纵横比为9:16，正确显示在画布中，但不在视频标记中放大视频eo到不合适的大小。确保图像平滑处于启用状态。imageSmoothingEnabled=true如果要按~1.1875的比例放大，这是不好的，您需要1.2、1.25、1.5或2这样的比例平滑将有帮助，但为了获得最佳质量，您应该将整个值缩放2倍于原始值的3倍。256->384@1.5比例或512@2比例将更大更好。还要确保画布像素大小与CSS像素大小匹配。缩放视频会降低质量，您必须计划如何缩放图像（视频）以获得最佳效果（注意，您还可以剪裁像素以获得更好的缩放效果）这将解释/解决问题：2d上下文中还有一个新的设置，目前仅在chrome中支持，“

imageSmoothingQuality

”可以设置为高，并将改善缩放问题。@Blindman67画布中的视频质量正常，但视频标签中的原始视频质量会下降

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