Search code examples
google-chromeresponsive-designscreen-capturescreen-recording

Screen Record Full Resolution Chrome Mobile Responsive Screen


I'm trying to record our software in Chrome's mobile device emulator. The resolution for the hypothetical device is 1080 x 1920 (vertical orientation). I would like to be able to just record the emulation screen at full resolution. I know I could record my entire screen and just crop for the window showing the software, but then it does not record at the proper 1080 x 1920 resolution and looks blurry. Does anyone have any methods for recording just the emulation screen at full size?

Essentially, I want to record the red boxed area in full resolution (which should be 1080 x 1920) Chrome Screen Emulation Window

Thank you in advance!!


Solution

  • well, you can't "record" it in 1920/1080 because it literally isn't in that resolution. those pixels don't exist.

    A few ideas come to mind -

    • Record on a 4k (or higher) monitor, the same area will have more pixels.

    • Literally rotate you display and record it in the correct orientation ("portrait"). it will be able to occupy MUCH more screen area, and the cropped-out area will be significantly smaller. therefore, the video dimensions will still be large.

      • Move away the console (un-dock or just close), make sure the emulator is taking up as much space as possible.
    • Verify you're recording (and editing and exporting) in the highest resolution possible. that's how it looks like in obs studio:

    obs studio

    Maybe use a Virtual Machine if you don't wanna mess up your desktop environment?