I am creating a postcard application. To utilize the webcam I am using webkitURL which is available on the window object and building the app using react

I tried to test each function separately and all was well, but once I placed everything together I get this error 'Component' is not defined' in the console.

Here is a screenshot

Given Error

So *my question is:

why is Component not available?

Is it okay to save my Photo and Camera functions after my Capture component?

Here is my current code as well:

import React from 'react';
import ReactDOM from 'react-dom';


// CSS Styling

const styles = {
  capture: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  picSize: {
    display: 'flex',
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    margin: 30,
  },
  box: {
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    border: '10px solid green',
  }
}

//Components

class Capture extends Component{
  constructor(props) {
    super(props);
    this.state = {  
  constraints: { audio: false, video: { width: 400, height: 300 } }
  };
    this.handleStartClick = this.handleStartClick.bind(this);  
    this.takePicture = this.takePicture.bind(this);  
    this.clearPhoto = this.clearPhoto.bind(this);  
  }
  componentDidMount(){
    const constraints = this.state.constraints;  
    const getUserMedia = (params) => (  
  new Promise((successCallback, errorCallback) => {
    navigator.webkitGetUserMedia.call(navigator, params, successCallback, errorCallback);
  })
);

getUserMedia(constraints)  
.then((stream) => {
  const video = document.querySelector('video');
  const vendorURL = window.URL || window.webkitURL;

  video.src = vendorURL.createObjectURL(stream);
  video.play();
})
.catch((err) => {
  console.log(err);
});

this.clearPhoto(); 
  }
clearPhoto(){
      const canvas = document.querySelector('canvas');  
      const photo = document.getElementById('photo');  
      const context = canvas.getContext('2d');  
      const { width, height } = this.state.constraints.video;  
      context.fillStyle = '#FFF';  
      context.fillRect(0, 0, width, height);

      const data = canvas.toDataURL('image/png');  
      photo.setAttribute('src', data); 
    }
handleStartClick(event){
    event.preventDefault();  
    this.takePicture();  
    }
takePicture(){
    const canvas = document.querySelector('canvas');  
    const context = canvas.getContext('2d');  
    const video = document.querySelector('video');  
    const photo = document.getElementById('photo');  
    const { width, height } = this.state.constraints.video;

    canvas.width = width;  
    canvas.height = height;  
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL('image/png');  
    photo.setAttribute('src', data);  
}
render() {
    return (  
      <div className="capture"
        style={ styles.capture }
      >
        <Camera
          handleStartClick={ this.handleStartClick }
        />
        <canvas id="canvas"
          style={ styles.picSize }
          hidden
        ></canvas>
        <Photo />
      </div>
    );
  }
}
const Camera = (props) => (
  <div className="camera"
    style={ styles.box }
  >
    <video id="video"
      style={ styles.picSize }
    ></video>
    <a id="startButton"
      onClick={ props.handleStartClick }
      style={ styles.button }
    >Take photo</a>
  </div>
);

const Photo = (props) => (
    <div className="output"
    style={ styles.box }
  >
    <img id="photo" alt="Your photo"
      style={ styles.picSize }
    />
    <a id="saveButton"
      onClick={ props.handleSaveClick }
      style={ styles.button }
    >Save Photo</a>
  </div>
);
ReactDOM.render(
  <Capture />,
  document.getElementById('root')
);

I am creating a postcard application. To utilize the webcam I am using webkitURL which is available on the window object and building the app using react

I tried to test each function separately and all was well, but once I placed everything together I get this error 'Component' is not defined' in the console.

Here is a screenshot

Given Error

So *my question is:

why is Component not available?

Is it okay to save my Photo and Camera functions after my Capture component?

Here is my current code as well:

import React from 'react';
import ReactDOM from 'react-dom';


// CSS Styling

const styles = {
  capture: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  picSize: {
    display: 'flex',
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    margin: 30,
  },
  box: {
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    border: '10px solid green',
  }
}

//Components

class Capture extends Component{
  constructor(props) {
    super(props);
    this.state = {  
  constraints: { audio: false, video: { width: 400, height: 300 } }
  };
    this.handleStartClick = this.handleStartClick.bind(this);  
    this.takePicture = this.takePicture.bind(this);  
    this.clearPhoto = this.clearPhoto.bind(this);  
  }
  componentDidMount(){
    const constraints = this.state.constraints;  
    const getUserMedia = (params) => (  
  new Promise((successCallback, errorCallback) => {
    navigator.webkitGetUserMedia.call(navigator, params, successCallback, errorCallback);
  })
);

getUserMedia(constraints)  
.then((stream) => {
  const video = document.querySelector('video');
  const vendorURL = window.URL || window.webkitURL;

  video.src = vendorURL.createObjectURL(stream);
  video.play();
})
.catch((err) => {
  console.log(err);
});

this.clearPhoto(); 
  }
clearPhoto(){
      const canvas = document.querySelector('canvas');  
      const photo = document.getElementById('photo');  
      const context = canvas.getContext('2d');  
      const { width, height } = this.state.constraints.video;  
      context.fillStyle = '#FFF';  
      context.fillRect(0, 0, width, height);

      const data = canvas.toDataURL('image/png');  
      photo.setAttribute('src', data); 
    }
handleStartClick(event){
    event.preventDefault();  
    this.takePicture();  
    }
takePicture(){
    const canvas = document.querySelector('canvas');  
    const context = canvas.getContext('2d');  
    const video = document.querySelector('video');  
    const photo = document.getElementById('photo');  
    const { width, height } = this.state.constraints.video;

    canvas.width = width;  
    canvas.height = height;  
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL('image/png');  
    photo.setAttribute('src', data);  
}
render() {
    return (  
      <div className="capture"
        style={ styles.capture }
      >
        <Camera
          handleStartClick={ this.handleStartClick }
        />
        <canvas id="canvas"
          style={ styles.picSize }
          hidden
        ></canvas>
        <Photo />
      </div>
    );
  }
}
const Camera = (props) => (
  <div className="camera"
    style={ styles.box }
  >
    <video id="video"
      style={ styles.picSize }
    ></video>
    <a id="startButton"
      onClick={ props.handleStartClick }
      style={ styles.button }
    >Take photo</a>
  </div>
);

const Photo = (props) => (
    <div className="output"
    style={ styles.box }
  >
    <img id="photo" alt="Your photo"
      style={ styles.picSize }
    />
    <a id="saveButton"
      onClick={ props.handleSaveClick }
      style={ styles.button }
    >Save Photo</a>
  </div>
);
ReactDOM.render(
  <Capture />,
  document.getElementById('root')
);

• javascript
• reactjs
• html5-canvas

• 1 Aren't it should be extends React.Component? – masterpreenz Commented Sep 3, 2017 at 0:23
• @masterpreenz Thanks! wow I can't believe I forgot that, thats fixed and now its stating that styles is not defined – Sayran Commented Sep 3, 2017 at 0:33

3 Answers 3

You haven't declared Component and using it to extend your class Capture.

First you need import it like so:

import React, { Component } from 'react'

Or as @masterpreenz suggested in the comment change your class declaration to:

class Capture extends React.Component {
 ...
}

Replace this

import React from 'react';
import ReactDOM from 'react-dom';

into

import React, { Component } from 'react';

styles is not defined because you never created the styles object. From your code you're trying to access some properties of the styles object which are currently not defined.
You need to create the styles object and define those properties for them to be available.