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

Jump to bottom

webcam: add nativeCameraFacingMode to Webcam and Dashboard #4047

Merged
merged 3 commits into from Aug 30, 2022
Merged

webcam: add nativeCameraFacingMode to Webcam and Dashboard #4047

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c36efe
Add nativeCameraFacingMode to Webcam and Dashboard
arturi Aug 26, 2022
8cf4cf6
Update docs and types
arturi Aug 30, 2022
8bac463
Update website/src/docs/webcam.md
aduh95 Aug 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@uppy/dashboard/src/Dashboard.jsx
View file
Open in desktop
Expand Up @@ -971,6 +971,7 @@ export default class Dashboard extends UIPlugin {
showSelectedFiles: this.opts.showSelectedFiles,
showNativePhotoCameraButton: this.opts.showNativePhotoCameraButton,
showNativeVideoCameraButton: this.opts.showNativeVideoCameraButton,
nativeCameraFacingMode: this.opts.nativeCameraFacingMode,
handleCancelRestore: this.handleCancelRestore,
handleRequestThumbnail: this.handleRequestThumbnail,
handleCancelThumbnail: this.handleCancelThumbnail,
Expand Down
14 changes: 9 additions & 5 deletions packages/@uppy/dashboard/src/components/AddFiles.jsx
View file
Open in desktop
Expand Up @@ -47,7 +47,7 @@ class AddFiles extends Component {
)
}

renderHiddenCameraInput = (type, refCallback) => {
renderHiddenCameraInput = (type, nativeCameraFacingMode, refCallback) => {
const typeToAccept = { photo: 'image/*', video: 'video/*' }
const accept = typeToAccept[type]

Expand All @@ -60,7 +60,7 @@ class AddFiles extends Component {
type="file"
name={`camera-${type}`}
onChange={this.onFileInputChange}
capture="user"
capture={nativeCameraFacingMode}
accept={accept}
ref={refCallback}
/>
Expand Down Expand Up @@ -275,14 +275,18 @@ class AddFiles extends Component {
}

render () {
const { showNativePhotoCameraButton, showNativeVideoCameraButton } = this.props
const {
showNativePhotoCameraButton,
showNativeVideoCameraButton,
nativeCameraFacingMode,
} = this.props

return (
<div className="uppy-Dashboard-AddFiles">
{this.renderHiddenInput(false, (ref) => { this.fileInput = ref })}
{this.renderHiddenInput(true, (ref) => { this.folderInput = ref })}
{showNativePhotoCameraButton && this.renderHiddenCameraInput('photo', (ref) => { this.mobilePhotoFileInput = ref })}
{showNativeVideoCameraButton && this.renderHiddenCameraInput('video', (ref) => { this.mobileVideoFileInput = ref })}
{showNativePhotoCameraButton && this.renderHiddenCameraInput('photo', nativeCameraFacingMode, (ref) => { this.mobilePhotoFileInput = ref })}
{showNativeVideoCameraButton && this.renderHiddenCameraInput('video', nativeCameraFacingMode, (ref) => { this.mobileVideoFileInput = ref })}
{this.renderDropPasteBrowseTagline()}
{this.renderSourcesList(this.props.acquirers, this.props.disableLocalFiles)}
<div className="uppy-Dashboard-AddFiles-info">
Expand Down
5 changes: 3 additions & 2 deletions packages/@uppy/webcam/src/Webcam.jsx
View file
Open in desktop
Expand Up @@ -98,7 +98,7 @@ export default class Webcam extends UIPlugin {
],
mirror: true,
showVideoSourceDropdown: false,
facingMode: 'user',
facingMode: 'user', // @TODO: remove in the next major
arturi marked this conversation as resolved.
Show resolved Hide resolved
preferredImageMimeType: null,
preferredVideoMimeType: null,
showRecordingLength: false,
Expand Down Expand Up @@ -595,12 +595,13 @@ export default class Webcam extends UIPlugin {
}

install () {
const { mobileNativeCamera, modes } = this.opts
const { mobileNativeCamera, modes, facingMode, videoConstraints } = this.opts

if (mobileNativeCamera) {
this.uppy.getPlugin('Dashboard').setOptions({
showNativeVideoCameraButton: isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'video-audio'),
showNativePhotoCameraButton: isModeAvailable(modes, 'picture'),
nativeCameraFacingMode: videoConstraints?.facingMode || facingMode,
})
return
}
Expand Down
3 changes: 3 additions & 0 deletions packages/@uppy/webcam/types/index.d.ts
View file
Open in desktop
Expand Up @@ -12,6 +12,9 @@ export interface WebcamOptions extends PluginOptions {
onBeforeSnapshot?: () => Promise<void>
countdown?: number | boolean
mirror?: boolean
/**
* @deprecated Use `videoConstraints.facingMode` instead.
*/
facingMode?: string
showVideoSourceDropdown?: boolean
modes?: WebcamMode[]
Expand Down
10 changes: 5 additions & 5 deletions website/src/docs/webcam.md
View file
Open in desktop
Expand Up @@ -64,15 +64,15 @@ uppy.use(Webcam, {
'picture',
],
mirror: true,
showVideoSourceDropdown: false,
facingMode: 'user', // @TODO: remove in the next major
aduh95 marked this conversation as resolved.
Show resolved Hide resolved
videoConstraints: {
facingMode: 'user',
width: { min: 720, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 800, max: 1080 },
},
showRecordingLength: false,
preferredVideoMimeType: null,
preferredImageMimeType: null,
mobileNativeCamera: isMobile(),
preferredVideoMimeType: null,
showRecordingLength: false,
mobileNativeCamera: isMobile({ tablet: true }),
locale: {},
})
```
Expand Down