VideoCore.jsx

VideoCore.jsx

const React = require('react')
const {Paper, Card, CardHeader, CardMedia, Avatar} = require('material-ui')

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
if (!navigator.getUserMedia) {
  throw new Error('getUserMedia not supported')
}
module.exports = React.createClass({
  getDefaultProps() {
    return {
      width: 640,
      height: 480,
      fps: 30
    }
  },
  componentDidMount() {
    this.inputContext = this._inputCanvas.getContext('2d')
    navigator.getUserMedia({audio: false, video: true}, (stream) => {
      this._inputVideo.src = URL.createObjectURL(stream)
      this._inputVideo.play()
      requestAnimationFrame(this.readFrame)
    }, (err) => {
      console.log(err)
      //alert("can't get video")
    })
    this.outputContext = this._outputCanvas.getContext('2d')
  },
  readFrame() {
    try {
      this.inputContext.drawImage(this._inputVideo, 0, 0, this.props.width, this.props.height)
    } catch (e) {
      // The video may not be ready, yet.
      return null
    }

    this.props.newFrame(this.inputContext.getImageData(0, 0, this.props.width, this.props.height))
    setTimeout(() => {
      requestAnimationFrame(this.readFrame)
    }, Math.round(1000 / this.props.fps))

  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.imageData) {
      this.outputContext.putImageData(new ImageData(nextProps.imageData, this.props.width, this.props.height), 0, 0)
    }
  },
  render() {
    return (
      <Paper style={{margin: '0 0 0 20px', width: '800px', height: '600px'}}>
        <Card>
          <CardHeader title="Input"
                      avatar={<Avatar>I</Avatar>}
          />
          <CardMedia>
            <video ref={(v) => this._inputVideo = v} style={{display: 'none'}} />
            <canvas width={this.props.width} height={this.props.height} ref={(c) => this._inputCanvas = c } />
          </CardMedia>
        </Card>
        <Card>
          <CardHeader title="Output"
                      avatar={<Avatar>O</Avatar>}
          />
          <CardMedia>
            <canvas width={this.props.width} height={this.props.height} ref={(c) => this._outputCanvas = c } />
          </CardMedia>
        </Card>
      </Paper>
    )
  }
})