snapshot of text possible but not video

I’m new to React, here i am using html2canvas to take a snapshot of a video, simply i have a button ‘take a snapshot’ and div which contains < h1>this text is viewable< / h1> and under that live stream, but as you can see from picture below when i click that button it only takes snapshot of that h1 text and video shows blank, any idea why video is blank ? so my code is working thats why text is viewable

image:

enter image description here

video.js:

import { Height } from '@material-ui/icons';
import React, { useRef, useEffect, useState } from 'react';
import { loadPlayer } from 'rtsp-relay/browser';

const StreamVideo = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) throw new Error('Ref is null');

    loadPlayer({
      url: 'ws://localhost:.../api/stream',
      canvas: canvasRef.current,
    });
  
  }, []);


  return (
    <div style={{ border: '5px solid red' }}>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
    </div>
  );
};

export default StreamVideo;

here using that :

  <button onClick={createPicHandle}>take a snapshot</button>

          <div ref={ref}>
            <h1>this text is viewable</h1>

            <StreamVideo />
          </div>

          {pic ? (
            <img src={pic} style={{ width: '100%', height: 'auto' }} alt="" />
          ) : null}

if needed here is nodejs:

const express = require('express');
const app = express();

const { proxy, scriptUrl } = require('rtsp-relay')(app);

const handler = proxy({
  url: `rtsp://....:.../Streaming/Channels/101`,
 
  verbose: false,
  transport: 'tcp',
});

app.ws('/api/stream', handler);

app.get('/', (req, res) =>
  res.send(
    `hg`,
  
  ),
);

app.listen(5000);