Crash with improperly cropped replay output

[zooki2006]

I ran npm install in my git clone of this repo(my /home/zuki/src/ShowdownReplayDownloader dir) then
node download.js --nochat --noaudio -l https://replay.pokemonshowdown.com/gen9nationaldexubers-1962139555 the output of this command is at the bottom of this issue.

I did get a output replay file as the log suggests, a compressed version of the video is bellow it has black bars embeded into the video at the top and bottom a little bit of the chat embeded and and little bit bellow that should have been cropped out.
The audio of the replay was played when recording as well although I don't know if thats how it works on all systems.

output.mp4

Opened replay SacredStar3 vs zooki18 (gen9nationaldexubers)
Saving Replay..  (this may take a while.. preferably not more than 1.28 minutes)
[*estimates are calced at normal speed*]
Finished recording https://replay.pokemonshowdown.com/gen9nationaldexubers-1962139555
Recording Saved!
Location -> replays/replay-4k7ublc0ztumbi.webm
Thankyou for utilising Showdown Replay Downloader!!
/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:138
            this._reject(callback, new Errors_js_1.TargetCloseError('Target closed'));
                                   ^

TargetCloseError: Protocol error (Runtime.callFunctionOn): Target closed
    at CallbackRegistry.clear (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:138:36)
    at CDPSessionImpl._onClosed (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:451:25)
    at Connection.onMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:248:25)
    at WebSocket.<anonymous> (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/NodeWebSocketTransport.js:52:32)
    at callListener (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/event-target.js:290:14)
    at WebSocket.onMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/event-target.js:209:9)
    at WebSocket.emit (node:events:514:28)
    at Receiver.receiverOnMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/websocket.js:1184:20)
    at Receiver.emit (node:events:514:28)
    at Receiver.dataMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/receiver.js:541:14)

Node.js v20.8.0

[Intenzi]

Hi zooki, thankyou for the detailed report.

1. For the audio playing while its recording, this occurs due to the app not recording the audio as you added --noaudio flag. I might have to look into muting the tab via puppeteer to resolve that!
   If you try to record with audio, you won't hear any of the sound while recording a replay.

2. I apologise that you had to deal with the replay being improperly cropped.
   I have only utilized my system to test the cropping of recordings. Upon running your given command node download.js --nochat --noaudio -l https://replay.pokemonshowdown.com/gen9nationaldexubers-1962139555
   My output (compressed) is:-

8mb.video-Kof-aO2rmtJK.mp4

I have looked it up, and it might be because my system's display resolution (1920 x 1080) is different from yours.
Please let me know your screen resolution.
In order to have it be dynamic I am going to require your assistance to test out a possible solution
In download.js file, please go to line 262 and have defaultViewport be null
this is how it should be looking:-

In-case it doesn't have any result for you, you can manually change the dimensions of your recording till they crop to your liking as a last resort. (--window-size=${!nochat ? 1187 : 647},545) The 647 width and 545 height values might need tweaking for you. For example 640 height and 535 width.

3. Lastly, the error you have received upon completing the recording has been noticed by me.
   It seems to have something to do with race condition.
   Rest assured, it doesn't impact the recording and is only a bug that occurs because the code has completed its task and is trying to close. I am actively checking a fix for it, feel free to look into it if you'd like to as well.

[zooki2006]

Thanks for your response.

1. thanks for the info about the audio playback its quite odd that the sound of the battle plays in the background if you have the "--noaudio" but not if you don't.
2. My resolution is 2560X1440 and I changed the view port code in line 262(with null) and it outputted the following video and the log at the bottom of the page.

output.mp4

3. overriding the window size with 640*535 gives this output I should try tweaking with more values later.

output.mp4

Opened replay SacredStar3 vs zooki18 (gen9nationaldexubers)
Saving Replay..  (this may take a while.. preferably not more than 1.28 minutes)
[*estimates are calced at normal speed*]
Finished recording https://replay.pokemonshowdown.com/gen9nationaldexubers-1962139555
Recording Saved!
Location -> replays/replay-w1luojutiomm89.webm
Thankyou for utilising Showdown Replay Downloader!!
/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:138
            this._reject(callback, new Errors_js_1.TargetCloseError('Target closed'));
                                   ^

TargetCloseError: Protocol error (Runtime.callFunctionOn): Target closed
    at CallbackRegistry.clear (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:138:36)
    at CDPSessionImpl._onClosed (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:451:25)
    at Connection.onMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:248:25)
    at WebSocket.<anonymous> (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/lib/cjs/puppeteer/common/NodeWebSocketTransport.js:52:32)
    at callListener (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/event-target.js:290:14)
    at WebSocket.onMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/event-target.js:209:9)
    at WebSocket.emit (node:events:514:28)
    at Receiver.receiverOnMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/websocket.js:1184:20)
    at Receiver.emit (node:events:514:28)
    at Receiver.dataMessage (/home/zuki/src/ShowdownReplayDownloader/node_modules/puppeteer-core/node_modules/ws/lib/receiver.js:541:14)

Node.js v20.8.0

[Intenzi]

From what I can tell of puppeteer (after another day's of research), the viewport helps it maintain the same screen resolution across various systems.
Not sure why my pr closed this issue. I've created PR #2 to resolve the background audio issue (point number 1).

I'll be testing a possible fix for improper cropping by setting viewport on new page creation.
Although it is mostly still a mystery for the black bars at the top and bottom of the recording. The only place I have noticed for them to occur with my system is by recording the chat as well (shown in discord bot demonstration video in readme).

[Intenzi]

Hello zooki, I have created the branch https://github.com/Intenzi/ShowdownReplayDownloader/tree/1-scale-resolution to serve as a fix for recording under varying screen resolutions.
Let me know over here whether it works for you, I'll then open a pr for it.