Camera options in @uppy/react Dashboard

[rafcontreras]

Hi there, I can't seem to be able to set camera options.

I'm trying to enable only photos and no video or audio. And I can't seem to be able to pass this props.

Here is my code

import React, { Component, Fragment } from "react";
import Uppy from "@uppy/core";
import Webcam from "@uppy/webcam";
import { Dashboard } from "@uppy/react";
import Helmet from "react-helmet";

class AvatarPicker extends Component {
 constructor(props) {
   super(props);

   this.uppy = Uppy({
     id: "uploader",
     autoProceed: false,
     allowMultipleUploads: true,
     debug: false,
     restrictions: {
       maxFileSize: null,
       maxNumberOfFiles: 1,
       minNumberOfFiles: 1,
       allowedFileTypes: ["image/*", ".jpg", ".jpeg", ".png", ".gif"]
     }
   })
     .use(Webcam)
     .use(Webcam, {
       countdown: true,
       modes: ["picture"],
       id: "webcam"        
     });
 }

 componentWillUnmount() {
   this.uppy.close();
 }

 render() {
   return (
     <Fragment>
       <Helmet>
         <link href="/css/uppy/main.css" rel="stylesheet" type="text/css" />
       </Helmet>
       <Dashboard
         plugins={["Webcam"]}
         uppy={this.uppy}
       />
     </Fragment>
   );
 }
}

export default AvatarPicker;

[kvz]

Hi, it looks like you have two of .use(Webcam), could that be it?

[goto-bus-stop]

Yes:

// adds Webcam plugin with default configuration and ID "Webcam"
.use(Webcam)
// adds Webcam plugin with custom configuration and ID "webcam"
.use(Webcam, {
  countdown: true,
  modes: ["picture"],
  id: "webcam"
});

// Mounts plugin with ID "Webcam" (i.e. the first .use(Webcam) with default configuration)
<Dashboard
  plugins={["Webcam"]}
  uppy={this.uppy}
/>

You can fix it by removing the .use(Webcam) line, and removing the id: "webcam" option from the remaining one, so that the custom config will have the default ID "Webcam".