title: How to continuously stream video on canvas in React?
body: <p>Basically, I am trying to use <a href="https://github.com/cozmo/jsQR" rel="nofollow noreferrer">https://github.com/cozmo/jsQR</a> in the context of React. However, canvas only captures the video stream when the component mounts. How do I continuously stream the video using react canvas all throughout? </p>
  
  <pre><code>import React, { Component } from "react";
  import jsQR from "jsqr";
  
  class WebcamStream extends Component {
    constructor(props) {
      super(props);
  
      this.videoTag = React.createRef();
      this.canvas = React.createRef();
  
      this.tick = this.tick.bind(this);
    }
  
    componentDidMount() {
      // getting access to webcam
      navigator.mediaDevices
        .getUserMedia({ video: { facingMode: "environment" } })
        .then(stream =&gt; {
          const video = this.videoTag.current;
          video.srcObject = stream;
          video.setAttribute("playsinline", true);
          video.play();
          requestAnimationFrame(this.tick);
        });
    }
  
    componentDidUpdate() {}
  
    drawLine(begin, end, color) {
      const canvasElement = this.canvas.current;
      const canvas = canvasElement.getContext("2d");
  
      canvas.beginPath();
      canvas.moveTo(begin.x, begin.y);
      canvas.lineTo(end.x, end.y);
      canvas.lineWidth = 4;
      canvas.strokeStyle = color;
      canvas.stroke();
    }
  
    tick() {
      const video = this.videoTag.current;
  
      const checkVideoState = setInterval(() =&gt; {
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
          clearInterval(checkVideoState);
  
          const canvasElement = this.canvas.current;
          const canvas = canvasElement.getContext("2d");
  
          canvasElement.height = video.videoHeight;
          canvasElement.width = video.videoWidth;
          canvas.drawImage(
            video,
            0,
            0,
            canvasElement.width,
            canvasElement.height
          );
          let imageData = canvas.getImageData(
            0,
            0,
            canvasElement.width,
            canvasElement.height
          );
  
          console.log(imageData);
  
          var code = jsQR(imageData.data, imageData.width, imageData.height);
  
          if (code) {
            console.log("CODE");
            this.drawLine(
              code.location.topLeftCorner,
              code.location.topRightCorner,
              "#FF3B58"
            );
            this.drawLine(
              code.location.topRightCorner,
              code.location.bottomRightCorner,
              "#FF3B58"
            );
            this.drawLine(
              code.location.bottomRightCorner,
              code.location.bottomLeftCorner,
              "#FF3B58"
            );
            this.drawLine(
              code.location.bottomLeftCorner,
              code.location.topLeftCorner,
              "#FF3B58"
            );
          } else {
          }
        }
      }, 3000);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;video ref={this.videoTag} width="400" height="400" autoPlay /&gt;
          &lt;canvas ref={this.canvas} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default WebcamStream;
  </code></pre>