title: Disconnect webcam on click after accessing it through .getUserMedia in ReactJS
body: <p>I'm getting a webcam feed through <code>navigator.mediaDevices.getUserMedia</code> on button click and passing it to <code>&lt;video /&gt;</code> via createRef API. I need to turn the feed off (not pause) on the same button click if it's on.</p>
  
  <p>I've tried accessing media tracks like</p>
  
  <pre><code>.getUserMedia({ video: true, audio: false })
   .then(stream =&gt; 
    (this.video.current.srcObject = stream.getTracks()[0].stop))
  </code></pre>
  
  <p>to try stopping them with no luck.</p>
  
  <p>I handle stream on/off via this function: </p>
  
  <pre><code>handleClick = () =&gt; {
   // accessing webcam feed
   if (!this.state.rec) {
     navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then(stream =&gt; (this.video.current.srcObject = stream))
   } else {
    // TODO disconnect webcam feed
   }
  };
  </code></pre>
  
  <p>I expect to have a function that disconnects the webcam feed on click if it is live.</p>