title: React-webcam enable/disable flash
body: <p>I'm using react JS  to create a camera application
  I want to be able to save a photo snapshot, change the <code>facingMode</code>, to be able to use the font and back camera of the phone. Also, I would like to enable and disable the flash when the <code>facingMode</code> is set to the environment.
  I used <code>react-webcam</code> from npm to start a video stream and create a snapshot.
  At this point, I can flip the camera (to use the front and back camera), but can I enable/disable the flash when the back camera is active?</p>
  <p>In here <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints</a> i found a  constant property called torch that is used for the mobile flash, but i don't know how to dynamycally set the vale to true/false</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Webcam from 'react-webcam';
  import { useState, useRef } from 'react';
  
  const WebcamComponent = () =&gt; &lt;Webcam /&gt;;
  
  const WebcamCapture = () =&gt; {
    const webcamRef = React.useRef(null);
    const [hasEnvCamera, setEvnCamera] = useState(false);
  
    const [image, setImage] = useState('');
  
    const [flash, setFlash] = useState(false);
  
    const capture = React.useCallback(() =&gt; {
      const imageSrc = webcamRef.current.getScreenshot();
      setImage(imageSrc);
    }, [webcamRef]);
  
    const videoConstraints = {
      width: 220,
      height: 200,
      facingMode: 'user',
    };
  
    const videoFlipConstraints = {
      width: 220,
      height: 200,
      facingMode: { exact: 'environment' },
    };
  
    const changeCamera = (e) =&gt; {
      e.preventDefault();
      if (hasEnvCamera) {
        console.log(' back camera');
        setEvnCamera(false);
      } else {
        console.log(' front camera');
        setEvnCamera(true);
      }
    };
  
    const changeFlash = (e) =&gt; {
      e.preventDefault();
      console.log('change flash');
      if (flash) {
        setFlash(false);
        console.log('flash off');
      } else {
        setFlash(true);
        console.log('flash on');
      }
    };
  
    return (
      &lt;div&gt;
        {hasEnvCamera ? (
          &lt;div&gt;
            &lt;p&gt; camera flip&lt;/p&gt;
            &lt;Webcam
              audio={false}
              height={200}
              ref={webcamRef}
              screenshotFormat=&quot;image/jpeg&quot;
              width={220}
              videoConstraints={videoFlipConstraints}
            /&gt;
            &lt;button onClick={changeFlash}&gt;
              {' '}
              {flash ? 'Disable flesh' : 'Enable flash'}{' '}
            &lt;/button&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;
            &lt;p&gt;selfie camera&lt;/p&gt;
            &lt;Webcam
              audio={false}
              height={200}
              ref={webcamRef}
              screenshotFormat=&quot;image/jpeg&quot;
              width={220}
              videoConstraints={videoConstraints}
            /&gt;
          &lt;/div&gt;
        )}
  
        &lt;button
          onClick={(e) =&gt; {
            e.preventDefault();
            capture();
          }}
        &gt;
          Photo
        &lt;/button&gt;
  
        &lt;button
          onClick={(e) =&gt; {
            e.preventDefault();
            const imageSrc = null;
            setImage(imageSrc);
          }}
        &gt;
          Take another photo{' '}
        &lt;/button&gt;
  
        &lt;button onClick={changeCamera}&gt; Change camera &lt;/button&gt;
        &lt;img src={image} /&gt;
      &lt;/div&gt;
    );
  };
  export default WebcamCapture;
  </code></pre>