feat: add camera utility with Picture-in-Picture support#134
Merged
Conversation
Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Deploying jam-dev-utilities with
|
| Latest commit: |
a1875f0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://797b3a93.jam-dev-utilities.pages.dev |
| Branch Preview URL: | https://devin-1767949829-camera-pip.jam-dev-utilities.pages.dev |
Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
The video element was not rendered when startCamera ran (status was 'requesting'), so videoRef.current was null when trying to set srcObject. Added a useEffect that connects the stream to the video element after the element is rendered. Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
- Use Canvas API to create a mirrored video stream - Both page preview and PIP now show the same mirrored view - Remove CSS transform since stream is now mirrored at source - Add proper cleanup for canvas and animation frame resources Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
- Use Document PIP API when available (Chrome 116+) - Creates a clean PIP window without scrub timeline or LIVE badge - Falls back to standard PIP API for other browsers - Add proper cleanup for Document PIP window Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
- Switch back to standard video.requestPictureInPicture() API - Controls (scrub timeline, LIVE badge) now auto-hide and only show on hover - No permanent title bar like Document PIP API had - Remove unused Document PIP code and refs Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
Co-Authored-By: petar@jam.dev <pekiseven@gmail.com>
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.
feat: add camera utility with Picture-in-Picture support
Summary
Adds a new camera utility at
/utilities/camthat allows users to access their webcam and enable Picture-in-Picture mode for a floating camera overlay that stays on top of all applications.Key features:
Note: As requested, this utility is NOT added to the tools list - it's only accessible via direct URL.
Updates since last revision
text-balanceto intro paragraph for nicer text wrapping.Review & Testing Checklist for Human
Recommended test plan:
/utilities/camNotes
Link to Devin run: https://app.devin.ai/sessions/94a7f5eed2c040b5a8b27f3ee7efacee
Requested by: @peckz