I'll create a mobile web app for a treasure hunt game that uses the phone camera and OpenCV.js for edge detection. Let's build this step by step:

This treasure hunt app uses the phone's rear camera and OpenCV.js to detect edges and find contours. Here's how it works:

1. Camera Access: The app accesses the rear camera using getUserMedia with facingMode: 'environment'

2. Image Processing:

   • Converts video frames to grayscale
   • Applies Gaussian blur to reduce noise
   • Uses Canny edge detection
   • Finds contours with findContours()

   • Filters contours by:

     • Flatness (≤ 6 points after approximation)
     • Minimum size (width or height > 100 pixels)

3. Treasure Display Logic:

   • Draws green outlines on qualified edges
   • Shows a treasure chest image at the center of the edge's bounding box
   • Only displays treasure with 50% probability
   • Implements a 5-second cooldown between treasures
   • Hides the treasure if no qualified edge is found

4. Technical Implementation:

   • Uses two canvases: one visible for drawing outlines and one hidden for processing
   • Loads OpenCV.js dynamically
   • Handles camera permissions and cleanup
   • Implements responsive design for mobile devices

To test this app, open it on a mobile device and grant camera permissions. Point your camera at objects with clear edges, and treasures will appear randomly when edges are detected.

Let me fix the code to address the "Script error" issue. The main problem is likely with how we're loading and using OpenCV.js.

I've fixed the "Script error" issue by making several important improvements:

Key Fixes:

1. Improved OpenCV.js Loading:

   • Added proper error handling for script loading
   • Added crossOrigin="anonymous" attribute to prevent CORS issues
   • Added verification that the cv object is actually available after loading

2. Better Error Handling:

   • Added try-catch blocks around OpenCV operations
   • Created a dedicated FallbackMessage component to display user-friendly errors
   • Added specific error states for OpenCV loading and camera access issues

3. Fixed Global Access to OpenCV:

   • Added TypeScript declarations for the global cv object
   • Changed all cv. references to window.cv. for more reliable access
   • Added checks to ensure OpenCV is available before using it

4. Enhanced Camera Handling:

   • Added verification that a camera exists before attempting to access it
   • Improved error handling for camera permissions and video playback
   • Added a retry mechanism for both OpenCV loading and camera access

5. Better User Experience:

   • Added more detailed loading and error states
   • Provided retry options when things go wrong
   • Improved the overall robustness of the application

These changes should resolve the script error while making the application more resilient to various failure scenarios that can occur when working with camera access and external libraries like OpenCV.js.