包含视频的画布大小和流式传输视频的质量

Question

我正在使用以下示例，将视频和叠加层绘制到画布上，然后在 YouTube 上进行直播。

https://glitch.com/edit/#!/mmcc-next-streamr?path=pages%2Findex.js%3A1%3A0（您可以点击“显示”查看）

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

画布应该：

1. 具有响应大小
2. 调整大小时保持纵横比

发送到 YouTube Live Streaming API 的视频质量应该：

1. 不受画布大小的影响
2. 可以通过我的代码进行控制

我想知道这是否可能。

不是

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

在代码中基本上捕捉画布上的内容并发送？

这意味着如果画布很小，视频分辨率就会受到影响，对吧？

有没有更好的方法来做到这一点？我真的需要绘制覆盖层（没有覆盖层的应用程序没有意义），并且我希望画布尺寸灵活（例如移动设备上的小）。

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

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

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

我尝试将画布包装在一个可调整大小的容器中，并在容器大小发生变化时根据 requestAnimationFrame 中的画布大小调整画布大小，但不确定这是否是个好主意。

Answer 1

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

将画布大小设置为您要流式传输的尺寸。这就是将从浏览器发送的内容。

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