HTML 5 Canvas drawImage 降低了原始视频的质量

Question

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

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”，则质量可以保持，但使用画布其质量会下降。

预期结果这是未添加画布代码时视频的输出

实际结果这是添加画布代码后得到的输出

提前致谢

Answer 1

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

• 我的元素上有 1080p 源（来自 HDMI 捕获设备的高清内容，该设备在浏览器中注册为网络摄像头）
• 我有一个 1920x1080 画布，并且正在使用ctx.drawImage(video, 0, 0, 1920, 1080)- 正如上面评论者提到的，我认为我发现仅以原始高度/宽度值的良好倍数进行绘制至关重要。
• 我在 Chrome/Brave 中尝试了 with-withoutimageSmoothingEnabled以及各种imageSmoothingQuality设置；最终，我发现这些设置没有太大差异。
• 我的网络应用程序上的画布仍然非常模糊——甚至无法阅读屏幕上的 ~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();
    })

下面您可以看到我的视口，其中包含视频和画布元素（均为 1080p，缩放至约 45%，以便它们适合），用于requestAnimationFrame绘制我的内容。内容被缩小，因此您可以看到抗锯齿，但如果您加载示例并单击“画布”，它将进入全屏，并且质量非常好 - 我在源计算机上播放了 1080p Youtube 视频，并且在我的全屏 1080p 画布元素上看不到任何差异。