Skip to content

Instantly share code, notes, and snippets.

@addisonj
Created March 9, 2016 17:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save addisonj/a446047bb8beac108449 to your computer and use it in GitHub Desktop.
Save addisonj/a446047bb8beac108449 to your computer and use it in GitHub Desktop.
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>
)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment