Enforce Video framerate constraint

[KaranBhansali91]

Hi,
We want framerate to be enforced at 60 fps in the screenshare using canvas streaming. The recorded video details shows 14 fps on the flashphoner
constraints: {
video: {
width: 1280,
height: 720,
frameRate: 60,
},
}

Regards

 

[Max]

Good day.
For screen sharing, frameRate is not mandatory. Also, you can use ideal modifier only, but not exact (the last one will throw an exception).
For canvas streaming, you cannot set frameRate at all. You can only set a desired loop timeout, but you cannot affect drawing frequency when using requestAnimationFrame() method:

function createCanvasStream() {
    ...
    var useRequestAnimationFrame = $("#usedAnimFrame").is(':checked');
    mockVideoElement.addEventListener("play", function () {
        var $this = this;
        (function loop() {
            if (!$this.paused && !$this.ended) {
                canvasContext.drawImage($this, 0, 0);
                if (useRequestAnimationFrame) {
                    requestAnimationFrame(loop);
                } else {
                    setTimeout(loop, 1000 / 60); // drawing at 60fps
                }
            }
        })();
    }, 0);
    ...
    return canvasStream;
}

 

[KaranBhansali91]

Hi,

We are streaming the content to youtube by using flashphoner
We are using sdk api with configuration

streamPublish = flashphonerSession.createStream({
name: streamName,
display: localVideo,
cacheLocalResources: true,
receiveVideo: false,
receiveAudio: false,
disableConstraintsNormalization: true,
useCanvasMediaStream: true,
constraints: {
video: {
deviceId: deviceId,
width: 1280,
height: 720,
frameRate: 60,
minBitrate: 2500,
maxBitrate: 12000
},
audio: true
}

we are sharing the screen using following code

streamPublish.switchToScreen("screen", true)

video frames are freezing while streaming gaming content even though we already increased the framerate as well as bitrate , already mentioned in above code snippet.

For your reference i am sharing the youtube URL

.

Regards,
Karan

 

[Max]

useCanvasMediaStream: true,

This is an experimental option intended to apply filters to the picture from webcam. If you don't need this, disable it. Also, the canvas streaming of high resolution picture may increase a publishing client CPU load.

width: 1280,
height: 720,
frameRate: 60,
minBitrate: 2500,
maxBitrate: 12000

Seems like the parameters are too high for the publishers channel. Please try to switch to TCP transport:

{
 name: streamName,
 display: localVideo,
 ...
 transport: "TCP"
}

If this does not help, please use a lower resolution, FPS and bitrate.
You can check an actual channel quality: Publisher and player channel quality control