JavaScript AR Rectangle Overlay

I need a pure-JavaScript routine that runs directly in the browser and uses the device camera to recognise a rectangular sign in real time, whatever its orientation, and then pins a video onto that surface so it tracks perspective while the phone moves. The goal is an Augmented Reality effect that works from the first frame without any manual tap or pre-set coordinates.

Core requirements
• Automatic detection of a single, flat rectangle within an image (similar to document-scanner edge finding).
• Perspective-correct mapping of a supplied MP4/WebM so the video appears glued to the sign, updating every frame.
• Must be written entirely in JavaScript/TypeScript with no native wrappers; using WebGL, WebRTC, OpenCV.js, TensorFlow.js or similar is fine as long as everything ships in the browser.
• The same code should run on modern mobile browsers as well as desktop Chrome/Firefox without installing an app.

Deliverables
1. Well-commented source code and any build scripts.
2. A simple HTML demo page that lets me choose a local image andd local video file and shows the AR overlay live.
3. Setup notes covering library versions, permissions required and performance tips.
4. Brief testing report confirming that detection holds at typical handheld distances and maintains 20 fps or better on a mid-range phone.

If you already have experience with rectangle detection, homography, or WebGL texture mapping, this should be straightforward. I’m happy to answer technical questions quickly so we can keep momentum.