canvas streaming to a video tag

[waleedd32]

As title says, i tried to stream from canvas to video tag, and first time i tried this, it worked, then i refreshed the page it wont show anything in video tag just black, same happens in all browsers but firefox wont even open the page it gives this error 'Uncaught
Exception { name: "NS_ERROR_NOT_INITIALIZED",'The above error occurred in the component:

StreamVideo@webpack:///./src/StreamVideo.js?:19:71
div'

Any idea how to fix this ?

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

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

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

loadPlayer({
  url: 'ws://.../api/stream',
  canvas: canvasRef.current,
});
if (canvasRef.current && videoRef.current) {
  const stream = canvasRef.current.captureStream();
  videoRef.current.srcObject = stream;
}

}, []);

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

export default StreamVideo;
`

[k-yle]

Why would you want to do this?

[waleedd32]

because in my code i have < canvas>< /canvas> and < video>< /video>, that video is normal video which plays in that canvas, and on canvas user is able to click and draw polygons while video still playing, i want to replace that normal video with rtsp live stream, but when using rtsp-relay it works on canvas so i need that to video tag. If i use just one canvas user wont be able to draw polygons on it and it would give me this error 'Uncaught (in promise) Error: Failed to get WebGL Context
at new WebGLRenderer'

[k-yle]

Perhaps you could put your drawing canvas on top of the live stream canvas, to avoid using a video element entirely?