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?

score 2 · Answer 1 · edited May 23 '17 at 12:19

2

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.

edited May 23 '17 at 12:19

Community

1
1

answered Feb 28 '14 at 15:52

supb

96
4

Actually problem is in slicing video into canvas. it just takes too much time and makes it skip some frames. So I guess storage will not help here, but I will go through your other links. thanks – wonglik Mar 01 '14 at 18:47
oh i see. since very high efficiency is needed, you might want to reduce the amount of [garbage collection](http://stackoverflow.com/questions/18364175/best-practices-for-reducing-garbage-collector-activity-in-javascript) done. garbage collection might turn out to be quite the bottle neck since it pretty much stalls to clean out heap space. so maybe reducing garbage collection might help you. – supb Mar 01 '14 at 22:03

score 1 · Answer 2 · answered Feb 27 '14 at 13:13

1

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.

answered Feb 27 '14 at 13:13

Ichigo Kurosaki

3,765
8
41
56

I know this one. Actually after closer consideration I found out that this is not screen capture that is slow but saving it to disk. I am doing ctx.drawImage(video ... and then canvas.toDataURL('image/webp', 1) and this is terribly slow – wonglik Feb 27 '14 at 22:22
2

@wonglik Were you able to achieve 60 FPS when recording screen using any method? If yes, please let me know. I am stuck in the same problem. – somprabhsharma May 07 '19 at 10:19

How to achieve 60 FPS when recording screen in Chrome?

2 Answers2