How to achieve 60 FPS when recording screen in Chrome?

Question

I am trying to record a screen in Chrome extension. In order to do that, I am using

 navigator.webkitGetUserMedia(videoConstraints, function(stream) { ...

as videoConstraints I sent :

var videoConstraints = {
    audio: false,
    video: {
    mandatory: { chromeMediaSource: 'screen', maxWidth: 960,
            maxHeight: 720, minWidth:960, minHeight:720  },
    optional: [
      { minFrameRate: 60 },
      { maxWidth: 640 },
      { maxHeigth: 480 }
    ]
}
};

unfortunately outcome is pretty laggy. Is there a way I can achieve 60 FPS with this method? Or should I look for another options? Would NaCl be a way to go?

Answer 1

If it is the saving to disk that takes the most time, you could try to use chrome.storage to save it with the unlimitedStorage permission which is asynchronous and it might be faster to get/set the image data. also for drawing the image to the canvas, there are a few things you can look into. You can check out WebGL. Also take a look at the requestAnimationFrame function. This site has information about canvas optimizations. drawing to canvas is slow, and should be redrawn to as few times as possible. This stackoverflow post might help you too.

I hope i helped. Gluck! Let me know how it goes.

Answer 2

Have you checked this screen share demo ??

I found this demo pretty fast, try to check the conference.js file inside this demo page, you may find some clue.