Photo.jsx

import React, { Component } from 'react';
import Webcam from 'react-webcam';

class Photo extends Component {
  constructor(props) {
    super(props);
    this.webcam = React.createRef();
    this.state = {
      takePicture: false,
      images: [],
      availableVideoInputs: [],
      videoConstraints: {
        facingMode: 'environment'
      }
    };
  }

  componentDidMount() {
    const gotDevices = (mediaDevices) =>
      new Promise((resolve, reject) => {
        const availableVideoInputs = []
        mediaDevices.forEach(mediaDevice => {
          if (mediaDevice.kind === 'videoinput') {
            availableVideoInputs.push({
              deviceId: mediaDevice.deviceId,
              label: mediaDevice.label
            })
          }
        })

        if (availableVideoInputs.length > 0) {
          resolve(availableVideoInputs)
        } else {
          reject(new Error('ERR::NO_MEDIA_TO_STREAM'))
        }
      });

    navigator.mediaDevices.enumerateDevices()
      .then(gotDevices)
      .then((availableVideoInputs) => this.setState({ availableVideoInputs }));
  }

  /* Useless if no change view camera */
  changeCameraView = () => {
    const { availableVideoInputs } = this.state
    if (availableVideoInputs.length === 1) {
      return console.error('ERR::AVAILABLE_MEDIA_STREAMS_IS_1')
    }

    this.setState({ resetCameraView: true })

    setTimeout(() => {
      const { videoConstraints: { facingMode } } = this.state
      const newFacingMode = facingMode === 'user' ? { exact: 'environment' } : 'user'

      this.setState({
        videoConstraints: { facingMode: newFacingMode },
        resetCameraView: false
      })
    }, 100)
  }

  displayWebcam = () => {
    this.setState({
      takePicture: true,
    });
  }

  takePhoto = () => {
    const imageSrc = this.webcam.current.getScreenshot();
    const { images } = { ...this.state };
    if (images.length < 3) {
      images.push(imageSrc);
      this.setState({
        images,
      });
    }
  }

  render() {
    const { images, takePicture, resetCameraView, videoConstraints } = this.state;
    return (
      <div className="Photo">
        {
          takePicture
            ?
            <div className="webcam">
              {
                !resetCameraView ?
                  <Webcam
                    audio={false}
                    ref={this.webcam}
                    screenshotFormat="image/jpeg"
                    screenshotQuality={1}
                    videoConstraints={videoConstraints}
                  />
                  : 'Loading...'
              }
              <button onClick={this.changeCameraView}>
                {videoConstraints.facingMode === 'user' ? 'Normal' : 'Selfie'}
              </button>
              <button onClick={this.takePhoto}>Smile !</button>
            </div>
            : <button onClick={this.displayWebcam}>Take a picture...</button>
        }
        <div className="images">
          {
            images.map((imgSrc, i) => (<img key={i} src={imgSrc} alt={`taken ${i}`} width="30%" />))
          }
        </div>
      </div>
    );
  }
}

export default Photo;