WebRTC performance - very high cpu load

Question

Working on a motion detector js library built with WebRTC + canvas. When I run the app I immediately get very high cpu usage. I optimized the loops etc, but the basic problem seems to be accessing the camera eg WebRTC.

Is there a way to make WebRTC behave better? Perhaps another configuration? Or is there something I'm missing? Could this be some js memory leak I'm handling wrong? What am I doing wrong?

You can check another demo here with the same lib

and a different one using WebRTC and with same problem here

Answer 1

The demo looks like it does motion detection by inspecting the video image's pixels. It appears to render it to a canvas then retrieve the canvas image data.

This is slow because it's just a slow thing to do - there are lots of pixels, frames come through quickly, and it's a high CPU job. It's made worse by the fact Javascript is not always very efficient at this kind of data-heavy processing. So I don't think the slowness is inherent to WebRTC. It's just heavy javascript.

Answer 2

Have you tried using Web Workers for the computation?

There is a demo using web workers for motion tracking (Firefox only). CPU usage does seem high in this demo but the worker's reported fps is way over the framerate of the video so there might be some benefit to try and limit the worker to 30fps.