title: Canvas returns blank image
body: <p>I have simply a button 'Create screenshot' and live stream 'rtsp-relay'. When that button is cliked it should take a snapshot or screenshot and show that under image, my problem is it shows blank image,  i have tried to do this in two ways and both of them show blank image (live stream works fine).</p>
  <p>code works fine with a simple drawing on a canvas:
  <a href="https://codesandbox.io/s/copy-canvas-c5l8et-c5l8et?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/copy-canvas-c5l8et-c5l8et?file=/src/App.js</a></p>
  <p>but when there is live video playing, it shows blank image when 'Create screenshot' button is clicked.</p>
  <p>Any idea why ?</p>
  <p>two ways i have tried:</p>
  <p>1:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef, useEffect, useState } from 'react';
  import ReactDOM from 'react-dom';
  import { loadPlayer } from 'rtsp-relay/browser';
  const StreamVideo = () =&gt; {
    const canvasRef = useRef(null);
    const createScreenshot = () =&gt;
      new Promise((resolve) =&gt; {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        context.drawImage(canvasRef.current, 0, 0);
        canvas.toBlob((blob) =&gt; {
          const src = URL.createObjectURL(blob);
          console.log('src', src);
          const image = new Image();
          image.onload = () =&gt; resolve(image);
          image.src = src;
        });
      });
  
    const handleButtonClick = () =&gt; {
      createScreenshot().then((image) =&gt; {
        document.body.append(image);
      });
    };
    useEffect(() =&gt; {
      if (!canvasRef.current) throw new Error('Ref is null');
      loadPlayer({
        url: 'ws://localho.../api/stream',
        canvas: canvasRef.current,
      });
    }, []);
    return (
      &lt;div style={{ border: '5px solid red' }}&gt;
        &lt;canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} /&gt;
        &lt;button onClick={handleButtonClick}&gt;Create screenshot&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  export default StreamVideo;</code></pre>
  </div>
  </div>
  </p>
  <p>2:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef, useEffect, useState } from 'react';
  import ReactDOM from 'react-dom';
  import { loadPlayer } from 'rtsp-relay/browser';
  const StreamVideo = () =&gt; {
    const canvasRef = useRef(null);
    const createScreenshot = () =&gt;
      new Promise((resolve) =&gt; {
        canvasRef.current.toBlob((blob) =&gt; {
          const src = URL.createObjectURL(blob);
          const image = new Image();
          image.onload = () =&gt; resolve(image);
          image.src = src;
        });
      });
  
    const handleButtonClick = () =&gt; {
      createScreenshot().then((image) =&gt; {
        document.body.append(image);
      });
    };
    useEffect(() =&gt; {
      if (!canvasRef.current) throw new Error('Ref is null');
      loadPlayer({
        url: 'ws://localh.../api/stream',
        canvas: canvasRef.current,
      });
    }, []);
    return (
      &lt;div style={{ border: '5px solid red' }}&gt;
        &lt;canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} /&gt;
        &lt;button onClick={handleButtonClick}&gt;Create screenshot&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  export default StreamVideo;</code></pre>
  </div>
  </div>
  </p>
  <p>image:</p>
  <p><a href="https://i.stack.imgur.com/kWqo3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWqo3.png" alt="enter image description here" /></a></p>