Skip to content

Fix/canvas invalid state - #1148

Merged
Itzzavdheshh merged 16 commits into
itzzavdhesh:mainfrom
desireddymohithreddy0925:fix/canvas-invalid-state
Aug 13, 2026
Merged

Fix/canvas invalid state#1148
Itzzavdheshh merged 16 commits into
itzzavdhesh:mainfrom
desireddymohithreddy0925:fix/canvas-invalid-state

Conversation

@desireddymohithreddy0925

@desireddymohithreddy0925 desireddymohithreddy0925 commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

🐛 Bug Fix Description

This PR fixes a critical crash in the Virtual Camera's render loop where abruptly disconnecting a webcam (or losing hardware priority) caused continuous InvalidStateError exceptions, spiking CPU usage and flooding the browser console.

Fixes #747

💡 Proposed Solution

  • Added a strict conditional guard to check that video.readyState === video.HAVE_ENOUGH_DATA (4) before calling context.drawImage(video).
  • If the video is completely disconnected or drops below a ready state of 4, the canvas rendering loop gracefully skips the draw cycle and falls back appropriately.

✅ Acceptance Criteria

  • Canvas draw loop checks the video.readyState property before attempting to draw.
  • Render loop pauses or falls back gracefully without throwing exceptions when the stream drops.
  • CPU usage and console flooding are prevented.

🌱 Contributor Checklist

  • I am participating via GSSoC
  • I have read the contribution guidelines
  • I checked for existing issues before creating this

Summary by cubic

Fixes a crash in the virtual camera render loop by guarding canvas draws and scheduling frames with requestVideoFrameCallback, preventing InvalidStateError spikes when the webcam disconnects. Also adds Docker-based development and CI lint/format checks to improve reliability and DX.

  • Bug Fixes

    • Guard context.drawImage(video) behind video.readyState === video.HAVE_ENOUGH_DATA; skip/pause when below 4 and resume cleanly on reconnect.
    • Move preview rendering to requestVideoFrameCallback and harden cleanup to avoid stale video/canvas refs.
    • Prevent CPU spikes and console flooding; improve virtual camera status messaging and update tests around stream drops.
  • New Features

    • Add Dockerfile and docker-compose.yml for local dev; enable Vite host: true.
    • Introduce repo linting with eslint, prettier, .editorconfig, .lintstagedrc, and a GitHub Action; apply Prettier formatting across the repo.
    • Add keyboard navigation for voice tuning sliders and small accessibility/copy improvements across UI.
    • Add @gradio/client type definitions and tighten voice clone/speak flow with cache checks and clearer errors.

Written for commit 6a2403b. Summary will update on new commits.

Review in cubic

@vercel

vercel Bot commented Jul 25, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@desireddymohithreddy0925, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 11 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d1378942-bcfd-495d-a6e4-14308048946b

📥 Commits

Reviewing files that changed from the base of the PR and between e915118 and 6a2403b.

⛔ Files ignored due to path filters (2)
  • package-lock.json is excluded by !**/package-lock.json
  • server/data/voiceforge.db is excluded by !**/*.db
📒 Files selected for processing (88)
  • .editorconfig
  • .github/ISSUE_TEMPLATE/elusoc_bug_report.md
  • .github/ISSUE_TEMPLATE/elusoc_feature_request.md
  • .github/ISSUE_TEMPLATE/gssoc_bug_report.md
  • .github/ISSUE_TEMPLATE/gssoc_feature_request.md
  • .github/ISSUE_TEMPLATE/nsoc_bug_report.md
  • .github/ISSUE_TEMPLATE/nsoc_feature_request.md
  • .github/ISSUE_TEMPLATE/ssoc_bug_report.md
  • .github/ISSUE_TEMPLATE/ssoc_feature_request.md
  • .github/PULL_REQUEST_TEMPLATE.md
  • .github/PULL_REQUEST_TEMPLATE/elusoc.md
  • .github/PULL_REQUEST_TEMPLATE/gssoc.md
  • .github/PULL_REQUEST_TEMPLATE/nsoc.md
  • .github/PULL_REQUEST_TEMPLATE/ssoc.md
  • .github/workflows/lint.yml
  • .github/workflows/mentor-merge-eligibility.yml
  • .github/workflows/pr-review-handler.yml
  • .lintstagedrc
  • CONTRIBUTING.md
  • Dockerfile
  • README.md
  • client/index.html
  • client/postcss.config.js
  • client/public/404.html
  • client/src/App.jsx
  • client/src/components/AudioTrimmer.jsx
  • client/src/components/FavoriteMessages.jsx
  • client/src/components/Footer.jsx
  • client/src/components/KeyboardShortcutsModal.jsx
  • client/src/components/LanguageSelector.jsx
  • client/src/components/MessageCard.jsx
  • client/src/components/PrivacyModeToggle.jsx
  • client/src/components/ProfileCard.jsx
  • client/src/components/QuickReplies.jsx
  • client/src/components/ReceiveProfileModal.jsx
  • client/src/components/ScrollToBottomButton.jsx
  • client/src/components/ScrollToTopButton.jsx
  • client/src/components/ShareProfileModal.jsx
  • client/src/components/SpeechHistory.jsx
  • client/src/components/TextToSpeech.jsx
  • client/src/components/ThemeContext.jsx
  • client/src/components/VideoPreview.jsx
  • client/src/components/VoiceForge.jsx
  • client/src/components/VoiceQuickSettings.jsx
  • client/src/components/VoiceRecorder.jsx
  • client/src/components/useToast.jsx
  • client/src/hooks/useSpeechHistory.js
  • client/src/hooks/useTTS.js
  • client/src/hooks/useVirtualCamera.js
  • client/src/hooks/useVoiceClone.js
  • client/src/main.jsx
  • client/src/pages/About.jsx
  • client/src/pages/Analytics.jsx
  • client/src/pages/Call.jsx
  • client/src/pages/Contributors.jsx
  • client/src/pages/Onboarding.jsx
  • client/src/pages/PrivacyPolicy.jsx
  • client/src/pages/Settings.jsx
  • client/src/styles.css
  • client/src/utils/audioExtractor.js
  • client/src/utils/audioProcessor.js
  • client/src/utils/db.js
  • client/src/utils/faceProcessor.js
  • client/src/utils/formatTime.js
  • client/src/utils/languages.js
  • client/src/utils/pitchShifter.js
  • client/src/utils/voiceSettings.js
  • client/src/utils/voiceSettings.test.js
  • client/src/utils/wavEncoder.js
  • client/src/utils/webrtc.js
  • client/tailwind.config.js
  • client/vite.config.js
  • docker-compose.yml
  • docs/virtual-camera.md
  • eslint.config.js
  • package.json
  • playwright.config.js
  • pr_body.md
  • server/controllers/voiceController.js
  • server/index.js
  • server/jsconfig.json
  • server/middleware/upload.js
  • server/routes/voice.js
  • server/test/helpers.js
  • server/test/voiceController.mock-mode.test.js
  • server/test/voiceController.secure-id.test.js
  • server/types/gradio.d.ts
  • tests/permissions.spec.js
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 25, 2026

Copy link
Copy Markdown

✍️ DCO Sign-off Needed

Hey @desireddymohithreddy0925! 👋 One or more commits in this PR are missing a Signed-off-by: line.

Warning

How to fix:

For the latest commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits, replace N with the number to update:

git rebase --signoff HEAD~N
git push --force-with-lease

This comment will update automatically after you push.


🤖 VoiceForge Automation · Updates automatically on edits

@github-actions

Copy link
Copy Markdown

🛠️ PR Needs Updates

Hey @desireddymohithreddy0925! 👋 A few things need fixing before a mentor can review this PR.

Warning

  • Select a program PR template: GSSoC, NSOC, SSOC, or ELUSOC.
  • Use the mandatory VoiceForge PR template and keep all required sections.
  • Use a clear PR title, for example feat: add voice preview or [feature]: add voice preview.
  • This PR changes 90 files. VoiceForge keeps contributor PRs focused, so please recheck the changed files and reduce the PR to 13 files or fewer unless a maintainer explicitly approves the larger scope.

How to fix:

  • PR template: Use one complete program PR template and keep all required sections.
  • PR title: Use a clear title like fix: update onboarding progress bar or [bug refactor]: replace pending stream cache.
  • Large PR: Please recheck the changed files, remove accidental edits, and keep this contribution polished and focused on one approved issue. If the larger scope is truly needed, ask a mentor before continuing.
  • Program: Choose exactly one program: GSSoC, NSOC, SSOC, or ELUSOC.

Once fixed, the workflow re-runs automatically and pings the right mentor.


🤖 VoiceForge Automation · Updates automatically on edits

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed against the latest diff

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread client/src/utils/faceProcessor.js
Comment thread Dockerfile
Comment thread package.json
Comment thread Dockerfile
Comment thread eslint.config.js
Comment thread server/jsconfig.json
Comment thread client/src/components/VoiceQuickSettings.jsx
Comment thread client/src/components/VideoPreview.jsx
Comment thread .github/workflows/lint.yml
Comment thread package.json
@Itzzavdheshh

Copy link
Copy Markdown
Contributor

Hi @desireddymohithreddy0925 Your PR has Branch Conflict please resolve them and ping me after! Thanks

@Itzzavdheshh
Itzzavdheshh merged commit 4c54789 into itzzavdhesh:main Aug 13, 2026
9 of 13 checks passed
@github-actions

Copy link
Copy Markdown

❌ Merge Policy Violation

Caution

Unauthorized Merge — Pull request #1148 was merged by @Itzzavdheshh (mentor) without any review on record.

VoiceForge guidelines require contributors/mentors to submit at least one review (approval, comment, or changes requested) before merging a pull request to ensure code quality and point-tracking integrity.

📊 Violation Summary

Parameter Details
Merged By @Itzzavdheshh (mentor)
Review Count 0 reviews on record
PR Author @desireddymohithreddy0925
PR Number #1148

⚠️ Action Required (@itzzavdhesh):

  • Please review the merged code for quality and scope.
  • Consider reverting the merge if it was done inappropriately.
    • Ensure your repository ruleset or branch protection rules are active.

🤖 VoiceForge Automation

@github-actions

Copy link
Copy Markdown

🎊 PR Merged Successfully

Hey @desireddymohithreddy0925! 👋 Congratulations and thank you for your contribution to VoiceForge!

Note

🔗 Linked issue(s): #747 · ✅ Marked as merged and complete

Maintainers may still handle final cleanup, release notes, or follow-up tracking after the merge.


🤖 VoiceForge Automation · Updates automatically on edits

@itzzavdhesh itzzavdhesh added gssoc:approved Gssoc type:accessibility type SSoC26 SSOC Hard hard ELUSOC ELUSOC VETERAN VETERAN type:bug type:bug type:feature type:feature type:performance type:performance type:refactor type:refactor quality:clean quality:clean labels Aug 13, 2026
@Itzzavdheshh Itzzavdheshh added the level:advanced level:advanced label Aug 13, 2026
@itzzavdhesh itzzavdhesh added mentor:Anushreebasics GSSoC: Mentor-@Anushreebasics mentor:sabeenaviklar GSSoC: Mentor-@sabeenaviklar mentor:itsdakshjain GSSoC: Mentor-@itsdakshjain mentor:Nitya-003 Applied by mentor automation gssoc26 gssoc26 labels Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci client completed dco-missing documentation Improvements or additions to documentation ELUSOC ELUSOC gssoc:approved Gssoc gssoc26 gssoc26 Hard hard large PR level:advanced level:advanced mentor:Anushreebasics GSSoC: Mentor-@Anushreebasics mentor:itsdakshjain GSSoC: Mentor-@itsdakshjain mentor:Nitya-003 Applied by mentor automation mentor:sabeenaviklar GSSoC: Mentor-@sabeenaviklar merged needs-template needs-template needs-title pr-merged quality:clean quality:clean server size/xl SSoC26 SSOC type:accessibility type type:bug type:bug type:feature type:feature type:performance type:performance type:refactor type:refactor VETERAN VETERAN

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Canvas drawImage throws InvalidStateError if video feed drops.

3 participants