search

muralikg / puppetcam

Export puppeteer tab as webm video
MIT License
322 stars 63 forks source link

Ability to record higher quality videos #11

Closed abhishekgahlot closed 5 years ago

abhishekgahlot commented 5 years ago

Hi,

Your repo is amazing and works well in Mac, Is it possible to record higher quality videos like 1080p. Currently its recording 720p.

Thanks

muralikg commented 5 years ago

@abhishekgahlot have you tried changing bit rate in background.js. This videoBitsPerSecond property will let you adjust quality of the output file.

muralikg commented 5 years ago

Also the height of the browser and captured viewport is hardcoded to 720 pixels (in export.js and background.js). Try tweaking them and simultaneously increasing bitrate for higher quality videos.

Some references

var constraints = { 
    video: {
        width: { ideal: 4096 },
        height: { ideal: 2160 } 
    } 
};
abhishekgahlot commented 5 years ago

Thanks @muralikg, Yup before i saw your comment I tried that and it worked :-)

abhishekgahlot commented 5 years ago

I am closing the issue @muralikg , Thanks for your help!

Insayt commented 5 years ago

@muralikg please can show an example how to make 1080p 60fps?

export.js

var width       = 1920;
var height      = 1080;

background.js

minWidth: 1920,
maxWidth: 1920,
minHeight: 1080,
maxHeight: 1080,
recorder = new MediaRecorder(stream, {
                videoBitsPerSecond: 15728640,
                ignoreMutedMedia: true,
                mimeType: 'video/webm'
            });

https://www.youtube.com/watch?v=IizSh-XYMYA&feature=youtu.be does not work :(

but by default 720p 60fps works https://www.youtube.com/watch?v=_q1dWKGGvic

muralikg commented 5 years ago

I have not done it myself. @abhishekgahlot can you please share your example here so that others can benefit from your work.

abhishekgahlot commented 5 years ago

@muralikg @Insayt I was AFK yesterday I think I was making 50fps video with current code.

@Insayt Can you tell me how much you are currently able to make and which OS or Xvfb version are you using?

navigator.webkitGetUserMedia({
            audio: false,
            video: {
              mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: streamId,
                minWidth: 1920,
                maxWidth: 1920,
                minHeight: 1080 ,
                maxHeight: 1080,
                minFrameRate: 60,
              }
            }
          }

Here is my code snippet I am using.

abhishekgahlot commented 5 years ago

@Insayt Also i do see 1080p option here: https://www.youtube.com/watch?v=IizSh-XYMYA&feature=youtu.be

Insayt commented 5 years ago

@abhishekgahlot I could not do 60 fps :(

I use docker container with Ubuntu 16.04 and last version Xvfb from

apt-get install xvfb
Insayt commented 5 years ago

The problem was in xvfb :)

abhishekgahlot commented 5 years ago

Great @Insayt, Glat that worked out for you!

somprabhsharma commented 5 years ago

@Insayt What was the problem in xvfb and how did you fix it? I am also unable to record video on 60fps.