googlecreativelab / teachablemachine-community

Example code snippets and machine learning code for Teachable Machine
https://g.co/teachablemachine
Apache License 2.0
1.5k stars 666 forks source link

webcam.setup options or constraints #63

Open RadEdje opened 4 years ago

RadEdje commented 4 years ago

Greetings,

First of all I would just like to say How thankful I am to your team. You've done amazing work. I used to train with python... this just took python out of the equation! and braught me straight to my favorite javascript.

for my question.

I used my own webcam script before and I used media constraints to direct it to use the backfacing camera of a smart phone using the following:

        let constraints = {
            audio: false,
            video: {
                facingMode: "environment"
            }
        }

so I looked up the API at the following:

https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

and found this section:

webcam.setup(
    options: MediaTrackConstraints = {}
)

now when I plug in my constraints into the arguments for webcam.setup()....this is what happens.

  1. on Firefox for android, it asks me if i want to use the front or rear facing camera.
  2. On chrome for android, i don't get to choose and I'm forced to use the front facing camera.

Is there anyway to get the mediaTrackConstraint settings to work? or to setup the script to use the rear facing camera by default and only use the front facing when there's no other camera option? or maybe a can set up a modal or a switch to determine which camera to use. On fire fox, it's also veary dark if i use the rear camera. Are these device issues? or can they be fixed with a script or a bit of code I'm missing. Thanks again.

UPDATE: I checked the latest at MDN

https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

Seems the format has changes now to this

        let constraints = {

                facingMode: "environment"

        }

It seems facingMode is no longer under video Everythinig works now. Thanks again for this amazing project.

ashzu commented 4 years ago

Hello. Forgive, I am new to TFJS and Teachable Machine. I am having trouble getting the webcam.setup options to work. I don't know how to correctly implement and change facingMOde form the default 'user' to 'enviroment'. I get this error message on Angular : error TS2552: Cannot find name 'options'. Did you mean 'Option'?

My code is as follows.

await this.webcam.setup( options: { facingMode: "environment"} )

ArturGuedes commented 4 years ago

Hello. Forgive, I am new to TFJS and Teachable Machine. I am having trouble getting the webcam.setup options to work. I don't know how to correctly implement and change facingMOde form the default 'user' to 'enviroment'. I get this error message on Angular : error TS2552: Cannot find name 'options'. Did you mean 'Option'?

My code is as follows.

await this.webcam.setup( options: { facingMode: "environment"} )

@ashzu try something like:

await webcam.setup({ facingMode: "environment" });

In javascript vanilla works correctly

Yugal41735 commented 2 years ago

Hello, like, i have already set up my camera for front facing, but I want like when the user clicks toggle button, it should change to back camera. So like what i want to ask is how to change the facingMode of already set up webcam