Canvas returns blank image

1 year ago

#387972

walee

I have simply a button 'Create screenshot' and live stream 'rtsp-relay'. When that button is cliked it should take a snapshot or screenshot and show that under image, my problem is it shows blank image, i have tried to do this in two ways and both of them show blank image (live stream works fine).

code works fine with a simple drawing on a canvas: https://codesandbox.io/s/copy-canvas-c5l8et-c5l8et?file=/src/App.js

but when there is live video playing, it shows blank image when 'Create screenshot' button is clicked.

Any idea why ?

two ways i have tried:

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 createScreenshot = () =>
    new Promise((resolve) => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      context.drawImage(canvasRef.current, 0, 0);
      canvas.toBlob((blob) => {
        const src = URL.createObjectURL(blob);
        console.log('src', src);
        const image = new Image();
        image.onload = () => resolve(image);
        image.src = src;
      });
    });

  const handleButtonClick = () => {
    createScreenshot().then((image) => {
      document.body.append(image);
    });
  };
  useEffect(() => {
    if (!canvasRef.current) throw new Error('Ref is null');
    loadPlayer({
      url: 'ws://localho.../api/stream',
      canvas: canvasRef.current,
    });
  }, []);
  return (
    <div style={{ border: '5px solid red' }}>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
      <button onClick={handleButtonClick}>Create screenshot</button>
    </div>
  );
};
export default StreamVideo;

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 createScreenshot = () =>
    new Promise((resolve) => {
      canvasRef.current.toBlob((blob) => {
        const src = URL.createObjectURL(blob);
        const image = new Image();
        image.onload = () => resolve(image);
        image.src = src;
      });
    });

  const handleButtonClick = () => {
    createScreenshot().then((image) => {
      document.body.append(image);
    });
  };
  useEffect(() => {
    if (!canvasRef.current) throw new Error('Ref is null');
    loadPlayer({
      url: 'ws://localh.../api/stream',
      canvas: canvasRef.current,
    });
  }, []);
  return (
    <div style={{ border: '5px solid red' }}>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
      <button onClick={handleButtonClick}>Create screenshot</button>
    </div>
  );
};
export default StreamVideo;

image:

javascript

html

reactjs

typescript

canvas

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs