HTML 5 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'质量下降了。

但是如果我删除所有画布代码并只播放'mainVideo'，则质量会得到保持，但是使用画布时，其质量会下降。

[Expected Result这是未添加画布代码的情况下视频的输出

Actual Result这是添加画布代码后得到的输出

预先感谢

Answer 1

我之所以得出这个答案，是因为我以为自己遇到了同样的问题。

• 我在元素上具有1080p信号源（来自HDMI捕获设备的高清内容，该内容在浏览器中注册为网络摄像头）
• [我有一个1920x1080画布，并且我正在使用ctx.drawImage(video, 0, 0, 1920, 1080)-正如上面的评论者所提到的，我认为至关重要的是，您只能以原始高度/宽度值的良好倍数进行绘制。
• 我在Chrome / Brave中尝试了imageSmoothingEnabled和各种imageSmoothingQuality设置，最终，我发现这些设置没有太大的区别。
• 我的Web应用程序上的画布仍显示为极其模糊-甚至无法阅读屏幕上的〜24pt字体，基本上根本无法使用视频]

我对模糊的视频感到沮丧，因此我在“干净的套件”中重新创建了完整的测试，现在我又遇到了[[no缩放问题-我不知道我的主要应用程序在做什么，但在此示例中，您可以连接任何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();
    })

[下面您可以看到我的视口，其中包含视频和画布元素（均为1080p，缩放至〜45％，因此它们适合），并使用requestAnimationFrame绘制我的内容。内容被缩小了，因此您可以看到抗锯齿，但是如果您加载示例并单击“画布”，它将转到“全屏”，并且质量还不错-我在源计算机上播放了1080p Youtube视频，并且在全屏1080p画布元素上看不到任何区别。