canvas 的大小（其中包含视频）和流式传输视频的质量

Question

我正在尝试以下示例，绘制视频并叠加到 canvas，并在 YouTube 上直播。

对于 Canvas 和发送到 YouTube 的视频，我有一些要求要满足：

canvas应该：

发送到 YouTube 直播的视频质量 API 应该：

我想知道这是否可能。

不是

const videoOutputStream = canvasRef.current.captureStream(30); // 30 FPS

在代码中基本上捕获了 canvas 上的内容并发送了？

这意味着如果 canvas 太小，视频分辨率会受到影响，对吗？

有更好的方法吗？我真的需要绘制叠加层（没有叠加层的应用程序没有意义），我想灵活地使用 canvas 大小（例如在移动设备上较小）。

另一个问题是，canvas 的尺寸是这样静态设置的：

canvasRef.current.height = videoRef.current.clientHeight;
canvasRef.current.width = videoRef.current.clientWidth;

这是故意的吗？在这种情况下，是否不建议调整 canvas 大小，因为在调整大小时会影响视频输出？

我正在尝试将 canvas 包装在一个可调整大小的容器中，如果容器大小发生变化，则根据 requestAnimationFrame 中的 canvas 大小调整 canvas 的大小，但没有确定这是否是个好主意。

Answer 1

我构建了一个类似于您所描述的应用程序：https://record.a.video（它流式传输到 api.video，但可用于任何 RTMP 端点服务）

将 canvas 尺寸设置为您要流式传输的尺寸。这就是将从浏览器发送出去的内容。

然后使用 CSS 为浏览器调整 canvas 的大小 - 使其响应。例如 - 在这个应用程序中，我将其设置为桌面屏幕的 70%，以及较小设备屏幕的 66%。它不影响流式传输的大小。

Size of canvas with video in it and the quality of video streamed