muaz-khan / MultiStreamsMixer

MultiStreamsMixer is a JavaScript library that allows you pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.

Home Page:https://www.webrtc-experiment.com/MultiStreamsMixer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to lower the cpu while using share screen and user camera

Proxy08 opened this issue · comments

Hi Muaz Khan,
I wanted to know if there is any way to lower cpu ? When I use multimixerStream my cpu can go from 10 to 60 %

        function afterScreenCaptured(screenStream) {

            navigator.mediaDevices.getUserMedia(constraints).then(function (cameraStream) {
                screenStream.fullcanvas = true;
                screenStream.width = screen.width; // or 3840
                screenStream.height = screen.height; // or 2160 

                cameraStream.width = parseInt((15 / 100) * screenStream.width);
                cameraStream.height = parseInt((15 / 100) * screenStream.height);
                cameraStream.top = screenStream.height - cameraStream.height;
                cameraStream.left = screenStream.width - cameraStream.width;


                var mixer = new MultiStreamsMixer([screenStream, cameraStream]);

               //mixer.frameInterval = 1;
                mixer.startDrawingFrames();
     
                video.srcObject = mixer.getMixedStream();

                 var mediaStream = mixer.getMixedStream();
                              video.onloadedmetadata = function (e) {
                    video.play();
                };
}

Thanks

Set mixer.frameInterval to something higher. The default is 10, which is 100fps. Should not need higher than 33, which is 30fps. But unfortunately, this will always be a high CPU operation.

@ptrwtts Is it a high CPU operation because it’s video or because it’s using video from canvas?

Right now we’re recording straight from the stream with media recorder, no video element no canvas. So I just want to know if this impacts the computer more.