Screenshot Feature

[candiedoperation]

@roerohan, Assigning an ID (taking it from the props) for the canvas helps capture a screen shot by using the canvas.toDataURL(type, encoderOptions); browser API

This would be a really useful feature.

[roerohan]

Hello @candiedoperation

The canvas element is inserted by the RFB object in the noVNC library itself, I do not create a canvas on my own. Here's what I do:

react-vnc/src/lib/VncScreen.tsx

Lines 252 to 258 in 932cb06

	<div
	style={style}
	className={className}
	ref={screen}
	onMouseEnter={handleMouseEnter}
	onMouseLeave={handleMouseLeave}
	/>

And then, the screen reference is passed to the RFB constructor:

react-vnc/src/lib/VncScreen.tsx

Line 183 in 932cb06

const _rfb = new RFB(screen.current, url);

Now, there are 2 ways to resolve your issue:

1. I could accept a canvasId prop, and set:

_rfb._canvas.id = canvasId;

2. You could use the rfb object that's exposed with the onConnect method:

function App() {
  const vncRfb = useRef(null);
  const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);

  useEffect(() => {
    // Assuming that `canvasId` is defined
    vncRfb.current?._canvas?.id = canvasId;
  }, [vncRfb.current]);

  return (
    <VncScreen
      url={vncUrl}
      scaleViewport
      debug
      ref={vncScreenRef}
      onConnect={(rfb) => {
        console.log('connected', rfb);
        vncRfb.current = rfb;
      }}
    />
  )
}

I think you could use the second approach here, I'm not really in favor of adding a canvasId prop in the library - unless you can tell me if there are any issues with this approach, or if assigning it in the library is better in any way.

[roerohan]

In #26, I've exposed the rfb object. So, if you have a code snippet like:

function App() {
  const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);

  return (
    <VncScreen
      url={vncUrl}
      scaleViewport
      debug
      ref={vncScreenRef}
    />
  )
}

You can access the rfb object using vncScreenRef.current?.rfb. If the rfb object isn't set, it's value is null.

You can now use vncScreenRef?.rfb?._canvas.id = canvasId;