Javascript 流媒体性能-画布vs<；img>；？

我正在开发一个应用程序，它需要通过webSocket连接以每秒至少30帧的速度持续传输图像

我遇到了一点性能问题，希望尽我所能进行优化

我想知道使用一个不断更新的图像（如这样）与将图像绘制到画布（canvs.drawImage（someDynamicallyUpdatingImage，0，0，640，480）之间的性能差异是什么

---

要添加一些上下文，发送到客户端的图像由位于服务器端的摄像头拍摄（请考虑IP摄像头设置）。我们一次只能为一个单独的图像轮询摄影机，但此过程可以非常快速地完成。问题是客户端必须接收字节缓冲区，将字节编码为base64字符串（我们当前使用的是

方法），并让dom重新绘制图像。此过程相当长，并且造成了很大的延迟。

为了将图像绘制到画布上，首先需要将图像加载到图像对象中，以便…将其作为视频流；-）详细说明@kaido的评论，您可以使用

video

元素作为画布的

drawinimage（videoElement，0,0）

的图像源。画布将绘制当前视频帧的快照。您可以在

requestAnimationFrame

循环中重复

drawImage

，将视频流到画布。我看到您正在使用WebSocket。你在做白板应用程序吗？如果是，则不必尝试传递整个画布内容（使用.toDataURL），只需在画布中传输每个新的增量更改，就可以显著减少负载大小。请参阅以开始。要添加一些上下文，发送到客户端的图像由位于服务器端的摄像头拍摄（请考虑IP摄像头设置）。我们一次只能为一张单独的图像轮询相机，但这一过程可以很快完成。问题是客户端必须接收字节缓冲区，将字节编码为base64字符串（我们目前使用的是

方法），并让dom重新绘制图像。这个过程相当长，造成了相当大的延迟。@jacobbersi。我懂了。。。您的编码/解码周期很长。您可以缓冲一些帧以避免中断。如果可能的话，使用Kaido的建议，并将您的提要作为视频流。