Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement mirrored video feature for createCapture (#6441) #6703

Merged
merged 5 commits into from
Feb 27, 2024
Merged

Implement mirrored video feature for createCapture (#6441) #6703

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
74eae46
Feat: Support mirrored video for createCapture
Vishal2002 Jan 6, 2024
cc1c634
feat:Mirrored video feature is updated
Vishal2002 Jan 10, 2024
3e47842
Updated the doc with example and also worked on the suggestion
Vishal2002 Jan 15, 2024
62fae2d
Enhancment in the Flipped Feature
Vishal2002 Jan 21, 2024
a300d25
Update src/dom/dom.js
davepagurek Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions src/dom/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2135,7 +2135,11 @@ if (navigator.mediaDevices.getUserMedia === undefined) {
* W3C documentation</a> for possible properties. Different browsers support different
* properties.
*
* The second parameter, `callback`, is optional. It's a function to call once
* The 'flipped' property is an optional property which can be set to `{flipped:true}`
* to mirror the video output.If it is true then it means that video will be mirrored
* or flipped and if nothing is mentioned then by default it will be `false`.
*
* The second parameter,`callback`, is optional. It's a function to call once
* the capture is ready for use. The callback function should have one
* parameter, `stream`, that's a
* <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" target="_blank">MediaStream</a> object.
Expand All @@ -2148,6 +2152,8 @@ if (navigator.mediaDevices.getUserMedia === undefined) {
* @param {String|Constant|Object} [type] type of capture, either AUDIO or VIDEO,
* or a constraints object. Both video and audio
* audio streams are captured by default.
* @param {Object} [flipped] flip the capturing video and mirror the output with `{flipped:true}`. By
* default it is false.
* @param {Function} [callback] function to call once the stream
* has loaded.
* @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
Expand Down Expand Up @@ -2183,6 +2189,19 @@ if (navigator.mediaDevices.getUserMedia === undefined) {
* }
* </code>
* </div>
* <div class='notest'>
* <code>
* let capture;
*
* function setup() {
* // Create the video capture with mirrored output.
* capture = createCapture(VIDEO,{ flipped:true });
* capture.size(100,100);
* describe('A video stream from the webcam with flipped or mirrored output.');
* }
*
* </code>
* </div>
*
* <div class='notest norender'>
* <code>
Expand Down Expand Up @@ -2227,11 +2246,12 @@ p5.prototype.createCapture = function(...args) {
if (arg === p5.prototype.VIDEO) useAudio = false;
else if (arg === p5.prototype.AUDIO) useVideo = false;
else if (typeof arg === 'object') {
constraints = arg;
flipped = constraints.flipped || false;
}
else if (typeof arg === 'boolean') {
flipped = arg;
// Check if the argument is an object with a 'flipped' property
if (arg.flipped !== undefined) {
flipped = arg.flipped;
} else {
constraints = arg;
Copy link
Contributor

Choose a reason for hiding this comment

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

Right now I think this means we either can provide flipped, or we can provide constraints on the capture size. I think we want to support both at once, but just with the flipped arg removed. Maybe something like:

if (arg.flipped !== undefined) {
  flipped = arg.flipped;
}
constraints = { ...arg };
delete constraints.flipped;

}
}
else if (typeof arg === 'function') {
callback = arg;
Expand Down