I have a cam that sends via rtsp, it is live and i can watch it using vlc media player without any problem, but i want to embed that to my page and watch it there, i searched stackoverflow for a way doing that and found this:
https://stackoverflow.com/a/49377425/5183578
when i try it in normal html5 it works without problem:
English is not my mother language so there could be mistakes.
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video id="video" controls width="250">
<source src="http://...:8080" >
</video>
</body>
</html>My problem is doing that in react, using firefox browser, i can see the stream but it is stopped and i need to refresh the page for it to move if i dont refresh it is like an image. In my stream i have date and time moving, when i refresh the page i can see seconds changing:
trying it with chrome and edge it shows this :
here is my react code:
const CameraPreviewCanvas = useRef<any>();
const CameraPreviewImage = useRef<any>();
useEffect(() => {
updateCanvas();
const img = CameraPreviewImage.current;
img.onload = updateCanvas;
// unmount component when the camera is changed to prevent memory leaks
return () => {
img.onload = null;
};
});
<div style={state?.config?.previewStyle}>
<div style={{ padding: "15px" }}>
<canvas
ref={CameraPreviewCanvas}
width={canvasRenderWidth}
height={canvasRenderHeight}
onClick={onClickCanvas}
onMouseMove={onMouseOverCanvas}
style={canvasStyle}
></canvas>
<video
id="video"
loop
autoPlay={true}
muted
preload="auto"
width="250"
ref={CameraPreviewImage}
style={{ display: "none" }}
>
<source src="http://...:8080" />
<source src="http://...:8080" />
</video>
</div>
</div>
