twitch VCR notes.md

People are asking how I bootleg the FORGOTTEN_VCR Twitch stream to VHS so here is how I do it:

• Get a hardware thingy that lets you convert HDMI to composite video to connect to your VCR. I personally use a zombie-RCA-branded adapter, model DHCOMF. I paid way too much for mine ($55 at Micro Center) but you can probably find it cheaper elsewhere. There are tons of other cheap Chinese ones out there but what I like about this particular one is that it doesn't require external power, you just plug in HDMI and go. It's also more portable than the others, and seems somewhat better quality.

• These adapters usually have two video resolutions available: 640x480 and 720x480. Technical note here: 720x480 is the "standard" digital resolution for an NTSC video signal. But here's the tricky part! If you do the math, you'll notice that 720x480 is a 3:2 aspect ratio, while a TV screen is 4:3 aspect ratio. This means that the pixels in the video image are not square! On the RCA adapter at least, there is no attempt made by the adapter (or Windows) to compensate for this. On some other adapters I've seen, you can set 640x480 resolution and get square pixels and you're fine. Otherwise your picture is going to be squished horizontally somewhat. I'm assuming you're set to 720x480.

• Okay, so how to crop the Twitch stream? I use the browser extension Stylus to inject extra CSS onto the page appropriately: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

There's also a Firefox version if you swing that way. Anyways, here's the CSS to put in there. I trust you can figure out the rest of the Stylus options:

.video-player video {
    width: 853px;
    transform-origin: 0 0;
    transform: translate(-148px, 0) scale(1.19, 1.0);
}

• This CSS isn't perfect, so adjust as necessary. The translate() bit shifts the framing horizontally. The scale() is where I compensate for the aspect ratio. Note that if you do the math, the X scale should actually be 1.125 (720 / 640). I fudged it a bit because the framing was a bit off, and this is why my aspect ratio is a bit wrong. Tweak these as necessary. Stylus has a "Live preview" feature that's handy.

• I feel I should add a little extra technical explanation here: Twitch seems to have some JS code that automatically resizes the video while preserving the aspect ratio. Therefore the width: 853px; scales the video to 853x480 pixels, which is 16:9 aspect (you can probably also change this to height: 480px; for the same effect). The transform CSS property isn't affected by this mystery script, and takes effect afterwards, so this is where the magic happens.

• Note that this will totally screw up your "normal" view of the Twitch stream, it only works in fullscreen. How to avoid this is left as an exercise to the reader.

Anyways, that's it! Have fun!