feat: comprehensive mobile optimizations for ASCII component#1
Open
feat: comprehensive mobile optimizations for ASCII component#1
Conversation
- Add useCallback to memoize startCamera and stopCamera functions - Include missing dependencies in all useEffect hooks - Add useCallback import - All linter warnings now resolved
- Add mobile detection helper function - Disable CanvasKit/Skia loading on mobile (prevents WASM crashes) - Use low-power GPU preference on mobile devices - Lower camera resolution on mobile (640x480 vs 1280x720) - Reduce model scale for mobile (300 vs 400) - Cap DPR multiplier to prevent excessive granularity - Add WebGL error handling with fallback UI - Disable FontEditor on mobile for better performance - Set failIfMajorPerformanceCaveat to true for graceful degradation - Increase default granularity on mobile for better performance These changes should resolve Vercel mobile deployment errors and improve overall mobile compatibility.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
- Skip CanvasKit loading entirely on mobile devices - Set skiaReady=true immediately on mobile (no visual overlay needed) - Hand tracking functionality preserved without 2.9MB graphics library - Camera + depth detection + granularity control all work on mobile - Desktop keeps full CanvasKit visual feedback - Eliminates mobile crashes from heavy WASM library loading Mobile now gets: ✅ Full camera → ASCII effect ✅ Hand distance → granularity control ✅ Fast loading (no 2.9MB download) ❌ No visual hand landmark overlay (not needed)
- Keep rapid hand tracking granularity updates (core feature) - Skip history.replaceState on mobile to avoid SecurityError - Safari iOS limits replaceState to 100 calls per 10 seconds - Hand gesture control remains real-time and responsive - Desktop keeps URL parameter sharing functionality Fixes: 'Attempt to use history.replaceState() more than 100 times per 10 seconds'
- Add productionBrowserSourceMaps: false to prevent CORS errors - Source map loading failures don't affect functionality - Cleaner console experience on mobile Safari - App functionality fully working on mobile
- Add global unhandledrejection handler to catch async errors - Wrap video.play() in try-catch to handle autoplay failures - Add error handlers for video loading and WebGL context creation - Wrap hand tracking callbacks in try-catch blocks - Prevent promise rejections from bubbling up as unhandled errors - Graceful error logging instead of app crashes Fixes: 'Unhandled Promise Rejection: AbortError: The operation was aborted'
- Wait for oncanplay instead of onloadedmetadata before enabling hand tracking - Add video dimension validation before creating VideoTexture - Prevent hand tracking from processing 0x0 video frames - Add fallback timeout in case oncanplay doesn't fire - Comprehensive video readiness checks to prevent MediaPipe ROI errors Fixes: - 'WebGL: INVALID_VALUE: texImage2D: no video' - 'ROI width and height must be > 0' MediaPipe errors - Hand tracking processing invalid video frames
- Resolves linter warning about missing dependency in useEffect hook - Ensures startCamera is properly memoized with correct dependencies
- Add CORS headers for .glb/.gltf files in Next.js config - Fix optional chaining for texture.isVideoTexture check - Add comprehensive GLB loading error handling and progress tracking - Improve camera stream debugging with detailed logging - Add front/back camera direction selector (keeps cameraFacing dependency despite linter warning) Fixes: 'Fetch API cannot load cutest-penguin-astronaut.glb due to access control checks'
- Add visual debug overlay showing camera/video/texture state - Add debug mode toggle to show raw video without ASCII processing - Add red debug plane to visualize when texture exists but may not be visible - Comprehensive console logging for camera pipeline (stream → video → texture) - Debug ASCII effect inputs (granularity, viewport, DPR) - Track texture state changes with detailed video texture info Debug features: ✅ Visual overlay with real-time camera state ✅ Raw video mode (bypasses ASCII effect) ✅ Console logging for entire video pipeline ✅ Texture validation and dimension tracking This will help isolate if the issue is in video creation vs ASCII processing.
- Add webpack config to disable devtool/source maps in production builds - Remove source map headers since we're blocking generation entirely - Prevents 403 errors for sdk.js.map and other third-party source maps - MediaPipe and other dependencies won't generate problematic .map files Fixes: 'Failed to load resource: the server responded with a status of 403 (sdk.js.map)' Source maps now completely disabled in production for cleaner mobile experience.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
These changes should resolve Vercel mobile deployment errors and improve overall mobile compatibility.