Barebones Webcam Image Select Asset Source Component for Sanity Studio

WebcamSource.js

import React from 'react'
import Dialog from 'part:@sanity/components/dialogs/fullscreen'
import Cam from 'react-webcam'

export default class Webcam extends React.Component {
  static defaultProps = {
    selectedAssets: undefined
  }

  state = {
    imageData: null,
  }

  setRef = (webcam) => {
    this.webcam = webcam
  }

  handleCapture = () => {
    const imageSrc = this.webcam.getScreenshot()
    this.setState({
      imageData: imageSrc
    })
  }

  handleSelect = () => {
    this.props.onSelect([{
      kind: 'base64',
      value: this.state.imageData,
      options: {
        originalFilename: `webcam-${new Date().toISOString}.jpg`, // Use this filename when saving the image.
        source: 'my-webcam' // The source this image is from,'
      }
    }]
    )
  }

  handleClose = () => {
    this.props.onClose()
  }

  render () {
    const videoConstraints = {
      width: 1280,
      height: 720,
      facingMode: 'user'
    }
    return (
      <Dialog title='Take a photo' onClose={this.handleClose} isOpen>
        <div>
            <Cam
              audio={false}
              height={500}
              width={500}
              ref={this.setRef}
              screenshotFormat='image/jpeg'
              videoConstraints={videoConstraints}
            />
          <button onClick={this.handleCapture}>Take photo</button>
          <div>
            <img src={this.state.imageData} />
          </div>
          <button onClick={this.handleSelect}>Go with it!</button>
        </div>
      </Dialog>
    )
  }
}