teachablemachine-community icon indicating copy to clipboard operation
teachablemachine-community copied to clipboard

webcam.setup options or constraints

Open RadEdje opened this issue 6 years ago • 3 comments

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.

RadEdje avatar Nov 27 '19 15:11 RadEdje

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 avatar May 07 '20 21:05 ashzu

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

ArturGuedes avatar Jul 18 '20 02:07 ArturGuedes

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

Yugal41735 avatar Sep 10 '22 10:09 Yugal41735