capture snapshot of inside div doesnt show everything

1 year ago

#384567

walee

I'm React beginner, 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(stream works fine), 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 and in console there is yellow triangle which says 'eact_devtools_backend.js:3973 #1 155ms Unable to clone WebGL context as it has preserveDrawingBuffer=false ', i have not set that... , any idea why video is blank ? so my code is working thats why text is viewable

English is not my mother language so could be mistakes

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 :

  const ref = useRef();
  const [pic, setPic] = useState(null);

  const createPicHandle = () => {
  html2canvas(ref.current).then((canvas) => {
  setPic(canvas.toDataURL());
  });
  };

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

javascript

html

css

reactjs

canvas

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs