title: How to stream webcam feed on web page using react js component?
body: <p>I am new to reactJS and trying to build a component.</p>
  
  <p>I want to build a basic utility where I have a video component that shows live webcam feed and there would be a capture button, to capture and store a snap of the feed to disk. I want it to be in a single component ( video feed + capture button)</p>
  
  <p>This code streams the feed in browser but I want it in a component, </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;video autoplay="true" id="videoElement"&gt;
  
      &lt;/video&gt;
  &lt;/div&gt;
  &lt;script&gt;
   var video = document.querySelector("#videoElement");
  
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
  
  if (navigator.getUserMedia) {       
      navigator.getUserMedia({video: true}, handleVideo, videoError);
  }
  
  function handleVideo(stream) {
      video.src = window.URL.createObjectURL(stream);
  }
  
  function videoError(e) {}
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works fine, but not it's not a component.</p>
  
  <p>I tried following in reaact js but it's not working:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
  
      &lt;/div&gt;
      &lt;script type="text/jsx"&gt;
          var MyComponent = React.createClass({
              handleVideo: function(stream) {
                  video.src = window.URL.createObjectURL(stream);
              },
              videoError: function() {
  
              },
              render: function() {
  
              var video = document.querySelector("#videoElement");
  
              navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
  
              if (navigator.getUserMedia) {       
                  navigator.getUserMedia({video: true}, this.handleVideo, this.videoError);
              }
                  return &lt;div&gt;
                          &lt;video autoplay="true" id="videoElement"&gt;
                          &lt;/video&gt;
                         &lt;/div&gt;;
              }
          });
      React.render( &lt;MyComponent /&gt;, document.getElementById('container'));
      &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>The error is in handleVideo() </p>
  
  <p><strong>ReferenceError: video is not defined.</strong></p>
  
  <p>My understanding of error is, </p>
  
  <p>since the video tag is coming in later part(in return), it's trying to use before the definition in handleVideo function.
  i am confused how to make this work.</p>
  
  <p>Thank you!</p>