title: Stop Webcam in React Component in ComponentWillUnmount
body: <p>I have a react component which starts a webcam when the component VideoPage is mounted</p>
  
  <p>However, when I go to another page, the webcam is still running in the background cause my laptop's webcam lights is still on</p>
  
  <p>I believe I will need to 'kill' the webcam in React lifecycle method ComponentWillUnmount when exiting the component. How am I able to do that? </p>
  
  <p>Below are my codes... Appreciate advise. Thanks</p>
  
  <p>import React from "react";</p>
  
  <pre><code>export default class VideoPage extends React.Component {
    constructor(props) {
      super(props);
  
      this.videoTag = React.createRef();
  
      this.state = {
        loading: false
      };
    }
  
    componentDidMount() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then(this.handleStream)
        .catch(err =&gt; console.log(err));
    }
  
    handleStream = async stream =&gt; {
      // start receiving stream from webcam
      this.videoTag.current.srcObject = stream;
  
      console.log("The video is ready");
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;div style={{ paddingTop: 20 }}&gt;
            &lt;video
              id="myvideo"
              ref={this.videoTag}
              width={426}
              height={240}
              autoPlay
              title="video"
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>