Video streaming 包含视频的画布大小和视频流的质量

我正在玩下面的例子，绘制视频并覆盖到画布上，然后在YouTube上实时播放

（您可以单击“显示”查看它）

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

画布应：

有一个响应的大小

调整大小时保持纵横比

发送到YouTube实时流媒体API的视频质量应：

不受画布大小的影响

能够从我的代码中进行控制

我想知道这是否可能

不是吗

在代码中，基本上是捕获画布上的内容并发送它

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

有更好的方法吗？我真的需要绘制覆盖图（没有覆盖图的应用程序没有意义），我希望画布大小灵活（例如，手机上的小尺寸）

另一个问题是，画布的尺寸是静态设置的，如下所示：

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

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

---

我尝试将画布包装在一个可调整大小的容器中，并根据

requestAnimationFrame

中的画布大小调整画布大小（如果容器大小发生变化），但不确定这是否是一个好主意。

我构建了一个与您描述的类似的应用程序：（它流到api.video，但可用于任何RTMP端点服务）

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

---

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

谢谢！这很有帮助。你能告诉我你到底在哪里做这件事吗？我已经检查过了，但是很难找到发生这种情况的地方。第273行的画布是70%。对于小屏幕。第19行用于1200像素以上的屏幕，占66%。

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