How to load rtsp in React?

[9mean2]

When set the app.ts file as shown in the example file and run app.ts, rtsp cctv is loaded from localhost:2000.

After that, I wrote the following in app.tsx in the React folder. But nothing loads on the screen.

//app.ts (server)

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

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

const handler = proxy({
  // url: `my-rtsp-url`,
  verbose: false,
});

// the endpoint our RTSP uses
app.ws('/api/stream', handler);

// this is an example html page to view the stream
app.get('/', (req, res) =>
  res.send(`
  <canvas id='canvas'></canvas>

  <script src='${scriptUrl}'></script>
  <script>
    loadPlayer({
      url: 'ws://' + location.host + '/api/stream',
      canvas: document.getElementById('canvas')
    });
  </script>
`)
);

app.listen(2000);

//App.tsx (client, localhost:3000)

import React, { useRef, useEffect } from 'react';
import { loadPlayer } from 'rtsp-relay/browser';

const App: React.VFC = () => {
  const canvas = useRef<HTMLCanvasElement>(null);

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

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

  return <canvas ref={canvas} />;
};

export default App;

All binary messages are displayed, but only the canvas is not loaded on the web.