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:
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);