diff --git a/src/plugins/Webcam/CameraScreen.js b/src/plugins/Webcam/CameraScreen.js index 08dfb38866..8f5409cd77 100644 --- a/src/plugins/Webcam/CameraScreen.js +++ b/src/plugins/Webcam/CameraScreen.js @@ -27,14 +27,13 @@ class CameraScreen extends Component { return (
-
{ this.btnContainer = el }}> {shouldShowSnapshotButton ? SnapshotButton(this.props) : null} {' '} {shouldShowRecordButton ? RecordButton(this.props) : null}
-
) } diff --git a/src/plugins/Webcam/index.js b/src/plugins/Webcam/index.js index 2642234434..e60e9eb43c 100644 --- a/src/plugins/Webcam/index.js +++ b/src/plugins/Webcam/index.js @@ -61,7 +61,9 @@ module.exports = class Webcam extends Plugin { 'video-only', 'audio-only', 'picture' - ] + ], + mirror: true, + facingMode: 'user' } // merge default options with the ones set by user @@ -108,7 +110,7 @@ module.exports = class Webcam extends Plugin { return { audio: acceptsAudio, - video: acceptsVideo + video: acceptsVideo ? { facingMode: this.opts.facingMode } : false } } @@ -125,8 +127,7 @@ module.exports = class Webcam extends Plugin { return this.mediaDevices.getUserMedia(constraints) .then((stream) => { this.stream = stream - console.log(stream) - this.streamSrc = URL.createObjectURL(this.stream) + // this.streamSrc = URL.createObjectURL(this.stream) this.setPluginState({ cameraReady: true }) @@ -191,7 +192,6 @@ module.exports = class Webcam extends Plugin { }) this.webcamActive = false this.stream = null - this.streamSrc = null } getVideoElement () { @@ -251,10 +251,23 @@ module.exports = class Webcam extends Plugin { const name = `webcam-${Date.now()}.jpg` const mimeType = 'image/jpeg' + const width = video.videoWidth + const height = video.videoHeight + + // const scaleH = this.opts.mirror ? -1 : 1 // Set horizontal scale to -1 if flip horizontal + // const scaleV = 1 + // const posX = this.opts.mirror ? width * -1 : 0 // Set x position to -100% if flip horizontal + // const posY = 0 + const canvas = document.createElement('canvas') - canvas.width = video.videoWidth - canvas.height = video.videoHeight - canvas.getContext('2d').drawImage(video, 0, 0) + canvas.width = width + canvas.height = height + const ctx = canvas.getContext('2d') + ctx.drawImage(video, 0, 0) + // ctx.save() // Save the current state + // ctx.scale(scaleH, scaleV) // Set scale to flip the image + // ctx.drawImage(video, posX, posY, width, height) // draw the image + // ctx.restore() // Restore the last saved state return canvasToBlob(canvas, mimeType).then((blob) => { return { @@ -313,7 +326,8 @@ module.exports = class Webcam extends Plugin { modes: this.opts.modes, supportsRecording: supportsMediaRecorder(), recording: webcamState.isRecording, - src: this.streamSrc + mirror: this.opts.mirror, + src: this.stream })) } diff --git a/src/scss/_webcam.scss b/src/scss/_webcam.scss index d0c4f99975..ef457e4959 100644 --- a/src/scss/_webcam.scss +++ b/src/scss/_webcam.scss @@ -1,8 +1,3 @@ -// @import '_variables.scss'; -// @import '_utils.scss'; -// @import '_animation.scss'; -// @import '_common.scss'; - .uppy-Webcam-container { width: 100%; height: 100%; @@ -12,20 +7,27 @@ } .uppy-Webcam-videoContainer { + width: 100%; height: 100%; - display: flex; - justify-content: center; - align-items: center; + // display: flex; + // justify-content: center; + // align-items: center; } + .uppy-Dashboard--wide .uppy-Webcam-videoContainer { + height: initial; + } + .uppy-Webcam-video { + width: 100%; + height: 100%; max-width: 100%; max-height: 100%; } -// .uppy-Webcam-canvas { -// display: none; -// } + .uppy-Webcam-video--mirrored { + transform: scaleX(-1); + } .uppy-Webcam-buttonContainer { position: absolute; diff --git a/website/src/docs/webcam.md b/website/src/docs/webcam.md index 42d7e7b9b4..c06585de82 100644 --- a/website/src/docs/webcam.md +++ b/website/src/docs/webcam.md @@ -5,8 +5,9 @@ title: "Webcam" permalink: docs/webcam/ --- +The Webcam plugin lets you take photos and record videos with a built-in camera on desktop and mobile devices. -[Try it live](/examples/dashboard/) - The Informer is included in the Dashboard by default. +[Try live!](/examples/dashboard/) ## Options @@ -20,6 +21,8 @@ uppy.use(Webcam, { 'audio-only', 'picture' ], + mirror: true, + facingMode: 'user', locale: { strings: { smile: 'Smile!' @@ -52,6 +55,20 @@ The types of recording modes to allow. By default, all modes are allowed, and the Webcam plugin will show controls for recording video as well as taking pictures. +### `mirror: true` + +Whether to mirror preview image from the camera. This option is useful when taking a selfie with a front camera: when you wave your right hand, you will see your hand on the right on the preview screen, like in the mirror. But when you actually take a picture, it will not be mirrored. This is how smartphone selfie cameras behave. + +### `facingMode: 'user'` + +Devices sometimes have multiple cameras, front and back, for example. There’s a browser API to set which camera will be used, [facingMode](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode): + +- `user`: The video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone. +- `environment`: The video source is facing away from the user, thereby viewing their environment. This is the back camera on a smartphone. +- `left`: The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder. +- `right`: The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder. + + ### `locale: {}` There is only one localizable string: `strings.smile`. It's shown before a picture is taken, when the `countdown` option is set to true.