feat: add hardware camera device selection for video preview

[vivek0028]

🚀 Program

GSSoC

📝 Description

This PR adds a hardware camera device selection dropdown to the VoiceForge Call interface, allowing users to dynamically switch between multiple connected cameras, such as a laptop's built-in webcam, an external USB webcam, or a virtual camera.

Previously, Call.jsx used:

navigator.mediaDevices.getUserMedia({ video: true })

which relies on the browser's default camera. This can be limiting for users with multiple cameras, including streamers, professionals, and users working with virtual cameras such as OBS Virtual Camera.

Changes Made

• New DeviceSelector component: Added an accessible native <select> dropdown in client/src/components/DeviceSelector.jsx, styled to match the existing Tailwind light/dark theme.
• Dynamic device enumeration: Updated Call.jsx to retrieve available video input devices using navigator.mediaDevices.enumerateDevices().
• Hot-plugging support: Added a devicechange listener so the camera list automatically refreshes when a camera is connected or disconnected.
• Camera switching: Updated openCamera to accept the selected device ID and request the specific camera using the deviceId constraint.
• Stream cleanup: Existing video tracks are stopped before starting the newly selected camera, preventing multiple camera streams from remaining active.

🔗 Related Issue

Closes #1061

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🎨 Style / UI improvement
• ♿ Accessibility improvement
• 🔍 SEO improvement
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

🧪 How to Test

1. Run the project locally and open http://localhost:5173 in a browser.
2. Navigate to the Call page.
3. Connect a secondary webcam or enable a virtual camera such as OBS Virtual Camera.
4. Verify that the new camera dropdown appears near the Live webcam section.
5. Select a different camera from the dropdown.
6. Verify that the current camera stream stops and the video preview switches to the selected camera.
7. While the page is running, connect or disconnect a USB webcam.
8. Verify that the camera dropdown automatically updates to reflect the available devices.
9. Confirm that the existing video/call functionality continues to work correctly.

📸 Screenshots (if applicable)

✅ Checklist

• I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format (e.g. feat: add voice preview)

---

Summary by cubic

Adds a hardware camera selector to the Call page so users can pick and switch between webcams on the fly. The preview targets the selected device, updates when cameras are plugged/unplugged, and shows a retry option on errors.

• New Features
  • Added DeviceSelector with an accessible dropdown; lists video inputs via navigator.mediaDevices.enumerateDevices(), refreshing on devicechange.
  • Camera switching now uses getUserMedia({ video: { deviceId } }) and stops previous tracks to prevent leaks.
  • Auto-selects the active stream’s device when available; added “Retry Camera” button for quick recovery.
  • Minor UI tweak: added a “Clear” button to TextToSpeech.

^{Written for commit cf3d8ef. Summary will update on new commits.}

[vercel]

@vivek0028 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]

Warning

Review limit reached

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

Next review available in: 36 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: 4a1762ab-b95a-4adb-b11a-ba19f831ff58

📥 Commits

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

📒 Files selected for processing (3)

• client/src/components/DeviceSelector.jsx
• client/src/components/TextToSpeech.jsx
• client/src/pages/Call.jsx

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

✍️ DCO Sign-off Needed

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

Warning

• 387ccc4 fix: resolve postcss unclosed block error and add UI enhancements
• 664c9c8 Merge pull request: resolved conflict in Call.jsx
• cf3d8ef feat: add hardware camera device selection for video preview

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]

🎉 PR Ready for Mentor Review

Hey @vivek0028! 👋 Your PR passed all checks and is now in the GSSoC review queue.

Note

🔗 Closing: #1061 · 📐 198 lines across 3 file(s) · 📬 Review requested

@sabeenaviklar @Anushreebasics @itsdakshjain @snehkris @1754riya @Mrigakshi-Rathore @Itzzavdheshh @Nitya-003 @4f4d @lovestaco, this PR is ready for your review — please confirm scope, check behavior and tests, then approve or request changes.

Important

This is not an approval. Please wait for mentor feedback before expecting a merge. If changes are requested, push them to this same branch and keep the PR focused on the linked issue.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[cubic-dev-ai]

All reported issues were addressed across 3 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[github-actions]

🎊 PR Merged Successfully

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

Note

🔗 Linked issue(s): #1061 · ✅ 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}

[itsdakshjain]

Lgtm